Gathering detailed insights and metrics for rehype-prism
Gathering detailed insights and metrics for rehype-prism
The unified plugin used to highlight code block in html with Prism
Installations
npm install rehype-prismDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
18.20.4
NPM Version
10.7.0
Score
94.6
Supply Chain
100
Quality
76.6
Maintenance
100
Vulnerability
100
License
Releases
15
Languages
3
TypeScript
JavaScript
Shell
TypeScript (97.12%)
JavaScript (2.06%)
Shell (0.82%)
Developer
Val-istar-Guo
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
13 Stars
74 Commits
1 Forks
1 Watchers
2 Branches
2 Contributors
Updated on Dec 09, 2024
Bundle Size
243.78 kB
Minified
74.44 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
2.3.3
Package Id
rehype-prism@2.3.3
Unpacked Size
32.15 kB
Size
12.25 kB
File Count
49
NPM Version
10.7.0
Node Version
18.20.4
Published on
Oct 29, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
24
The unified plugin used to highlight code block in html with Prism.
Usage
This package is ESM only. unified >= 10 is needed to use it. If running on the server side, NodeJS needs to be greater than 12
1import { unified } from "unified"; 2import rehype from "rehype"; 3import remarkParse from "remark-parse"; 4import remarkRehype from "remark-rehype"; 5import rehypePrism from "rehype-prism"; 6import rehypeStringify from "rehype-stringify"; 7 8// you have to load css manual 9import "prismjs/themes/prism-coy.css"; 10import "prismjs/plugins/line-numbers/prism-line-numbers.css"; 11 12// load languages manual 13// import 'prismjs/components/prism-{language}' 14import "prismjs/components/prism-go"; 15import "prismjs/components/prism-java"; 16import "prismjs/components/prism-python"; 17 18// parse markdown to html 19unified() 20 .use(remarkParse) 21 .use(remarkRehype) 22 // it should be after rehype 23 .use(rehypePrism, { plugins: ["line-numbers"] }) 24 .use(rehypeStringify) 25 .parse(/* markdown string */); 26// .processSync(/* markdown string */) 27 28// parse code block in html string 29rehype().use(rehypePrism).use(rehypeStringify).parse(/* html string */); 30// .processSync(/* html string */)
Server Side Render
PrismJS will auto highlight all code at pre code after browser document loaded.
Disabled prism autoHighlight before import 'rehype-prism'. there are two way to do this:
-
set the
window.Prism = { manual: true } -
use the attribute
data-manualon the<script>element you used for prism.<script src="prism.js" data-manual></script>
Some plugins will not work. Because it's only work in browser.
Load Plugins
The names to use can be found here.
Plugins Reimplemented By rehype-prism
The table list plugins that cannot running on the server side. Therefor it has been re-implemented by rehype-prism.
| Plugin Name |
|---|
| line-numbers |
| toolbar |
| copy-to-clipboard |
I haven't tested all prism plugins. If there are another plugins not work, submit issue on github.
Load More Languages
- Use babel-plugin-prismjs.
- Use
loadLanguages()provided byprismjs.(don't useloadLanguages()with Webpack or another bundler) - Import language manual. e.g.
import 'prismjs/components/prism-yaml.js'
Load Themes
- If you use babel-plugin-prismjs.
import 'prismjs'will auto load the theme setted in babel-plugin-prismjs config. - Import theme css manual. e.g.
import 'prismjs/themes/prism-coy.css'
See More
shiki is another code highlight tools that support unified. I recommend you try it. It's new, but better suited for modern front-end projects than Prismjs.
This does not mean that I will give up maintaining this library. If you need this library and have any issue, let me know it.
Contributing & Development
If there is any doubt, it is very welcome to discuss the issue together.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
0 existing vulnerabilities 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
packaging workflow detected
Details
- Info: Project packages its releases by way of GitHub Actions.: .github/workflows/release.yml:10
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/auto-assign.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/Val-istar-Guo/rehype-prism/auto-assign.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/Val-istar-Guo/rehype-prism/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/Val-istar-Guo/rehype-prism/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/Val-istar-Guo/rehype-prism/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:7: update your workflow using https://app.stepsecurity.io/secureworkflow/Val-istar-Guo/rehype-prism/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:8: update your workflow using https://app.stepsecurity.io/secureworkflow/Val-istar-Guo/rehype-prism/test.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/Val-istar-Guo/rehype-prism/test.yml/master?enable=pin
- Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 3 third-party GitHubAction dependencies pinned
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/auto-assign.yml:1
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
- Info: no jobLevel write permissions found
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
no effort to earn an OpenSSF best practices badge detected
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 7 are checked with a SAST tool
Score
4.2
/10
Last Scanned on 2025-06-30
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