{"id":19128,"library":"babel-plugin-prismjs","title":"babel-plugin-prismjs","description":"A Babel plugin that transforms ES6 imports of PrismJS to include only specified languages, plugins, and themes, enabling tree-shaking and reduced bundle sizes for syntax highlighting. Version 2.1.0 is current, with stable release cadence. Requires Babel and PrismJS v1.18+. Key differentiator: automatically configures Prism for bundlers like Webpack without manual setup. Caveats: only works with ES6 import syntax, not CommonJS (require).","status":"active","version":"2.1.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","prismjs","syntax-highlighting","babel-plugin"],"install":[{"cmd":"npm install babel-plugin-prismjs","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-prismjs","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-prismjs","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for PrismJS library","package":"prismjs","optional":false}],"imports":[{"note":"Plugin only transforms ES6 import statements; CommonJS require is not supported.","wrong":"const Prism = require('prismjs')","symbol":"default","correct":"import Prism from 'prismjs'"},{"note":"Named export is incorrect; use default import to get the configured Prism instance.","wrong":"import Prism from 'prismjs'","symbol":"Prism","correct":"import { Prism } from 'prismjs'"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\n    [\"prismjs\", {\n      \"languages\": [\"javascript\", \"css\", \"markup\"],\n      \"plugins\": [\"line-numbers\"],\n      \"theme\": \"twilight\",\n      \"css\": true\n    }]\n  ]\n}\n\n// App.js\nimport Prism from 'prismjs';\nPrism.highlightAll();","lang":"javascript","description":"Configures Babel to bundle only JavaScript, CSS, and markup languages with line-numbers plugin and twilight theme, then imports and applies Prism syntax highlighting."},"warnings":[{"fix":"Use import Prism from 'prismjs' instead of require()","message":"Only works with ES6 import syntax; require('prismjs') is not transformed.","severity":"breaking","affected_versions":"all"},{"fix":"Explicitly list all languages needed in the languages array","message":"If languages array is empty, no languages are imported, but Prism may still highlight if other code loads languages.","severity":"gotcha","affected_versions":"all"},{"fix":"Set \"css\": true in plugin options if using a theme","message":"The 'css' option must be true for theme to apply CSS imports.","severity":"deprecated","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure Babel is set up and the plugin is included; if running directly in Node, use .mjs extension or type: module in package.json","cause":"Using ES6 import without Babel configured to transform it, or running in a non-module environment.","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Replace const Prism = require('prismjs') with import Prism from 'prismjs'","cause":"Prism imported via CommonJS require() which bypasses the plugin transformation, leaving Prism unconfigured.","error":"Prism.highlightAll is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}