Vite Plugin Prismjs

0.0.11 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Error: The plugin 'vite-plugin-prismjs' doesn't have a 'resolveId' hook or is not a function. ↓

cause Using require() in an ESM project or incorrect import syntax.

fix

Use import prismjs from 'vite-plugin-prismjs'.

error [vite] Internal server error: prismjs is not defined ↓

cause Missing prismjs peer dependency.

fix

Run npm install prismjs.

error TypeError: prismjs is not a function ↓

cause Using default import as a named import (e.g., import { prismjs } from 'vite-plugin-prismjs').

fix

Use import prismjs from 'vite-plugin-prismjs'.

Warnings

gotcha The 'languages' option can be set to 'all' to include all languages, but this increases bundle size significantly. ↓

fix Specify only needed languages as an array.

deprecated Option 'css' defaults to true; if set to false, Prism.js CSS is not injected and must be loaded manually. ↓

fix Set css: false if you handle styles separately.

gotcha The plugin only processes .js/.ts files; it does not work with .vue templates or .svelte files directly. ↓

fix Ensure Prism.js is imported in a JavaScript/TypeScript module that is processed by Vite.

Install

npm install vite-plugin-prismjs

yarn add vite-plugin-prismjs

pnpm add vite-plugin-prismjs

Imports

default

wrong

const prismjs = require('vite-plugin-prismjs')

correct

import prismjs from 'vite-plugin-prismjs'

Plugin is ESM-only; require will fail.

defineConfig
```
import { defineConfig } from 'vite'
```
Used in vite.config.js; not exported from vite-plugin-prismjs.

vite-plugin-prismjs types

import type { PrismjsOptions } from 'vite-plugin-prismjs'

TypeScript types are shipped.

Quickstart

Configures Vite to use the prismjs plugin with three languages, two plugins, and the okaidia theme, enabling CSS injection.

// vite.config.js
import { defineConfig } from 'vite';
import prismjs from 'vite-plugin-prismjs';

export default defineConfig({
  plugins: [
    prismjs({
      languages: ['javascript', 'css', 'html'],
      plugins: ['line-numbers', 'show-language'],
      theme: 'okaidia',
      css: true,
    }),
  ],
});