Prism-loader NPM

prism-loader

Code brush for Prism.js in build process, with Webpack >= 2.

Example

Input

<pre>
    <code class="language-typescript">
let a: number = 1;
    </code>
</pre>

Output

<pre class="language-typescript">
    <code class="language-typescript">
<span class="token keyword">let</span> a<span class="token punctuation">:</span> <span class="token keyword">number</span> <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    </code>
</pre>

Features

Supported Languages

All the languages listed in Prism.js Homepage are available. Language should be supecified in loader options.

Supported Plugins

Two plugins are available.

Install

npm install -D prism-loader

Usage

Configuration for Webpack >= 2

module.exports = function(env) {
    /* ... */
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    /* ... */
                    {
                        loader: 'prism-loader',
                        options: {/* */}
                    }
                    /* ... */
                ]
            }
        ]
    },
    /* ... */
}

Markup HTML Template file in the same manner as usual Prism.js usage.

<h1>TypeScript Code Example</h1>
<pre class="line-numbers" data-line="1">
    <code class="language-typescript">
let a: number = 1;
    </code>
</pre>

API

`Options.languages`

Type: Array<string>
Default: [ 'markup', 'typescript', 'javascript', 'css', 'php', 'java']

Specify language list you want to highlight. Available strings are listed in Prism.js Homepage.

`Options.fontSize`

Type: number
Default: 16

Specify CSS font-size property. This value is set to inline style of <pre> element, and 1.5 times value is used to calculate position-top of line highlight block, if line-highlight plugin is enabled.

This value should be even number. see here.

`Options.cheerioOptions`

Type: Object
Default: {decodeEntities: false}

Specify options for cheerio. For full list of options, see here.

Note

This loader only prvide code-highlighting, but CSS style. You must load Prism.js CSS file in some way.

Example

a. Using link tag

<link rel="stylesheet" href="node_modules/prismjs/themes/prism-coy.css">
<link rel="stylesheet" href="node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css">
<link rel="stylesheet" href="node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css">

b. Usin CSS module (with css-loader and style-loader)

import 'prismjs/themes/prism-coy.css';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import 'prismjs/plugins/line-highlight/prism-line-highlight.css';

Setup for Developers

Clone repository
1. git clone https://github.com/ytkj/prism-loader.git
2. cd prism-loader
3. npm install
Run unit-test
1. npm test
Run e2e-test
1. cd test/webpack
2. npm install
3. npm test
4. Open http://localhost:3030/test01.html