https://github.com/ytkj/prism-loader

Prism.js loader for Webpack
https://github.com/ytkj/prism-loader

prismjs webpack-loader webpack2 webpack3 webpack4

Last synced: 3 months ago
JSON representation

Prism.js loader for Webpack

• Host: GitHub
• URL: https://github.com/ytkj/prism-loader
• Owner: ytkj
• Created: 2017-04-24T12:16:36.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:15:22.000Z (almost 2 years ago)
• Last Synced: 2024-04-15T02:05:36.364Z (8 months ago)
• Topics: prismjs, webpack-loader, webpack2, webpack3, webpack4
• Language: JavaScript
• Size: 659 KB
• Stars: 4
• Watchers: 2
• Forks: 3
• Open Issues: 27
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# prism-loader

Code brush for [Prism.js](http://prismjs.com/) in build process, with Webpack >= 2.

## Example

### Input

```html


    

let a: number = 1;

    



```


### Output

```html


    

let a: number = 1;

    



```


## Features

### Supported Languages

All the languages listed in [Prism.js Homepage](http://prismjs.com/#languages-list) are available.

Language should be supecified in loader options.

### Supported Plugins

Two plugins are available.

- [Line Highlight](http://prismjs.com/plugins/line-highlight/)

- [Line Numbers](http://prismjs.com/plugins/line-numbers/)

## Install

```bash

npm install -D prism-loader prismjs

```

## Usage

1. Configuration for Webpack >= 2

```javascript

module.exports = function(env) {

    /* ... */

    module: {

        rules: [

            {

                test: /\.html$/,

                use: [

                    /* ... */

                    {

                        loader: 'prism-loader',

                        options: {/* */}

                    }

                    /* ... */

                ]

            }

        ]

    },

    /* ... */

}

```

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

```HTML

TypeScript Code Example


    

let a: number = 1;

    



```


## API

### `Options.languages`

- Type: `Array`

- Default: `[ 'markup', 'typescript', 'javascript', 'css', 'php', 'java']`

Specify language list you want to highlight.

Available strings are listed in [Prism.js Homepage](http://prismjs.com/#languages-list).

### `Options.fontSize`

- Type: `number`

- Default: `16`

Specify CSS `font-size` property.

This value is set to inline style of `
` 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](https://github.com/PrismJS/prism/blob/v1.6.0/plugins/line-highlight/prism-line-highlight.js#L16).

### `Options.cheerioOptions`

- Type: `Object`

- Default: `{decodeEntities: false}`

Specify options for `cheerio`. For full list of options, [see here](https://github.com/cheeriojs/cheerio#loading).

## 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

```HTML

```

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

```javascript

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

1. Clone repository

    1. `git clone https://github.com/ytkj/prism-loader.git`

    2. `cd prism-loader`

    3. `npm install`

2. Run unit-test

    1. `npm test`

3. Run e2e-test

    1. `cd test/webpack`

    2. `npm install`

    3. `npm test`

    4. Open http://localhost:3030/test01.html