{"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,"search_vec":"'2.1.0':34 'automat':48 'babel':2,6,42,74 'babel-plugin':73 'babel-plugin-prismj':1 'bundl':28 'bundler':52 'cadenc':40 'caveat':58 'commonj':66 'configur':49 'current':36 'differenti':47 'enabl':22 'es6':10,62 'highlight':32,72 'import':11,63 'includ':15 'javascript':68 'key':46 'languag':18 'like':53 'manual':56 'plugin':3,7,19,75 'prism':50 'prismj':4,13,44,69 'reduc':27 'releas':39 'requir':41,67 'setup':57 'shake':25 'size':29 'specifi':17 'stabl':38 'syntax':31,64,71 'syntax-highlight':70 'theme':21 'transform':9 'tree':24 'tree-shak':23 'v1.18':45 'version':33 'webpack':54 'without':55 'work':60","created_at":"2026-04-25T11:16:10.954490+00:00","updated_at":"2026-04-25T11:16:10.954490+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/babel-plugin-prismjs","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}