svelte-highlight

svelte-highlight

Syntax Highlighting for Svelte using highlight.js.

This component wraps highlight.js to provide syntax highlighting in Svelte 3.

Live Demo

Table of Contents

• Install
• Usage
  • Injected Styles
  • CSS StyleSheet
• Svelte Syntax Highlighting
• Custom Language
• API
  • Props
  • Forwarded Events
  • Dispatched Events
• TypeScript
• Supported Languages
• Supported Styles
• Examples
• Changelog
• License

Install

yarn add -D svelte-highlight
# OR
npm i -D svelte-highlight

Usage

There are two ways to apply highlight.js styles:

• inject JavaScript styles through svelte:head
• import CSS StyleSheets using a css 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/languages";
  import { github } from "svelte-highlight/styles";

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

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

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

CSS StyleSheet

Importing a CSS StyleSheet in Svelte requires 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";
  import "svelte-highlight/styles/github.css";

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

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

Svelte Syntax Highlighting

This library uses highlightjs-svelte to highlight Svelte code.

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

  $: code = `<script>
  let count = 0;
<\/script>

<button on:click="{() => (count += 1)}">Increment {count}<\/button>`;
</script>

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

<HighlightSvelte {code} />

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 */
      };
    },
  };

  const code = "custom language";
</script>

<Highlight {language} {code} />

API

Props

Property name	Value
code	string
language	object { name: string; register: hljs => object }
...$$restProps	(forwarded to the pre element)

Forwarded Events

The following events are forwarded to the pre element:

• on:click
• on:mouseover
• on:mouseenter
• on:mouseleave
• on:focus
• on:blur

Dispatched Events

• on:highlight

<Highlight
  language="{typescript}"
  code="{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.

Supported Languages

Supported Styles

Examples

• examples/rollup
• examples/rollup-typescript
• examples/snowpack
• examples/svite
• examples/webpack

Changelog

License

MIT

Changelog

0.7.1 - 2021-02-13

Fixes

• include types folder in published files