highlight.svelte

Svelte Language Definition for highlight.js with Typescript support.
Updated fork of highlightjs-svelte

Installation

npm i highlight.js highlight.svelte

Importing the Lib

To use the Svelte language definition with highlight.js, you have two options for importing:

1. Optimized Imports (Recommended)

// import core hljs api and register required languages
import hljs from 'highlight.js/lib/core';

import javascript from 'highlight.js/lib/languages/javascript';
// optional: if you are using 'lang="ts"'
import typescript from 'highlight.js/lib/languages/typescript';
import css from 'highlight.js/lib/languages/css';
import xml from 'highlight.js/lib/languages/xml';
import svelte from 'highlight.svelte';

// register each language definition
hljs.registerLanguage([lang - name], [lang - module]);

2. Full Import (Less Optimal)

If you prefer to load all languages provided by highlight.js, you can use this approach. However, this may significantly increase your bundle size since it imports all available languages.

import hljs from 'highlight.js';
import svelte from 'highlight.svelte';

hljs.registerLanguage('svelte', svelte);

Usage

Follow optimized importing.
Usage examples are based on less optimal way to reduce docs length.

Node.js / require

const hljs = require('highlight.js');
hljs.registerLanguage('svelte', require('highlight.svelte'));

const highlightedCode = hljs.highlight(code, { language: 'svelte' }).value;

ES6 Modules / import

import hljs from 'highlight.js';
import svelte from 'highlight.svelte';

hljs.registerLanguage('svelte', svelte);
const highlightedCode = hljs.highlight(code, { language: 'svelte' }).value;

Browser / cdn

<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
<script src="https://unpkg.com/highlight.svelte@latest/dist/svelte.min.js"></script>

<script>
  hljs.highlightAll();
</script>

<pre><code class="language-svelte">{code}</code></pre>

Development

Project is powered by nx workspace.
Follow basic steps:

1. npm i
2. npm run dev

This will build package and spin up an example svelte-vite app with package installed.
Visit: localhost:5173