remark-prism

Syntax highlighter for markdown code blocks using Prism - with support for certain 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 (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 (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:

`js
console.log(
await require('@mdx-js/mdx')(src, {
commonmark: true,
gfm: true,
remarkPlugins: [
[
require('remark-prism'),
{
/ options /
},
],
],
}),
);
`

Output:

`html


    
      console
      .
      log
      (
      'Hello World'
      )
      ;
    
  

`js
use(require('remark-prism'), {
transformInlineCode: true,
});
`

$3

It supports some Prism 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._

$3

`markdown
\\\diff-javascript[class="line-numbers"][class="diff-highlight"]
``

`html


...

license

BSD-3-Clause