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: md ```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: ts 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 ts 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 ```astro