alexxnb / highlightjs-svelte Goto Github PK

The highlight.js API for registering only the languages you need is:

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);

This makes it friendly for importing only the language you need in a syntax highlighting component.

For example (Svelte):

<script>
     import hljs from 'highlight.js/lib/core';

     export let language;
     export let code;

     const highlighterPromise = (async function () {
          const highlighter = await import(`./languages/${language}.js`);
          hljs.registerLanguage(language, highlighter);
          return hljs.highlight;
     })();
</script>

{#await highlighterPromise then highlight}
     <code>{highlight(code)}</code>
{/await}

Please also export src/svelte.js:#hljsDefineSvelte as part of the highlightjs-svelte public API. This matches the highlight.js API for other languages to allow the above pattern.

How to make this work with https://github.com/metonym/svelte-highlight (a package to use highlight.js in Svelte)?

Ironically enough, that doesn't seem very easy.

Hi, I made a PR to add this package to this list.

There’s a blocker that needs your attention, could you help me with that?