Registry / web-framework / vite-plugin-prismjs-plus

vite-plugin-prismjs-plus

library1.1.1jsnpmunverified

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.

web-framework

npm install vite-plugin-prismjs-plus

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-PRISMJ

vite-plugin-prismjs-plus

web-frameworkjavascriptv1.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import Prism from 'virtual:prismjs'

✗ import Prism from 'vite-plugin-prismjs-plus'

The plugin exposes a virtual module 'virtual:prismjs' that must be imported directly. Do not import from the package itself.

prismjsPlugin

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

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

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

client types

✓ /// <reference types="vite-plugin-prismjs-plus/client" />

✗ import '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.

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" />

Debug

Known issues

gotchaImport 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.

affects: >=1.0.0

gotchaThe plugin is ESM-only; using require() will cause an error.

fix

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

affects: >=1.0.0

gotchaWhen 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.

affects: >=1.0.0

gotchaThird-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'.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

Errors

Common errors & fixes

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

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: prismjsPlugin is not a function

Using CommonJS require() instead of ESM import.

fix

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

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

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'.

PrismJS not defined or highlighting not applied

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).

Upgrade

Version history

1.1.1latest on npm

Audit

Dependencies

prismjsrequiredRuntime peer dependency for the PrismJS library

viterequiredPeer dependency for Vite plugin API

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/hex-ci/vite-plugin-prismjs-plus ↗

packagehttps://www.npmjs.com/package/vite-plugin-prismjs-plus ↗