hyesungoh / remark-prism

Syntax highlighter for markdown code blocks using Prism

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

λ 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