code-highlight/adapters

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

CodeHighlight default adapters

The @mantine/code-highlight package provides three default adapters: createShikiAdapter creates a shiki adapter, createHighlightJsAdapter creates a highlight.js adapter, and plainTextAdapter does not highlight code but displays it as plain text and is used by default if no adapter is provided.

Shiki adapter for advanced syntax highlighting

Shiki uses textmate grammars to highlight code, the same as in VSCode. The Shiki adapter is recommended if you need to highlight advanced TypeScript including generics and jsx nested in props, or CSS code with custom syntaxes and newest features. Shiki provides the most advanced syntax highlighting for TypeScript and CSS/Sass code and is used for all code highlighting in Mantine documentation.

Using Shiki adapter setup

To use the shiki adapter, install the shiki package. Then wrap your app with CodeHighlightAdapterProvider and provide createShikiAdapter as the adapter prop. Shiki requires async code to load the highlighter. Call createHighlighter with langs and themes arrays. Example: async function loadShiki() { const { createHighlighter } = await import('shiki'); const shiki = await createHighlighter({ langs: ['tsx', 'scss', 'html', 'bash', 'json'], themes: [], }); return shiki; } const shikiAdapter = createShikiAdapter(loadShiki);

Highlight.js adapter characteristics

Highlight.js provides less accurate highlighting compared to shiki but has a smaller bundle size and better performance. Choose the highlight.js adapter if you need to highlight basic JavaScript, HTML, and CSS code.

Using highlight.js adapter setup

To use the highlight.js adapter, install the highlight.js package. Then wrap your app with CodeHighlightAdapterProvider and provide createHighlightJsAdapter as the adapter prop. Register language modules with hljs.registerLanguage(). After that, add styles from one of the highlight.js themes by importing a css file from the highlight.js package or adding it via a CDN link to the head of your application.

Custom CodeHighlight adapter creation

You can create a custom adapter if you want to enhance the default behavior of code highlighting or use a different library. A CodeHighlightAdapter has two properties: loadContext which is called on the client side to load any async dependencies (the returned value is passed to getHighlighter as ctx argument), and getHighlighter which receives ctx and returns a function that accepts {code, language, colorScheme} and returns {highlightedCode, isHighlighted}.

stripShikiCodeBlocks utility function

The stripShikiCodeBlocks function from @mantine/code-highlight removes <pre> and <code> tags from highlighted code output, useful when creating custom adapters with shiki.

Give your agent this brain