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! 🎉

# npm
npm i -D svelte-shiki

# yarn
yarn add -D svelte-shiki

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

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";.

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 })
      ]
    }),
  ],
}}

MIT