Gathering detailed insights and metrics for rehype-prism-plus
rehype plugin to highlight code blocks in HTML with Prism (via refractor) with line highlighting and line numbers
Installations
npm install rehype-prism-plusDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
18.17.1
NPM Version
9.6.7
Score
97.5
Supply Chain
100
Quality
76
Maintenance
100
Vulnerability
100
License
Releases
26
Contributors
9
Unable to fetch Contributors
Languages
2
JavaScript
Shell
JavaScript (99.72%)
Shell (0.28%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
timlrx
Download Statistics
Total Downloads
13,017,037
Last Day
8,322
Last Week
222,317
Last Month
862,203
Last Year
7,017,376
GitHub Statistics
MIT License
183 Stars
126 Commits
19 Forks
4 Watchers
10 Branches
9 Contributors
Updated on Jan 28, 2025
Bundle Size
641.03 kB
Minified
228.76 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
2.0.0
Package Id
rehype-prism-plus@2.0.0
Unpacked Size
99.95 kB
Size
13.67 kB
File Count
15
NPM Version
9.6.7
Node Version
18.17.1
Published on
Jan 08, 2024
Total Downloads
Cumulative downloads
Total Downloads
13,017,037
Last Day
0.2%
8,322
Compared to previous day
Last Week
1.6%
222,317
Compared to previous week
Last Month
42.5%
862,203
Compared to previous month
Last Year
56.6%
7,017,376
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
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, line numbers and diff code blocks.
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. You can specify language for diff code blocks by using diff-[language] to enable syntax highlighting in diffs.
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 import paths are supported:
rehype-prism-plus/generator, generator function. Can be used to generate a rehype prism plugin that works on your desired languages.rehype-prism-plus/common, rehype plugin. Supports the languages inrefractor/lib/common.js.rehype-prism-plus/all, rehype plugin. Works with all language supported by refractor.rehype-prism-plus, re-exports the above 3 packages withrehype-prism-plus/allas the default export.
Some examples of how you might use the rehype plugin:
1import rehype from 'rehype' 2import rehypePrism from 'rehype-prism-plus' 3 4rehype().use(rehypePrism).process(/* some html */)
Here's an example of syntax highlighting in Markdown, with xdm
1import { compile } from 'xdm' 2import rehypePrism from 'rehype-prism-plus' 3 4async function main(code) { 5 console.log(String(await compile(code, { rehypePlugins: [rehypePrism] }))) 6} 7 8main(`~~~js 9console.log(1) 10~~~`)
Sample markdown to HTML output
Input:
1```js {1,3-4} showLineNumbers 2function fancyAlert(arg) { 3 if (arg) { 4 $.facebox({ div: '#foo' }) 5 } 6} 7```
HTML Output:
1<code class="language-js"> 2 <div class="code-line line-number highlight-line" line="1"> 3 <span class="keyword">function</span> 4 <span class="function">fancyAlert</span><span class="punctuation">(</span 5 ><span class="">arg</span><span class="punctuation">)</span> 6 <span class="punctuation">{</span> 7 </div> 8 <div class="code-line line-number highlight-line" line="2"> 9 <span class="keyword">if</span> 10 <span class="punctuation">(</span>arg<span class="punctuation">)</span> 11 <span class="punctuation">{</span> 12 </div> 13 <div class="code-line line-number" line="3"> 14 $<span class="punctuation">.</span><span class="function">facebox</span 15 ><span class="punctuation">(</span><span class="punctuation">{</span> div<span class="">:</span> 16 <span class="string">'#foo'</span> 17 <span class="punctuation">}</span><span class="punctuation">)</span> 18 </div> 19 <div class="code-line line-number" line="4"> 20 <span class="punctuation">}</span> 21 </div> 22 <div class="code-line line-number" line="5"> 23 <span class="punctuation">}</span> 24 </div></code 25>
Generating
To customise the languages for your own prism plugin:
1import { refractor } from 'refractor/lib/core.js' 2import markdown from 'refractor/lang/markdown.js' 3import rehypePrismGenerator from 'rehype-prism-plus/generator' 4 5refractor.register(markdown) 6const myPrismPlugin = rehypePrismGenerator(refractor)
Styling
To style the language tokens, you can just copy them from any prismjs compatible ones. Here's a list of themes.
In addition, the following styles should be added for line highlighting and line numbers to work correctly:
1pre { 2 overflow-x: auto; 3} 4 5/** 6 * Inspired by gatsby remark prism - https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/ 7 * 1. Make the element just wide enough to fit its content. 8 * 2. Always fill the visible space in .code-highlight. 9 */ 10.code-highlight { 11 float: left; /* 1 */ 12 min-width: 100%; /* 2 */ 13} 14 15.code-line { 16 display: block; 17 padding-left: 16px; 18 padding-right: 16px; 19 margin-left: -16px; 20 margin-right: -16px; 21 border-left: 4px solid rgba(0, 0, 0, 0); /* Set placeholder for highlight accent border color to transparent */ 22} 23 24.code-line.inserted { 25 background-color: rgba(16, 185, 129, 0.2); /* Set inserted line (+) color */ 26} 27 28.code-line.deleted { 29 background-color: rgba(239, 68, 68, 0.2); /* Set deleted line (-) color */ 30} 31 32.highlight-line { 33 margin-left: -16px; 34 margin-right: -16px; 35 background-color: rgba(55, 65, 81, 0.5); /* Set highlight bg color */ 36 border-left: 4px solid rgb(59, 130, 246); /* Set highlight accent border color */ 37} 38 39.line-number::before { 40 display: inline-block; 41 width: 1rem; 42 text-align: right; 43 margin-right: 16px; 44 margin-left: -8px; 45 color: rgb(156, 163, 175); /* Line number color */ 46 content: attr(line); 47}
Here's the styled output using the prism-night-owl theme:
For more information on styling of language tokens, consult refractor and Prism.
API
rehype().use(rehypePrism, [options])
Syntax highlights pre > code.
Under the hood, it uses refractor, which is a virtual version of Prism.
The code language is configured by setting a language-{name} class on the <code> element.
You can use any language supported by refractor.
If no language-{name} class is found on a <code> element, it will be skipped.
options
options.ignoreMissing
Type: boolean.
Default: false.
By default, if {name} does not correspond to a language supported by refractor an error will be thrown.
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.defaultLanguage
Type: string.
Default: ``.
Uses the specified language as the default if none is specified. Takes precedence over ignoreMissing.
Note: The language must be first registered with refractor.
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"
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/unit.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/timlrx/rehype-prism-plus/unit.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/unit.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/timlrx/rehype-prism-plus/unit.yml/main?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 1 out of 1 npmCommand dependencies pinned
Reason
7 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Reason
Found 3/13 approved changesets -- score normalized to 2
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/unit.yml:1
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 24 are checked with a SAST tool
Score
3.2
/10
Last Scanned on 2025-02-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More