{"id":22787,"library":"vite-plugin-prismjs","title":"Vite Plugin Prismjs","description":"A Vite plugin that integrates Prism.js syntax highlighting by processing JavaScript imports to include only specified languages, plugins, and themes. Version 0.0.11 (latest as of 2023) targets Node >=12 and ships TypeScript definitions. It works at transform time to reduce bundle size. Compared to manual Prism.js setup, it automates language registration and avoids unnecessary imports. The plugin mirrors the configuration of babel-plugin-prismjs, making migration straightforward for projects switching from Babel to Vite.","status":"active","version":"0.0.11","language":"javascript","source_language":"en","source_url":"https://github.com/code-farmer-i/vite-plugin-prismjs","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-prismjs","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-prismjs","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-prismjs","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Prism.js library","package":"prismjs","optional":false},{"reason":"Peer dependency as a Vite plugin","package":"vite","optional":false}],"imports":[{"note":"Plugin is ESM-only; require will fail.","wrong":"const prismjs = require('vite-plugin-prismjs')","symbol":"default","correct":"import prismjs from 'vite-plugin-prismjs'"},{"note":"Used in vite.config.js; not exported from vite-plugin-prismjs.","wrong":"","symbol":"defineConfig","correct":"import { defineConfig } from 'vite'"},{"note":"TypeScript types are shipped.","wrong":"","symbol":"vite-plugin-prismjs types","correct":"import type { PrismjsOptions } from 'vite-plugin-prismjs'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport prismjs from 'vite-plugin-prismjs';\n\nexport default defineConfig({\n  plugins: [\n    prismjs({\n      languages: ['javascript', 'css', 'html'],\n      plugins: ['line-numbers', 'show-language'],\n      theme: 'okaidia',\n      css: true,\n    }),\n  ],\n});","lang":"typescript","description":"Configures Vite to use the prismjs plugin with three languages, two plugins, and the okaidia theme, enabling CSS injection."},"warnings":[{"fix":"Specify only needed languages as an array.","message":"The 'languages' option can be set to 'all' to include all languages, but this increases bundle size significantly.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Set css: false if you handle styles separately.","message":"Option 'css' defaults to true; if set to false, Prism.js CSS is not injected and must be loaded manually.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Ensure Prism.js is imported in a JavaScript/TypeScript module that is processed by Vite.","message":"The plugin only processes .js/.ts files; it does not work with .vue templates or .svelte files directly.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use import prismjs from 'vite-plugin-prismjs'.","cause":"Using require() in an ESM project or incorrect import syntax.","error":"Error: The plugin 'vite-plugin-prismjs' doesn't have a 'resolveId' hook or is not a function."},{"fix":"Run npm install prismjs.","cause":"Missing prismjs peer dependency.","error":"[vite] Internal server error: prismjs is not defined"},{"fix":"Use import prismjs from 'vite-plugin-prismjs'.","cause":"Using default import as a named import (e.g., import { prismjs } from 'vite-plugin-prismjs').","error":"TypeError: prismjs is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}