rollup-plugin-syntax-highlight
v0.1.4
Published
A plugin for Vite and Rollup that highlights code using Shiki
Downloads
17
Maintainers
valterkraemerReadme
rollup-plugin-syntax-highlight
Import code as syntax highlighted HTML using Rollup or Vite.
Works like the Special Assets loaders in Vite. By appending ?syntax to the import path, you will import the file's content as highlighted HTML code.
Uses Shiki for highlighting.
Installation
npm i -D rollup-plugin-syntax-highlightUsage
Add to plugins in rollup.config.js or vite.config.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.
import codeHtml from "./code-sample.ts?syntax";
export default `<html><body><h2>Code example</h2>${codeHtml}</body></html>`;Options
Same options as shiki.getHighlighter.
syntaxHighlight({
theme: "code-dark",
});In addition, it supports the option mapExtension. It allows you to specify formatting for extensions Shiki doesn't recognise.
syntaxHighlight({
mapExtension: {
svg: "xml",
},
});