Code blocks

Write short code in the page itself. When the code lives in a file, such as a playground's source, import it instead: the page then shows exactly what the file holds, and never falls out of date.

Write a code block

Put the code between fences, with its language after the opening fence:

```ts
const answer = 42
```

The language selects the highlighting. The site configuration chooses the highlighter.

Show a file's code

<import-codeblock> puts a file's code in the page, as if you had written the code block yourself:

<import-codeblock src="./playground.ts"/>

It works anywhere a code block works: in Markdown, in component markup, and in headers and footers. A playground's source is the common case, next to the playground itself:

<Tabs group="playground" selectedTab="playground-preview" ariaLabel="Playground example">
  <TabPane id="playground-preview" label="Preview">
    <RegorApp id="playground" src="./playground.ts"/>
  </TabPane>
  <TabPane id="playground-source" label="playground.ts">
    <import-codeblock src="./playground.ts"/>
  </TabPane>
</Tabs>

• It is not a component. It becomes a code block before the page renders, so it takes plain attributes only, not bindings such as :src. Write it self-closing.
• Code stays code. A tag inside a code block or inline code is shown as written, as on this page.
• Edits show up. While purestack serve runs, saving the file updates every page that shows it.

When something is wrong

The build stops and names the page and the tag:

Code block import "./playgound.ts" in "components/actions/buttons/buttons.mdx" does not match any file.

While purestack serve runs, a page with this error shows it in place of its content and renders again as soon as the file exists. Most fixes are one of these:

• A typo or different capitals. ./Playground.ts doesn't find playground.ts.
• The file is outside the content folder. Move it in, next to the page that shows it.
• The tag is not self-closing. Write <import-codeblock src="./playground.ts"/>, not a pair of tags.