Highlight code with shiki or highlight.js
After installation import package styles at the root of your application:
CodeHighlight component is used to display code snippets with syntax highlighting. It provides a flexible adapter system that allows you to use any code highlighting library of your choice.
Example of code highlighting with shiki :
@mantine/code-highlight package does not depend on any specific code highlighting library. You can choose one of the default adapters provided by the package or create your own.
Shiki library provides the most advanced syntax highlighting for TypeScript and CSS/Sass code. It uses textmate grammars to highlight code (same as in VSCode). The Shiki adapter is recommended if you need to highlight advanced TypeScript (generics, jsx nested in props) or CSS code (custom syntaxes, newest features). The Shiki adapter is used for all code highlighting in Mantine documentation.
To use the shiki adapter, you need to install the shiki package:
Then wrap your app with CodeHighlightAdapterProvider and provide createShikiAdapter as the adapter prop:
After that, you can use the CodeHighlight component in your application:
All further code highlighting examples on this page use the shiki adapter.
Shiki loads grammars of all languages that are given to the highlighter in advance. If your application highlights code in dozens of languages, all of these grammars are downloaded before the first code block can be highlighted.
To load grammars on demand, pass resolveLanguage option to createShikiAdapter . It is called with the language of a code block that is not loaded in the highlighter yet, and its return value is passed to shiki highlighter.loadLanguage . Code is highlighted once the grammar is loaded, until then it is displayed as plain text:
Highlighters created with shiki/core do not bundle grammars – return a function that imports the grammar of the given language instead:
If resolveLanguage returns null or undefined , the language is considered unsupported and its code is displayed as plain text.
If a code block uses a language that is not loaded in the highlighter and cannot be loaded on demand, its code is displayed as plain text instead of throwing an error. In development, a warning is logged to the console once per language – either add the language to the langs option of the highlighter, or load it on demand with resolveLanguage .
If a grammar fails to load (for example, a dynamic import fails), the code stays plain text and the failure is not cached – the language is requested again the next time a code block with that language is mounted.
Highlight.js provides less accurate highlighting compared to shiki, but it has a smaller bundle size and better performance. Choose the highlight.js adapter if you need to highlight basic JavaScript, HTML, and CSS code.
To use the highlight.js adapter, you need to install the highlight.js package:
Then wrap your app with CodeHighlightAdapterProvider and provide createHighlightJsAdapter as the adapter prop:
Then you need to add styles from one of the highlight.js themes to your application. You can do that by importing a css file from the highlight.js package or adding it via a CDN link to the head of your application:
After that, you can use the CodeHighlight component in your application.
You can create a custom adapter if you want to enhance the default behavior of code highlighting or use a different library.
Example of creating a custom shiki adapter with custom themes and logic:
You can customize copy button labels with copyLabel and copiedLabel props. In case you need to remove the copy button, set withCopyButton={false} .
CodeHighlightTabs component allows you to organize multiple code blocks into tabs:
You can use any React node as tab icon. The example below uses TypeScript and CSS icons from the @mantinex/dev-icons package, but you can use any other icons library or custom icons:
As an alternative to providing icons manually for each tab, you can use the getFileIcon prop to assign icons based on file name. getFileIcon accepts a file name and must return a React node or null .
Set withLineNumbers prop to display line numbers alongside the code:
CodeHighlight trims the code before rendering it, so the indentation of the first line is removed while every other line keeps it. Set withFirstLineIndentation prop to preserve it – this is useful for blocks whose first line is intentionally indented, for example column-aligned text or a wrapped shell command:
Default: the first line is dedented
withFirstLineIndentation
Blank lines at the start and trailing whitespace are removed in both cases. The prop also controls the code that is copied by the copy button.
If the code snippet is too long, you can make it expandable with withExpandButton and defaultExpanded={false} props. To change the label of the expand/collapse control tooltip, use expandCodeLabel and collapseCodeLabel .
Use the controls prop with the CodeHighlightControl component to add custom controls to the code block:
InlineCodeHighlight component allows you to highlight inline code snippets:
You can highlight code inline: <InlineCodeHighlight code="" language="tsx" /> . Is that not cool?
Notifications system