Svelte preprocessor that syntax highlights code using highlight.js

This preprocessor uses highlight.js to syntax highlight and Prettier to format the text. This approach can greatly decrease the amount of client-side JavaScript because the transformations are done at compile time.

Bundle sizes:

[email protected]
- 896 kB (minified)

[email protected]
- 423.2 kB (minified)

Original

<pre data-language="typescript">
{`
  const sum = (a: number, b: number) => a + b;
`}
</pre>

Processed

<pre><code class="hljs"><span class="hljs-keyword">const</span> <span class="hljs-title function_">sum</span> = (<span class="hljs-params">a: <span class="hljs-built_in">number</span>, b: <span class="hljs-built_in">number</span></span>) =&gt; a + b;
</code></pre>

The preprocessor only works for static text; the result must be deterministic. For dynamic use cases, you must include highlight.js and Prettier on the client-side.

For example, the following will not work because the code must be re-highlighted when it changes.

<pre>
  {toggleFunctionCode
    ? "const sum = (a: number, b: number) => a + b;"
    : "const difference = (a: number, b: number) => a - b;"}
</pre>

# Yarn
yarn add -D svelte-preprocess-highlight

# NPM
npm i -D svelte-preprocess-highlight

# pnpm
pnpm i -D svelte-preprocess-highlight

Add highlight to the list of Svelte preprocessors.

// svelte.config.js
import { highlight } from "svelte-preprocess-highlight";

const config = {
  preprocess: [highlight()],
};

export default config;

// vite.config.js
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { highlight } from "svelte-preprocess-highlight";

export default defineConfig({
  plugins: [
    svelte({
      preprocess: [highlight()],
    }),
  ],
});

Use a pre element with a data-language attribute to denote what to highlight. The code to highlight should be placed inside of the pre element.

Single Line

<pre data-language="typescript">{"const sum = (a: number, b: number) => a + b;"}</pre>

Multi-line

<pre data-language="typescript">
{`
  const sum = (a: number, b: number) => a + b;

  const difference = (a: number, b: number) => a - b;
`}
</pre>

By default, the preprocessor will ignore files in node_modules and auto-generated files by SvelteKit (located in .svelte-kit).

Use the ignorePath option to customize files to ignore.

highlight({
  ignorePath: (filename) => {
    // Ignore file names that do not end with `.svelte`
    if (!/\.(svelte)$/.test(filename)) return true;

    // Ignore file names that do not contain "demo"
    return !/demo/.test(filename);
  },
});

The text is formatted by Prettier before being highlighted.

Pass custom Prettier options to prettierOptions.

highlight({
  prettierOptions: {
    printWidth: 100,
    svelteStrictMode: true,
  },
});

CHANGELOG.md

MIT