Displaying the content of a file inside a fenced code block

[nshiab]

Hi!

I use Framework as a computational journalist. It's very useful for prototyping projects and explaining how the data has been manipulated.

I use the fenced code blocks with run=false a lot to show the code I used to wrangle the data. But copying and pasting the JS or TS code back to the markdown is tedious... Especially when this code is being updated or modified...

Is there a way to grab the content of a file and put it inside a fenced code block that would not run?

Thank you. 🙏

[mbostock]

One way to do this is with a page loader. This allows you to generate the Markdown dynamically (for example using Node.js) and you can read the JavaScript/TypeScript file and then inline it into the Markdown rather than copying it by hand.

Alternatively you could load the source as a FileAttachment and then use highlight.js to render the code block with syntax highlighting on the client.

[nshiab]

Thanks @mbostock!

Your suggestion helped me write this function.

import { FileAttachment } from "npm:@observablehq/stdlib";
import { html } from "htl";
import hljs from "highlight.js/lib/core";
import typescript from "highlight.js/lib/languages/typescript";

hljs.registerLanguage("typescript", typescript);

export default async function getHighlightedCode(file: FileAttachment) {
  const code = await file.text();

  const highlightedCode = hljs.highlight(code, {
    language: "typescript",
  }).value;

  const wrappedCode = html`<div
    class="observablehq-pre-container"
    data-language="ts"
  >
    <pre data-language="ts"><code class="language-ts"></code></pre>
  </div>`;

  wrappedCode.querySelector("code").innerHTML = highlightedCode;

  return wrappedCode;
}

Which can be called this way in the markdown.

```ts
display(await getHighlightedCode(FileAttachment("./sda/main.ts")));
```

And it works! :)