vite-plugin-prismjs-plus

1.1.1 verified Mon Apr 27 auth: no javascript

A Vite plugin that provides a virtual module for PrismJS, enabling on-demand loading of languages, plugins, and themes with tree-shaking. Current stable version is 1.1.1. Supports Vite 5, 6, 7, and 8. Ships TypeScript declarations. Key differentiator: integrates seamlessly with Vite's virtual module system, allowing bundlers to tree-shake unused parts of PrismJS, reducing bundle size. Compared to alternatives like manual PrismJS setup or other plugins, this offers a declarative config-driven approach with built-in CSS handling and first-class TypeScript support.

Common errors

error Cannot find module 'virtual:prismjs' or its corresponding type declarations. ↓

cause Missing client types reference or the plugin is not properly installed/configured.

fix

Add /// <reference types="vite-plugin-prismjs-plus/client" /> to a declaration file (e.g., vite-env.d.ts).

error Error: prismjsPlugin is not a function ↓

cause Using CommonJS require() instead of ESM import.

fix

Change require('vite-plugin-prismjs-plus') to import prismjsPlugin from 'vite-plugin-prismjs-plus'.

error TypeError: Cannot read properties of undefined (reading 'highlightAll') ↓

cause The Prism default export is undefined, likely because the virtual module is not resolved correctly.

fix

Verify the plugin is included in vite.config.js. The virtual module should be imported as import Prism from 'virtual:prismjs'.

error PrismJS not defined or highlighting not applied ↓

cause Highlighting called before DOM is ready or Prism not configured correctly.

fix

Call Prism.highlightAll() after DOM content is loaded (e.g., in a DOMContentLoaded event listener).

Warnings

gotcha Import path 'virtual:prismjs' must be used; importing from 'vite-plugin-prismjs-plus' directly does not provide the Prism instance. ↓

fix Use import Prism from 'virtual:prismjs' in your application code.

gotcha The plugin is ESM-only; using require() will cause an error. ↓

fix Use ES module import syntax: import prismjsPlugin from 'vite-plugin-prismjs-plus'.

gotcha When css option is false, theme CSS will not be imported; this can result in missing styles. ↓

fix Set css: true in plugin options to include theme CSS, or manually import CSS files.

gotcha Third-party theme paths use a custom resolution: 'package/theme-name' maps to 'package/themes/prism-theme-name.css'. ↓

fix Ensure the theme file exists at the expected path, e.g., 'my-pkg/themes/prism-ocean.css' for 'my-pkg/ocean'.

gotcha The virtual module 'virtual:prismjs' may conflict with other plugins defining the same virtual module ID. ↓

fix Ensure no other plugin uses the 'virtual:prismjs' module ID. This plugin does not allow customization of the ID.

Install

npm install vite-plugin-prismjs-plus

yarn add vite-plugin-prismjs-plus

pnpm add vite-plugin-prismjs-plus

Imports

default
wrong
```
import Prism from 'vite-plugin-prismjs-plus'
```
correct
```
import Prism from 'virtual:prismjs'
```
The plugin exposes a virtual module 'virtual:prismjs' that must be imported directly. Do not import from the package itself.

prismjsPlugin

wrong

const prismjsPlugin = require('vite-plugin-prismjs-plus')

correct

import prismjsPlugin from 'vite-plugin-prismjs-plus'

The plugin is ESM-only; CommonJS require() will not work. Use import syntax.

client types
wrong
```
import 'vite-plugin-prismjs-plus/client'
```
correct
```
/// <reference types="vite-plugin-prismjs-plus/client" />
```
The client types are provided via a triple-slash directive in a declaration file, not via import. Include this in your vite-env.d.ts or global.d.ts.

Quickstart

Configures the plugin to include PrismJS with specified languages, plugins, and theme, then imports the virtual module and applies highlighting to all code blocks.

// vite.config.js
import prismjsPlugin from 'vite-plugin-prismjs-plus';

export default {
  plugins: [
    prismjsPlugin({
      manual: true,
      languages: ['javascript', 'css', 'html'],
      plugins: ['line-numbers'],
      theme: 'okaidia',
      css: true
    })
  ]
};

// main.js
import Prism from 'virtual:prismjs';
Prism.highlightAll();

// vite-env.d.ts
/// <reference types="vite-plugin-prismjs-plus/client" />