Astro + Rehype Pretty Code = 🔥🚀

Do you want to display your code snippet like this?

/etc/docker/daemon.json

{
  "default-address-pools": [
    {
      "base": "10.0.0.0/24",
      "size": 24
    }
  ]
}

Enhance your Astro syntax highlighter with Rehype Pretty Code to incorporate these features:

Title
Caption
Line Numbers
Line Highlighting
Word Highlighting
Inline Code Highlighting
and more

Upgrade Packages

Make you have latest integration packages. As of the time of writing, we were using the following versions:

astro: 4.1.1
tailwindcss: 3.4.1
@astrojs/tailwind: 5.1.0

Disable The Default Tailwind Integration

Create src/styles/global.css.

src/styles/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Import the style into your base layout, in my AstroMon starter theme this is src/layouts/base.layout.astro.

src/layouts/base.layout.astro

---
import "@/styles/global.css";
 
// ... rest of ile
---

Edit astro.config.mjs and update tailwind() section.

astro.config.mjs

export default defineConfig({
  // ... other configs
  integrations: [
    tailwind({
      applyBaseStyles: false,
      nesting: true,
    }),
  ],
});

Install Rehype Pretty Code

npm install rehype-pretty-code

Edit astro.config.mjs to disable default syntax highlighter and add rehypePlugins.

astro.config.mjs

export default defineConfig({
  // ... other configs
  markdown: {
    syntaxHighlight: false,
    rehypePlugins: [[rehypePrettyCode, {}]],
  },
});

You can add additional options inside the {}, checkout their docs for details.

Styling The Code Block

At this point, Astro already highlights your syntax using rehype-pretty-code but is still unstyled. Adjustments are needed in the Tailwind section.

src/styles/global.css

[data-rehype-pretty-code-figure] {
  @apply relative;
}
 
[data-rehype-pretty-code-title] {
  @apply mt-0 inline-flex h-12 items-center rounded-tl-md rounded-tr-md;
  @apply border-t-2 border-indigo-500 bg-[--tw-prose-pre-bg] px-4
    text-sm dark:bg-[--tw-prose-invert-pre-bg];
}
 
[data-rehype-pretty-code-title] + pre {
  @apply rounded-tl-none;
}
 
pre {
  @apply mx-auto overflow-auto rounded-md p-4;
  @apply scrollbar-thin scrollbar-thumb-gray-500 scrollbar-thumb-rounded;
 
  [data-line] {
    @apply -mx-4 px-6;
  }
 
  [data-highlighted-line] {
    @apply bg-white/10;
  }
 
  [data-highlighted-chars] {
    @apply rounded-md p-1;
  }
 
  mark {
    @apply bg-gray-800 text-inherit;
  }
}
 
code {
  @apply text-base !leading-loose md:text-base;
 
  &[data-line-numbers] {
    counter-reset: line;
 
    > [data-line]::before {
      counter-increment: line;
      content: counter(line);
 
      @apply mr-4 inline-block w-4 text-right text-gray-500;
    }
  }
}

This HTML structure represents the output for your reference:

<figure data-rehype-pretty-code-figure>
  <!-- only if "title" has set -->
  <figcaption data-rehype-pretty-code-title></figcaption>
 
  <pre data-language data-theme>
        <code data-line-numbers data-language data-theme>
            <span data-line></span>
            <span data-line data-highlighted-line></span>
            <span data-line>
                <mark data-highlighted-chars></mark>
            </span>
        </code>
    </pre>
</figure>

These styles are a starting point,you may need to customize them to align with your site’s overall design. Alternatively, if you prefer a pre-made Astro theme, check out the AstroMon starter theme.