@common-web/remark-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.

Forked of remark-prism with few changes:

• Tweak to support inline-code highlighting

installation

λ yarn add remark-prism

usage

const src = `
\`\`\`javascript
console.log('Hello World');
\`\`\`
`;

require('remark')()
  .use(require('remark-prism'))
  .use(require('remark-html'))
  .process(src, (err, { contents }) => console.log(contents));

<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>

showSpotlight

Based gatsby-remark-prismjs, it supports natively the line-highlight since that plugin doesn't work well in SSR.

remark()
  .use(require('remark-prism'), { showSpotlight: true })
  .use(require('remark-html'))
  .process(src, console.log);

\`\`\`html{1,3-4,8}
...

Required CSS:

/* from: https://github.com/chasm/gatsby-remark-prismjs/blob/af90edfd6f378a7ffd8d70e50a540077795e5c2c/README.md#L83-L110 */
/* container of the code block */
.remark-highlight {
  border: 1px solid #dddddd;
  border-radius: 0.3em;
  margin: 0.5em 0;
  overflow: auto;
}

.remark-highlight pre[class*='language-'] {
  background-color: transparent;
  margin: 0;
  padding: 0;
  overflow: initial;
  float: left; /* 1 */
  min-width: 100%; /* 2 */
}

/* highlight for each spotlight line */
.remark-highlight-code-line {
  background-color: #feb;
  display: block;
  margin-right: -1em;
  margin-left: -1em;
  padding-right: 1em;
  padding-left: 0.75em;
  border-left: 0.25em solid #f99;
}

/* Gutter for line numbers when the line-numbers plugin is active */
.remark-highlight pre[class*='language-'].line-numbers {
  padding-left: 2.8em;
}

plugins

It supports some Prism plugins:

remark()
  .use(require('remark-prism'), {
    plugins: [
      'prismjs/plugins/autolinker/prism-autolinker',
      'prismjs/plugins/diff-highlight/prism-diff-highlight',
      'prismjs/plugins/inline-color/prism-inline-color',
      'prismjs/plugins/line-numbers/prism-line-numbers',
      'prismjs/plugins/treeview/prism-treeview',
      'prismjs/plugins/show-invisibles/prism-show-invisibles',
    ],
  })
  .use(require('remark-html'))
  .process(src, console.log);

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