babel-plugin-prismjs

2.1.0 verified Sat Apr 25 auth: no javascript

A Babel plugin that transforms ES6 imports of PrismJS to include only specified languages, plugins, and themes, enabling tree-shaking and reduced bundle sizes for syntax highlighting. Version 2.1.0 is current, with stable release cadence. Requires Babel and PrismJS v1.18+. Key differentiator: automatically configures Prism for bundlers like Webpack without manual setup. Caveats: only works with ES6 import syntax, not CommonJS (require).

Common errors

error SyntaxError: Cannot use import statement outside a module ↓

cause Using ES6 import without Babel configured to transform it, or running in a non-module environment.

fix

Ensure Babel is set up and the plugin is included; if running directly in Node, use .mjs extension or type: module in package.json

error Prism.highlightAll is not a function ↓

cause Prism imported via CommonJS require() which bypasses the plugin transformation, leaving Prism unconfigured.

fix

Replace const Prism = require('prismjs') with import Prism from 'prismjs'

Warnings

breaking Only works with ES6 import syntax; require('prismjs') is not transformed. ↓

fix Use import Prism from 'prismjs' instead of require()

gotcha If languages array is empty, no languages are imported, but Prism may still highlight if other code loads languages. ↓

fix Explicitly list all languages needed in the languages array

deprecated The 'css' option must be true for theme to apply CSS imports. ↓

fix Set "css": true in plugin options if using a theme

Install

npm install babel-plugin-prismjs

yarn add babel-plugin-prismjs

pnpm add babel-plugin-prismjs

Imports

default
wrong
```
const Prism = require('prismjs')
```
correct
```
import Prism from 'prismjs'
```
Plugin only transforms ES6 import statements; CommonJS require is not supported.
Prism
wrong
```
import Prism from 'prismjs'
```
correct
```
import { Prism } from 'prismjs'
```
Named export is incorrect; use default import to get the configured Prism instance.

Quickstart

Configures Babel to bundle only JavaScript, CSS, and markup languages with line-numbers plugin and twilight theme, then imports and applies Prism syntax highlighting.

// .babelrc
{
  "plugins": [
    ["prismjs", {
      "languages": ["javascript", "css", "markup"],
      "plugins": ["line-numbers"],
      "theme": "twilight",
      "css": true
    }]
  ]
}

// App.js
import Prism from 'prismjs';
Prism.highlightAll();