https://github.com/maadhattah/babel-plugin-prismjs

A babel plugin to use PrismJS with standard bundlers.
https://github.com/maadhattah/babel-plugin-prismjs

babel babel-plugin browserify prismjs rollup syntax-highlighting webpack

Last synced: 9 days ago
JSON representation

A babel plugin to use PrismJS with standard bundlers.

• Host: GitHub
• URL: https://github.com/maadhattah/babel-plugin-prismjs
• Owner: mAAdhaTTah
• Created: 2018-05-24T12:11:38.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T03:58:04.000Z (almost 2 years ago)
• Last Synced: 2024-10-14T18:31:39.775Z (22 days ago)
• Topics: babel, babel-plugin, browserify, prismjs, rollup, syntax-highlighting, webpack
• Language: JavaScript
• Size: 351 KB
• Stars: 157
• Watchers: 3
• Forks: 9
• Open Issues: 18
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# babel-plugin-prismjs [![Build Status](https://travis-ci.org/mAAdhaTTah/babel-plugin-prismjs.svg?branch=master)](https://travis-ci.org/mAAdhaTTah/babel-plugin-prismjs)

A babel plugin to use PrismJS with standard bundlers.

## How to Use

This plugin allows you to treat PrismJS as a standard module and configure what languages, plugins, & themes you want to bundle with Prism.

In your code, import `prismjs`:

```js

import Prism from 'prismjs';

// if you are intending to use Prism functions manually, you will need to set:

Prism.manual = true;

Prism.highlightAll();

```

The exported `Prism` object will be the fully-configured Prism instance.

### Limitations

- You must be using ES6 imports to load PrismJS.

## Configuring the plugin

In your .babelrc, register the plugin and configure its dependencies:

```json

{

  "plugins": [

    ["prismjs", {

        "languages": ["javascript", "css", "markup"],

        "plugins": ["line-numbers"],

        "theme": "twilight",

        "css": true

    }]

  ]

}

```

Each key are used as follows:

* `languages`: Array of languages to include in the bundle or `"all"` to include all languages. Those languages can be found [here](http://prismjs.com/#languages-list).

* `plugins`: Array of plugins to include in the bundle. Those plugins can be found [here](http://prismjs.com/#plugins).

* `theme`: Name of theme to include in the bundle. Themes can be found [here](http://prismjs.com/).

* `css`: Boolean indicating whether to include `.css` files in the result. Defaults to `false`. If `true`, `import`s will be added for `.css` files. Must be `true` in order for `theme` to work.