svelte-shiki

svelte-shiki is a preprocessor for Svelte/Sapper, providing compile-time syntax highlighting of code elements through the use of Shiki which does all highlighting as inline CSS styles - so no production dependencies! 🎉

Installation

# npm
npm i -D svelte-shiki

# yarn
yarn add -D svelte-shiki

Usage

Add it as a preprocessor to your rollup or webpack config, the svelte-shiki preprocessor is a named import from the svelte-shiki module:

import { svelteShiki } from "svelte-shiki";

const defaultOptions = {
    theme: "nord",
    langs: undefined
}

export default {
  ...configStuff,
  plugins: [
    svelte({
      preprocess: [
          // other preprocessors ? Mdsvex for intance?
          svelteShiki()
      ]
    }),
  ],
}}

⚠️ NOTE: Remember to declare it for both server and client plugins if applicable!

For options, please refer to the shiki documentation

Elements that will be styled

It works with the following syntaxes:

• Any HTML-styled code block: <code lang="js">...</code>
• Markdown blocks:

  const foo = "bar";
  

• Inline markdown blocks with the following language identifier: lang={js} const foo = "bar";.

Custom themes

Want to use your own theme from VS Code?

import { svelteShiki , loadTheme } from "svelte-shiki";

const theme = loadTheme("./yourTheme.json")

export default {
  ...configStuff,
  plugins: [
    svelte({
      preprocess: [
          // other preprocessors?
          svelteShiki({ theme })
      ]
    }),
  ],
}}

License

MIT