# rollup-plugin-syntax-highlight > A plugin for Vite and Rollup that highlights code using Shiki Latest version **0.1.4** (published 2022-10-05) · MIT license · 0 weekly downloads ## Install ```sh npm install rollup-plugin-syntax-highlight pnpm add rollup-plugin-syntax-highlight yarn add rollup-plugin-syntax-highlight bun add rollup-plugin-syntax-highlight ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.4 | | Published | 2022-10-05 | | First published | 2022-10-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=14.0.0 | | Dependencies | 1 | | Unpacked size | 20.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | Valter Kraemer | | Maintainers | valterkraemer | | Keywords | rollup-plugin, vite-plugin, shiki | ## Links - npm: https://www.npmjs.com/package/rollup-plugin-syntax-highlight - Repository: https://github.com/valterkraemer/rollup-plugin-syntax-highlight - Homepage: https://github.com/valterkraemer/rollup-plugin-syntax-highlight#readme - Issues: https://github.com/valterkraemer/rollup-plugin-syntax-highlight/issues - npm.io page: https://npm.io/package/rollup-plugin-syntax-highlight ## Dependencies (1) - [shiki](https://npm.io/package/shiki.md) ^0.11.1 ## Alternatives - [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads - [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads - [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads - [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads - [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads ## Recent versions - 0.1.4 (latest) — 2022-10-05 - 0.1.3 — 2022-10-04 - 0.1.2 — 2022-10-04 - 0.1.1 — 2022-10-04 - 0.1.0 — 2022-10-03 ## README # rollup-plugin-syntax-highlight Import code as syntax highlighted HTML using Rollup or Vite. Works like the [Special Assets](https://vitejs.dev/guide/features.html#static-assets) loaders in Vite. By appending `?syntax` to the import path, you will import the file's content as highlighted HTML code. Uses [Shiki](https://github.com/shikijs/shiki) for highlighting. ![Highlighted code rendered](/assets/rendered.png) ## Installation ``` npm i -D rollup-plugin-syntax-highlight ``` ## Usage Add to `plugins` in `rollup.config.js` or `vite.config.js`. ```js import { syntaxHighlight } from "rollup-plugin-syntax-highlight"; export default { plugins: [syntaxHighlight()], }; ``` You can now import HTML with the highlighted code by appending `?syntax` to the path. ```js import codeHtml from "./code-sample.ts?syntax"; export default `

Code example

${codeHtml}`; ``` ## Options Same options as [`shiki.getHighlighter`](https://shiki.matsu.io). ```js syntaxHighlight({ theme: "code-dark", }); ``` In addition, it supports the option `mapExtension`. It allows you to specify formatting for extensions Shiki doesn't recognise. ```js syntaxHighlight({ mapExtension: { svg: "xml", }, }); ``` --- _Source: https://npm.io/package/rollup-plugin-syntax-highlight · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._