Prismjs-polyfill NPM

prismjs-polyfill ·

A polyfill for prism.js to import all languages and isolate various syntax themes because of global style pollution.

How to use

Prepare

import 'prismjs-polyfill/lib/index.css';

import 'prismjs-polyfill/lib/index.scss';

The former needs style-loader and css-loader, and the latter also needs node-sass and sass-loader in Webpack.

import Prism, { languages, themes, plugins } from 'prismjs-polyfill';

It will get the Prism supporting all languages, an Array of languages, an Object of themes, and an Object of plugins.

Example

const theme = 'prism-twilight';
const lang = 'cpp';

return `
    <div class=${theme}>
        <pre>
            <code class="language-${lang}">
                ${hljs.highlight(lang, code, true).value}
            </code>
        </pre>
    </div>
`;

It will render to :

<div class="prism-twilight">
    <pre class=" language-cpp">
        <code class=" language-cpp">
            ...
        </code>
    </pre>
</div>

Helper

If it need css like themes and plugins, you should add the class in div. Others is same as origin.

Plugins

Now, it support:

line-highlight
line-numbers
show-invisibles
file-highlight

line-highlight

Obviously, this only works on code blocks (<pre><code>) and not for inline code.

You specify the lines to be highlighted through the data-line attribute on the <pre> element.

<div class="prism-default prism-line-highlight">
    <pre data-line="1,4-5">
        <code class="language-xxxx">
            ...
        </code>
    </pre>
</div>

line-numbers

<div class="prism-default prism-line-numbers">
    <pre class="line-numbers">
        <code class="language-xxxx">
            ...
        </code>
    </pre>
</div>

show-invisibles

<div class="prism-default prism-show-invisibles">
    <pre>
        <code class="language-xxxx">
            ...
        </code>
    </pre>
</div>

file-highlight

Use the data-src attribute on empty <pre> elements.

<div class="prism-default">
    <pre data-src="https://raw.githubusercontent.com/ChouUn/CodeWorld/master/History/zucc/zucc1647.cpp">
        <code class="language-cpp">
            ...
        </code>
    </pre>
</div>