Syntax Highlighting

Syntax highlighting is part of the writing experience in Compass, so it fits better as a docs feature than as a reusable component.

Use in MDX

To highlight a snippet, write a fenced code block and add the language name after the opening backticks. Compass reads that language and shows it as a small label in the code block header, so readers do not need the prose to explain what ts, bash, or json means.

This first example is the raw Markdown you type into the article:

```ts
export function formatTitle(title: string) {
  return title.trim().replace(/\s+/g, ' ');
}
```

And this is how that same snippet renders on the page, with the language shown in the header automatically:

export function formatTitle(title: string) {
  return title.trim().replace(/\s+/g, ' ');
}

Where it is configured

Compass uses Astro’s built-in Markdown highlighting through shikiConfig in astro.config.mjs.

If you want to change the theme or code presentation later, update:

• astro.config.mjs for Shiki theme configuration
• src/index.css for the code block frame, language label, and copy button styling

More Preview

export function formatTitle(title: string) {
  return title.trim().replace(/\s+/g, ' ');
}

Common languages

Compass supports many common fenced code block languages out of the box. Code-focused languages keep full syntax highlighting, including:

• ts
• js
• tsx
• jsx
• json
• bash
• html
• css
• astro

Markdown-style source examples such as md, mdx, and text are also supported, but Compass renders them in a calmer plain monospace style.

More examples

Astro component

---
const title = 'Compass Docs';
---

<section>
  <h1>{title}</h1>
</section>

JSON config

{
  "title": "Compass Docs Theme",
  "siteUrl": "https://example.com",
  "navigation": ["Getting Started", "Compass Docs", "Integrations"]
}

Terminal command

npm install
npm run dev

Inline code

For short references inside a paragraph, wrap code in single backticks like astro.config.mjs or npm run build.

Learn more

Official Astro guide:

https://docs.astro.build/en/guides/syntax-highlighting/

If you want to use custom callouts, tabs, buttons, and other reusable content blocks alongside fenced code snippets, see Register MDX Components.