Rollup-plugin-syntax-highlight-svelte NPM

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.

Highlighted code rendered

Installation

npm i -D rollup-plugin-syntax-highlight-svelte

Usage

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",
  },
});

rollup-plugin vite-plugin svelte shiki

magic-string shiki

@everything-registry/sub-chunk-2681

0.1.0

2 years ago