svelte-highlight icon indicating copy to clipboard operation
svelte-highlight copied to clipboard

Published 20 hours ago • verified publisher icon metonym
→

Metadata

Syntax Highlighting for Svelte using highlight.js

svelte-highlight

NPM npm

Syntax highlighting for Svelte using highlight.js.

Try it in StackBlitz.

Documentation

Installation

# Yarn
yarn add -D svelte-highlight

# npm
npm i -D svelte-highlight

# pnpm
pnpm i -D svelte-highlight highlight.js

Note that pnpm users must also install highlight.js.

SvelteKit Set-up

To use this library with SvelteKit or Vite, instruct Vite to optimize highlight.js and highlight.js/lib/core:

+ optimizeDeps: {
+   include: ["highlight.js", "highlight.js/lib/core"],
+ },

vite.config.js

import { sveltekit } from "@sveltejs/kit/vite";

/** @type {import('vite').UserConfig} */
export default {
  plugins: [sveltekit()],
  optimizeDeps: {
    include: ["highlight.js", "highlight.js/lib/core"],
  },
};

Refer to examples/sveltekit or examples/vite.

Usage

There are two ways to apply highlight.js styles.

  1. Injected styles through svelte:head
  2. CSS StyleSheets

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/languages/typescript";
  import github from "svelte-highlight/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/languages/typescript";
  import "svelte-highlight/styles/github.css";

  const code = "const add = (a: number, b: number) => a + b;";
</script>

<Highlight language={typescript} {code} />

Linking from a CDN

CSS StyleSheets can also be externally linked from a Content Delivery Network (CDN) like unpkg.com.

This is best suited for prototyping and not recommended for production use.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/svelte-highlight/styles/github.css"
    />
  </head>
</html>

svelte:head

<svelte:head>
  <link
    rel="stylesheet"
    href="https://unpkg.com/svelte-highlight/styles/github.css"
  />
</svelte:head>

Svelte Syntax Highlighting

Use the HighlightSvelte component for Svelte syntax highlighting.

<script>
  import { HighlightSvelte } from "svelte-highlight";
  import github from "svelte-highlight/styles/github";

  $: code = `<button on:click={() => { console.log(0); }}>Increment {count}</button>`;
</script>

<svelte:head>
  {@html github}
</svelte:head>

<HighlightSvelte {code} />

Auto-highlighting

The HighlightAuto component uses highlightAuto API.

Note: auto-highlighting will result in a larger bundle size in order to infer a language.

Prefer to specify a language if possible.

<script>
  import { HighlightAuto } from "svelte-highlight";
  import github from "svelte-highlight/styles/github";

  $: code = `body {\n  padding: 0;\n  color: red;\n}`;
</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.

See the Languages page for a list of supported languages.

[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 CSS custom properties.

It is recommended that you set values for --hljs-background and --hljs-foreground to ensure the langtags are readable with your 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 />

[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 */
        contains: [],
      };
    },
  };
</script>

<Highlight {language} code="..." />

Code-splitting

You can use the dynamic import syntax to code-split code.

In the example below, the HighlightAuto component and injected styles are dynamically loaded.

<script>
  import { onMount } from "svelte";

  let component;
  let styles;

  onMount(async () => {
    component = (await import("svelte-highlight")).HighlightAuto;
    styles = (await import("svelte-highlight/styles/github")).default;
  });
</script>

<svelte:head>
  {#if styles}
    {@html styles}
  {/if}
</svelte:head>

<svelte:component
  this={component}
  langtag
  code={`body {\n  padding: 0;\n  color: red;\n}`}
/>

API

Props

Name Type Default value
code any undefined
language (only required for Highlight.svelte) { name: string; register: hljs => object } { name: undefined, register: undefined }
langtag boolean false
  • $$restProps are 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 auto-generated by SvelteKit.

Supported Languages

Supported Styles

Examples

  • examples/rollup
  • examples/sveltekit
  • examples/vite
  • examples/webpack

Changelog

License

MIT

← Metadata

236
Stars
12
Forks
Watchers

Owner

verified publisher icon metonym

Metadata

Syntax Highlighting for Svelte using highlight.js

Back