rehype plugin to highlight code blocks in HTML with Prism (via refractor) with line highlighting and line numbers
Usage no npm install needed!
<script type="module">
import rehypePrismPlus from 'https://cdn.skypack.dev/rehype-prism-plus';
</script>
README
rehype-prism-plus
rehype plugin to highlight code blocks in HTML with Prism (via refractor) with additional line highlighting and line numbers functionalities.
Inspired by and uses a compatible API as @mapbox/rehype-prism with additional support for line-highlighting and line numbers.
Tested to work with xdm and mdx v2 libraries such as mdx-bundler. If you are using mdx v1 libraries such as next-mdx-remote, you will need to patch it with the fixMetaPlugin discussed in this issue, before rehype-prism-plus.
An appropriate stylesheet should be loaded to style the language tokens, format line numbers and highlight lines.
Installation
This package is ESM only:
Node 12+ is needed to use it and it must be imported instead of required.
npm install rehype-prism-plus
Usage
The following objects are exported:
rehypePrismGenerator, generator function. Can be used to generate a rehype prism plugin that works on your desired languages.
rehypePrismCommon, rehype plugin. Supports the languages in refractor/lib/common.js.
If you would like to silently skip <code> elements with invalid languages or support line numbers and line highlighting for code blocks without a specified language, set this option to true.
options.showLineNumbers
Type: boolean.
Default: false.
By default, line numbers will only be displayed for code block cells with a meta property that includes 'showLineNumbers'. To control the starting line number use showLineNumbers=X, where X is the starting line number as a meta property for the code block.
If you would like to show line numbers for all code blocks, without specifying the meta property, set this to true.
Note: This will wrongly assign a language class and the class might appear as language-{1,3} or language-showLineNumbers, but allow the language highlighting and line number function to work. An possible approach would be to add a placeholder like unknown so the div will have class="language-unknown"