Code Snippets

It can be tricky to display code in a way that doesn’t clash with the existing design.

Thankfully, there are highlighters like Prism. In fact, Missing Style comes with a readymade stylesheet just for it.

<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.2/prism">

Although Astro uses another highlighter, Shiki, out of the box, we can set it up so that Markdown files’ code blocks use the <Prism /> component.

export default defineConfig({
  integrations: [...],
  markdown: {
    syntaxHighlight: 'prism',
  }
});

Now, we just have a small issue…

println!("Code figures aren't consistent!");

The next trick was to use .mdx which let me inline the necessary <figure> element into my document.

print("Now, isn't that better?");