rollup-plugin-syntax-highlight-svelte
v0.1.0
Published
A plugin for Vite and Rollup that creates Svelte components with highlighted code directly from files using Shiki
Downloads
4
Maintainers
valterkraemerReadme
rollup-plugin-syntax-highlight-svelte
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-highlight-svelteUsage
Add to plugins in rollup.config.js or vite.config.js.
import { syntaxHighlight } from "rollup-plugin-syntax-highlight-svelte";
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",
},
});