Highlight.js is a required dependency to enable syntax highlighting.
Configure Your Project
To reduce your bundle size, we'll only import and register select languages for (ex: HTML, CSS, JS, TS). Please refer to the Highlight.js usage guide for more instruction.
Import any Highlight.js CSS theme of your choice.
Finally, import the CodeBlock's writable store and pass a referenced to Highlight.js.
If you are using PurgeCSS, safelist the imported classes in
vite.config.ts so that they will not be removed during the build.
lineNumbers property will add line numbers to the displayed code. Supports up to 1000 lines of code.
Syntax highlighting will appear when a valid language alias is provided to the Code Block's
language property. For common web languages we recommend the shorthand values:
pre-wrap by default to support keyboard-only navigation. Please be mindful of color contrast ratios when
customizing the design of your Code Block components.