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.
npm i -D rollup-plugin-syntax-highlight-svelte
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>`;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",
},
});