svelte-preprocess-highlight v0.1.0
svelte-preprocess-highlight
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:
highlight.js@11.5.1
- 896 kB (minified)
prettier@2.7.1
- 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>) => a + b;
</code></pre>
Limitations
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>
Installation
# Yarn
yarn add -D svelte-preprocess-highlight
# NPM
npm i -D svelte-preprocess-highlight
# pnpm
pnpm i -D svelte-preprocess-highlight
Set-up
Add highlight
to the list of Svelte preprocessors.
SvelteKit
// svelte.config.js
import { highlight } from "svelte-preprocess-highlight";
const config = {
preprocess: [highlight()],
};
export default config;
Vite
// 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()],
}),
],
});
Usage
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>
Options
ignorePath
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);
},
});
prettierOptions
The text is formatted by Prettier before being highlighted.
Pass custom Prettier options to prettierOptions
.
highlight({
prettierOptions: {
printWidth: 100,
svelteStrictMode: true,
},
});
Changelog
License
2 years ago