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';
OR
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>
Build
$ npm run build
Publish
$ npm run rls