Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/val-istar-guo/rehype-prism
The unified plugin used to highlight code block in html with Prism
https://github.com/val-istar-guo/rehype-prism
code code-highlight code-highlighter highlight markdwon prismjs rehype rehype-parse remark unified
Last synced: about 6 hours ago
JSON representation
The unified plugin used to highlight code block in html with Prism
- Host: GitHub
- URL: https://github.com/val-istar-guo/rehype-prism
- Owner: Val-istar-Guo
- License: mit
- Created: 2018-11-26T12:36:39.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T02:54:54.000Z (about 2 months ago)
- Last Synced: 2024-12-18T16:16:15.570Z (8 days ago)
- Topics: code, code-highlight, code-highlighter, highlight, markdwon, prismjs, rehype, rehype-parse, remark, unified
- Language: TypeScript
- Homepage:
- Size: 88.9 KB
- Stars: 13
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/rehype-prism)
[](https://www.npmjs.com/package/rehype-prism)
[](https://www.npmjs.com/package/rehype-prism)
[](https://www.npmjs.com/package/rehype-prism)
[](https://codecov.io/gh/Val-istar-Guo/rehype-prism)
The unified plugin used to highlight code block in html with Prism.
## Usage
This package is ESM only. [unified >= 10](https://www.npmjs.com/package/unified) is needed to use it. If running on the server side, NodeJS needs to be greater than 12
```typescript
import { unified } from "unified";
import rehype from "rehype";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypePrism from "rehype-prism";
import rehypeStringify from "rehype-stringify";
// you have to load css manual
import "prismjs/themes/prism-coy.css";
import "prismjs/plugins/line-numbers/prism-line-numbers.css";
// load languages manual
// import 'prismjs/components/prism-{language}'
import "prismjs/components/prism-go";
import "prismjs/components/prism-java";
import "prismjs/components/prism-python";
// parse markdown to html
unified()
.use(remarkParse)
.use(remarkRehype)
// it should be after rehype
.use(rehypePrism, { plugins: ["line-numbers"] })
.use(rehypeStringify)
.parse(/* markdown string */);
// .processSync(/* markdown string */)
// parse code block in html string
rehype().use(rehypePrism).use(rehypeStringify).parse(/* html string */);
// .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-manual` on the `` element you used for prism.
`<script src="prism.js" data-manual>`
> Some plugins will not work. Because it's only work in browser.
## Load Plugins
The names to use can be found [here](https://github.com/PrismJS/prism/tree/master/plugins).
### 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](https://www.npmjs.com/package/babel-plugin-prismjs).
- Use `loadLanguages()` provided by `prismjs`.(don't use `loadLanguages()` with Webpack or another bundler)
- Import language manual. e.g. `import 'prismjs/components/prism-yaml.js'`
## Load Themes
- If you use [babel-plugin-prismjs](https://www.npmjs.com/package/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](https://github.com/shikijs/shiki) is another code highlight tools that support [unified](https://www.npmjs.com/package/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.