esbuild-plugin-prismjs

1.0.8 verified Fri May 01 auth: no javascript

An esbuild plugin for PrismJS that bundles specified languages, plugins, and themes at build time. Current stable version is 1.0.8, updated infrequently. It mirrors the options of babel-plugin-prismjs, allowing developers familiar with that plugin to switch seamlessly. Offers an inline option to embed CSS directly. Designed for projects using esbuild and needing syntax highlighting via PrismJS without runtime loading of languages.

Common errors

error TypeError: prismjsPlugin is not a function ↓

cause Incorrect import using CommonJS require()

fix

Change to ES import: import { prismjsPlugin } from 'esbuild-plugin-prismjs'

error Error: Cannot find module 'prismjs' ↓

cause PrismJS is not installed as a dependency

fix

Run: npm install prismjs

error Error: Unknown language 'xyz' ↓

cause An unsupported or misspelled language name was provided in the options

fix

Check the language list: https://prismjs.com/#languages-list

Warnings

breaking Only supports ESM imports, CommonJS require will throw an error. ↓

fix Use ES import syntax (import { prismjsPlugin } from 'esbuild-plugin-prismjs').

gotcha The 'inline' option defaults to true, embedding CSS. If you want separate CSS files, set it to false. ↓

fix Set inline: false in the plugin options to get separate CSS output.

gotcha The 'css' option must be true if you want the theme CSS to be included. It defaults to true but can be disabled. ↓

fix Ensure css: true (or omit) to include theme CSS.

Install

npm install esbuild-plugin-prismjs

yarn add esbuild-plugin-prismjs

pnpm add esbuild-plugin-prismjs

Imports

prismjsPlugin

wrong

const prismjsPlugin = require('esbuild-plugin-prismjs')

correct

import { prismjsPlugin } from 'esbuild-plugin-prismjs'

ESM-only; does not support CommonJS require.

PrismjsPluginOptions

wrong

import { PrismjsPluginOptions } from 'esbuild-plugin-prismjs'

correct

import type { PrismjsPluginOptions } from 'esbuild-plugin-prismjs'

This is a TypeScript type, not a runtime value.

default
```
import prismjsPlugin from 'esbuild-plugin-prismjs'
```
Default export is also available (same as named export).

Quickstart

Configures esbuild with prismjsPlugin to bundle JavaScript and CSS highlighting, with line-numbers plugin and okaidia theme.

import { prismjsPlugin } from 'esbuild-plugin-prismjs';
import { build } from 'esbuild';

build({
  entryPoints: ['./src/index.js'],
  outdir: 'dist',
  bundle: true,
  plugins: [
    prismjsPlugin({
      inline: true,
      languages: ['javascript', 'css'],
      plugins: ['line-numbers'],
      theme: 'okaidia',
      css: true,
    }),
  ],
}).catch(() => process.exit(1));