Newline Proliferating Maniac

    remark-prism
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/remark-prism package

    1.3.6 • Public • Published

    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.

    remark-prism

    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

    Install

    npm i remark-prism

    DownloadsWeekly Downloads

    4,832

    Version

    1.3.6

    License

    BSD-3-Clause

    Unpacked Size

    33.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • ramitos