README
svelte-highlight
Syntax highlighting for Svelte using highlight.js.
Documentation
Installation
Yarn
yarn add -D svelte-highlight
NPM
npm i -D svelte-highlight
pnpm
pnpm i -D svelte-highlight highlight.js
SvelteKit Set-up
To use this library with SvelteKit, instruct vite to optimize highlight.js/lib/core
in your svelte.config.js
:
# svelte.config.js
export default {
kit: {
target: "#svelte",
+ vite: {
+ optimizeDeps: {
+ include: ["highlight.js/lib/core"],
+ },
+ },
},
};
Refer to examples/sveltekit for an example set-up.
Usage
There are two ways to apply highlight.js
styles:
- JavaScript styles injected into the DOM through
svelte:head
- CSS StyleSheets imported using a file loader
Injected Styles
This component exports highlight.js
themes in JavaScript. Import the theme from svelte-highlight/styles
and inject it using the svelte:head API.
<script>
import Highlight from "svelte-highlight";
import typescript from "svelte-highlight/src/languages/typescript";
import github from "svelte-highlight/src/styles/github";
const code = "const add = (a: number, b: number) => a + b;";
</script>
<svelte:head>
{@html github}
</svelte:head>
<Highlight language={typescript} {code} />
CSS StyleSheet
Depending on your set-up, importing a CSS StyleSheet in Svelte may require a CSS file loader. Refer to examples/webpack for a sample set-up.
<script>
import { Highlight } from "svelte-highlight";
import typescript from "svelte-highlight/src/languages/typescript";
import "svelte-highlight/src/styles/github.css";
const code = "const add = (a: number, b: number) => a + b;";
</script>
<Highlight language={typescript} {code} />
Svelte Syntax Highlighting
Use the HighlightSvelte
component for Svelte syntax highlighting.
<script>
import { HighlightSvelte } from "svelte-highlight";
import github from "svelte-highlight/src/styles/github";
$: code = "<button on:click={() => (count += 1)}>Increment {count}</button>";
</script>
<svelte:head>
{@html github}
</svelte:head>
<HighlightSvelte {code} />
Auto-highlighting
The HighlightAuto
component invokes the highlightAuto
API from highlight.js
.
<script>
import { HighlightAuto } from "svelte-highlight";
import github from "svelte-highlight/src/styles/github";
$: code = `<style>
.body { margin: 0; padding: 0; }
<\/style>`;
</script>
<svelte:head>
{@html github}
</svelte:head>
<HighlightAuto {code} />
Language Targeting
All Highlight
components apply a data-language
attribute on the codeblock containing the language name.
This is also compatible with custom languages.
See the Languages page for a list of supported languages.
pre[data-language="css"] {
/* custom style rules */
}
Language Tags
All Highlight
components allow for a tag to be added at the top-right of the codeblock displaying the language name.
The language tag can be given a custom background
, color
, and border-radius
through the custom properties shown.
This is also compatible with custom languages.
It is recommended that you set values for --hljs-background
and --hljs-foreground
to ensure the langtags remain readable on any theme.
See the Languages page for a list of supported languages.
Defaults:
--hljs-background: inherit
--hljs-foreground: inherit
--hljs-border-radius: 0
<script>
import { HighlightAuto } from "svelte-highlight";
$: code = `.body { padding: 0; margin: 0; }`;
</script>
<HighlightAuto {code} langtag />
pre[data-language="css"] {
--hljs-background: linear-gradient(135deg, #2996cf, 80%, white);
--hljs-foreground: #fff;
--hljs-radius: 8px;
}
Custom Language
For custom language highlighting, pass a name
and register
function to the language prop.
Refer to the highlight.js language definition guide for guidance.
<script>
import { Highlight } from "svelte-highlight";
import hljs from "highlight.js";
const language = {
name: "custom-language",
register: (hljs) => {
return {
/** custom language rules */
};
},
};
</script>
<Highlight {language} code="..." />
API
Props
Name | Value |
---|---|
code | string |
language (only for Highlight ) |
object { name: string ; register: hljs => object } |
...$restProps |
(forwarded to the pre element) |
Dispatched Events
- on:highlight: fired after code syntax is highlighted
<Highlight
language={typescript}
{code}
on:highlight={(e) => {
console.log(e.detail.highlighted); // "<span>...</span>"
}}
/>
TypeScript
Svelte version 3.31 or greater is required to use this component with TypeScript.
TypeScript definitions are located in the src folder.
Supported Languages
Supported Styles
Examples
- examples/rollup
- examples/rollup-typescript
- examples/snowpack
- examples/sveltekit
- examples/vite
- examples/webpack