https://github.com/markedjs/marked-highlight
Add code highlighting to marked
https://github.com/markedjs/marked-highlight
Last synced: 8 months ago
JSON representation
Add code highlighting to marked
- Host: GitHub
- URL: https://github.com/markedjs/marked-highlight
- Owner: markedjs
- License: mit
- Created: 2023-03-31T01:08:45.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-05-05T17:20:50.000Z (8 months ago)
- Last Synced: 2025-05-05T18:35:35.571Z (8 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/marked-highlight
- Size: 3.52 MB
- Stars: 103
- Watchers: 3
- Forks: 11
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# marked-highlight
Highlight code blocks
## Installation
```sh
npm install marked-highlight
```
## Usage
You will need to provide a function that transforms the `code` to html.
```js
import { Marked } from "marked";
import { markedHighlight } from "marked-highlight";
import hljs from 'highlight.js';
// or UMD script
//
//
// const { Marked } = globalThis.marked;
// const { markedHighlight } = globalThis.markedHighlight;
const marked = new Marked(
markedHighlight({
emptyLangClass: 'hljs',
langPrefix: 'hljs language-',
highlight(code, lang, info) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
}
})
);
marked.parse(`
\`\`\`javascript
const highlight = "code";
\`\`\`
`);
//
// const highlight = "code";
//
```
The `async` option should be set to `true` if the `highlight` function returns a `Promise`.
```js
import { Marked } from "marked";
import { markedHighlight } from "marked-highlight";
import pygmentize from 'pygmentize-bundled';
const marked = new Marked(
markedHighlight({
async: true,
highlight(code, lang, info) {
return new Promise((resolve, reject) => {
pygmentize({ lang, format: 'html' }, code, function (err, result) {
if (err) {
reject(err);
return;
}
resolve(result.toString());
});
});
}
})
)
await marked.parse(`
\`\`\`javascript
const highlight = "code";
\`\`\`
`);
//
//
//
// const highlight = "code";
//
//
//
```
### `options`
| option | type | default | description |
|--------|--------|---------|:------------|
| async | boolean | `false` | If the highlight function returns a promise set this to `true`. Don't forget to `await` the call to `marked.parse` |
| langPrefix | string | `'language-'` | A prefix to add to the class of the `code` tag. |
| emptyLangClass | string | `''` | The class to add to the `code` tag if the language is empty. |
| highlight | function | `(code: string, lang: string) => {}` | Required. The function to transform the code to html. |