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=> <pre> <code class="language-"> </code> </pre> </div>`;
It will render to :
...
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.
...
line-numbers
...
show-invisibles
...
file-highlight
Use the data-src
attribute on empty <pre>
elements.
...
Build
$ npm run build
Publish
$ npm run rls