CodeHighlight
Highlight code with highlight.js
Source
Docs
Package
License
Installation
After installation import package styles at the root of your application:
Example
CodeHighlight
component is used to display code snippets with syntax highlighting.
It provides a flexible adapter system that allows using any code highlighting library
of your choice.
Example of code highlighting with shiki:
Adapters
@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.
Default adapters:
createShikiAdapter
– creates shiki adaptercreateHighlightJsAdapter
– creates highlight.js adapterplainTextAdapter
– does not highlight code, just displays it as plain text (used by default if no adapter provided)
Usage with shiki
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). Shiki adapter is recommended if you need to highlight advanced TypeScript (generics, jsx nested in props) or CSS code (custom syntaxes, newest features). Shiki adapter is used for all code highlighting in Mantine documentation.
To use shiki adapter you need to install shiki
package:
Then wrap your app with CodeHighlightAdapterProvider
and provide createShikiAdapter
as adapter
prop:
After that, you can use CodeHighlight
component in your application:
All further code highlighting examples on this page are using shiki adapter.
Usage with highlight.js
Highlight.js provides less accurate highlighting compared to shiki, but it has smaller bundle size and better performance. Choose highlight.js adapter if you need to highlight basic JavaScript, HTML, and CSS code.
To use highlight.js adapter you need to install highlight.js
package:
Then wrap your app with CodeHighlightAdapterProvider
and provide createHighlightJsAdapter
as adapter
prop:
Then you need to add styles of one of the highlight.js themes to your application.
You can do that by importing css file from highlight.js
package or adding it via
CDN link to the head of your application:
After that, you can use CodeHighlight
component in your application.
Create custom adapter
You can create a custom adapter if you want to enhance the default behavior of the code highlighting or use a different library.
Example of creating a custom shiki adapter with custom themes and logic:
Copy button
You can customize copy button labels with copyLabel
and copiedLabel
props.
In case you need to remove the copy button, set withCopyButton={false}
.
With tabs
CodeHighlightTabs
component allows organizing multiple code blocks into tabs:
Tabs with icons
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:
Tabs icons based on file name
As an alternative to providing icons manually for each tab, you can use getFileIcon
prop
to assign icons based on file name. getFileIcon
accepts file name and must React node
or null
.
Expandable code
If the code snippet is too long, you can make it expandable with withExpandButton
and defaultExpanded={false}
props. To change label of the expand/collapse control
tooltip, use expandCodeLabel
and collapseCodeLabel
.
Custom controls
Use controls
prop with CodeHighlightControl
component to add custom controls
to the code block:
Inline code
InlineCodeHighlight
component allows highlighting inline code snippets:
You can highlight code inline: <InlineCodeHighlight code="" language="tsx" />
. Is that not cool?