{"id":22786,"library":"vite-plugin-prismjs-plus","title":"vite-plugin-prismjs-plus","description":"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.","status":"active","version":"1.1.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/hex-ci/vite-plugin-prismjs-plus","tags":["javascript","vite","vite-plugin","prismjs","prism","syntax-highlighting","code-highlight","highlight","virtual-module","typescript"],"install":[{"cmd":"npm install vite-plugin-prismjs-plus","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-prismjs-plus","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-prismjs-plus","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for the PrismJS library","package":"prismjs","optional":false},{"reason":"Peer dependency for Vite plugin API","package":"vite","optional":false}],"imports":[{"note":"The plugin exposes a virtual module 'virtual:prismjs' that must be imported directly. Do not import from the package itself.","wrong":"import Prism from 'vite-plugin-prismjs-plus'","symbol":"default","correct":"import Prism from 'virtual:prismjs'"},{"note":"The plugin is ESM-only; CommonJS require() will not work. Use import syntax.","wrong":"const prismjsPlugin = require('vite-plugin-prismjs-plus')","symbol":"prismjsPlugin","correct":"import prismjsPlugin from 'vite-plugin-prismjs-plus'"},{"note":"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.","wrong":"import 'vite-plugin-prismjs-plus/client'","symbol":"client types","correct":"/// <reference types=\"vite-plugin-prismjs-plus/client\" />"}],"quickstart":{"code":"// vite.config.js\nimport prismjsPlugin from 'vite-plugin-prismjs-plus';\n\nexport default {\n  plugins: [\n    prismjsPlugin({\n      manual: true,\n      languages: ['javascript', 'css', 'html'],\n      plugins: ['line-numbers'],\n      theme: 'okaidia',\n      css: true\n    })\n  ]\n};\n\n// main.js\nimport Prism from 'virtual:prismjs';\nPrism.highlightAll();\n\n// vite-env.d.ts\n/// <reference types=\"vite-plugin-prismjs-plus/client\" />","lang":"javascript","description":"Configures the plugin to include PrismJS with specified languages, plugins, and theme, then imports the virtual module and applies highlighting to all code blocks."},"warnings":[{"fix":"Use import Prism from 'virtual:prismjs' in your application code.","message":"Import path 'virtual:prismjs' must be used; importing from 'vite-plugin-prismjs-plus' directly does not provide the Prism instance.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use ES module import syntax: import prismjsPlugin from 'vite-plugin-prismjs-plus'.","message":"The plugin is ESM-only; using require() will cause an error.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set css: true in plugin options to include theme CSS, or manually import CSS files.","message":"When css option is false, theme CSS will not be imported; this can result in missing styles.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure the theme file exists at the expected path, e.g., 'my-pkg/themes/prism-ocean.css' for 'my-pkg/ocean'.","message":"Third-party theme paths use a custom resolution: 'package/theme-name' maps to 'package/themes/prism-theme-name.css'.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure no other plugin uses the 'virtual:prismjs' module ID. This plugin does not allow customization of the ID.","message":"The virtual module 'virtual:prismjs' may conflict with other plugins defining the same virtual module ID.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add /// <reference types=\"vite-plugin-prismjs-plus/client\" /> to a declaration file (e.g., vite-env.d.ts).","cause":"Missing client types reference or the plugin is not properly installed/configured.","error":"Cannot find module 'virtual:prismjs' or its corresponding type declarations."},{"fix":"Change require('vite-plugin-prismjs-plus') to import prismjsPlugin from 'vite-plugin-prismjs-plus'.","cause":"Using CommonJS require() instead of ESM import.","error":"Error: prismjsPlugin is not a function"},{"fix":"Verify the plugin is included in vite.config.js. The virtual module should be imported as import Prism from 'virtual:prismjs'.","cause":"The Prism default export is undefined, likely because the virtual module is not resolved correctly.","error":"TypeError: Cannot read properties of undefined (reading 'highlightAll')"},{"fix":"Call Prism.highlightAll() after DOM content is loaded (e.g., in a DOMContentLoaded event listener).","cause":"Highlighting called before DOM is ready or Prism not configured correctly.","error":"PrismJS not defined or highlighting not applied"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}