Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sergioramos/remark-prism
Syntax highlighter for markdown code blocks using Prism
https://github.com/sergioramos/remark-prism
Last synced: 34 minutes ago
JSON representation
Syntax highlighter for markdown code blocks using Prism
- Host: GitHub
- URL: https://github.com/sergioramos/remark-prism
- Owner: sergioramos
- Created: 2020-05-08T16:57:03.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-02-22T04:13:47.000Z (over 1 year ago)
- Last Synced: 2024-04-24T07:25:45.751Z (7 months ago)
- Language: HTML
- Homepage:
- Size: 20.3 MB
- Stars: 93
- Watchers: 2
- Forks: 20
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# remark-prism
Syntax highlighter for markdown code blocks using [Prism](https://prismjs.com/) - with support for certain [plugins](https://prismjs.com/plugins/). This allows syntax highlighting without running any client-side code - other than CSS.
## installation
```bash
λ yarn add remark-prism
```
## usage
Input:
```js
const src = `
\`\`\`javascript
console.log('Hello World');
\`\`\`
`;
```
Using [remark](https://github.com/remarkjs/remark) (mdast):
```js
require('unified')()
.use(require('remark-parse'))
.use(require('remark-stringify'))
.use(require('remark-prism'), {
/* options */
})
.use(require('remark-html'))
.process(file, (err, file) => console.log(String(file)));
```
Using [rehype](https://github.com/rehypejs/rehype) (hast):
```js
require('unified')()
.use(require('remark-parse'))
.use(require('remark-prism'), {
/* options */
})
.use(require('remark-rehype'))
.use(require('rehype-format'))
.use(require('rehype-stringify'))
.process(file, (err, file) => console.log(String(file)));
```
Using [mdx](https://mdxjs.com/):
```js
console.log(
await require('@mdx-js/mdx')(src, {
commonmark: true,
gfm: true,
remarkPlugins: [
[
require('remark-prism'),
{
/* options */
},
],
],
}),
);
```
Output:
```html
console
.
log
(
'Hello World'
)
;
```
Take a look at our [fixtures](test/fixtures) and it's [outputs](test/outputs) to see more examples.
### `transformInlineCode`
Add relevant class names to inline code snippets. For example when you use single backtick code examples.
```js
use(require('remark-prism'), {
transformInlineCode: true,
});
```
### plugins
It supports some [Prism](https://prismjs.com/) plugins:
```js
use(require('remark-prism'), {
plugins: [
'autolinker',
'command-line',
'data-uri-highlight',
'diff-highlight',
'inline-color',
'keep-markup',
'line-numbers',
'show-invisibles',
'treeview',
],
});
```
> _Don't forget to include the appropriate css in your stylesheets. Refer to the documentation of each plugin._
### attributes
```markdown
\`\`\`diff-javascript[class="line-numbers"][class="diff-highlight"]
```
```html
...
```
## license
BSD-3-Clause