Do you want to display your code snippet like this?
{
"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
.
@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
.
---
import "@/styles/global.css";
// ... rest of ile
---
Edit astro.config.mjs
and update tailwind()
section.
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
.
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.
[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.