sergioramosremark-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
λ yarn add remark-prism
usage
Input:
const src = `
\`\`\`javascript
console.log('Hello World');
\`\`\`
`;
Using remark (mdast):
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):
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:
console.log(
await require('@mdx-js/mdx')(src, {
commonmark: true,
gfm: true,
remarkPlugins: [
[
require('remark-prism'),
{
/* options */
},
],
],
}),
);
Output:
<div class="remark-highlight">
<pre class="language-javascript">
<code>
<span class="token console class-name">console</span>
<span class="token punctuation">.</span>
<span class="token method function property-access">log</span>
<span class="token punctuation">(</span>
<span class="token string">'Hello World'</span>
<span class="token punctuation">)</span>
<span class="token punctuation">;</span>
</code>
</pre>
</div>
Take a look at our fixtures and it's outputs to see more examples.
transformInlineCode
Add relevant class names to inline code snippets. For example when you use single backtick code examples.
use(require('remark-prism'), {
transformInlineCode: true,
});
plugins
It supports some Prism plugins:
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
\`\`\`diff-javascript[class="line-numbers"][class="diff-highlight"]
<pre class="language-diff-javascript diff-highlight line-numbers">...</pre>
license
BSD-3-Clause