Using Svelte language with svelte-highlight

[nltesown]

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.

[AlexxNB]

Ask svelte-highlight's author =)

[nltesown]

Svelte-highlight has an option for custom languages but the way to register a language isn't directly compatible with your package. I managed to make it work manually by copying/pasting your language definition. So thank you for your work.

[AlexxNB]

As I remember, I done registration as mentioned in official docs.

[nltesown]

Yes, I suppose so.

Your package could probably work with Svelte-highlight if it was exported as an ES module, so it could be imported in Svelte.

On Sun, Feb 21, 2021, at 9:57 AM, Alexey Schebelev wrote:

As I remember, I done registration as mentioned in official docs.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/AlexxNB/highlightjs-svelte/issues/5#issuecomment-782822729, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAVJJUBZZZ7UAKBL53U7NKDTADDJDANCNFSM4X6CCWWQ.

[azmeuk]

Hi. @nltesown you seem to have clues on what to do here. Would you be interesting in providing a patch?

[nltesown]

Hi @azmeuk! I don't remember very well but here's what I did anyway:

In my Svelte project, I wrote a module svelte-highlight-svelte.js containing the language definitions (xml, javascript, css). This is adapted from https://github.com/AlexxNB/highlightjs-svelte/blob/master/src/svelte.js (this repo).

module.exports = {
  name: "svelte",
  register: (hljs) => {
    return {
      subLanguage: "xml",
      contains: [
        hljs.COMMENT("\x3c!--", "--\x3e", { relevance: 10 }),
        {
          begin: /^(\s*)(<script(\s*context="module")?>)/gm,
          end: /^(\s*)(<\/script>)/gm,
          subLanguage: "javascript",
          excludeBegin: !0,
          excludeEnd: !0,
          contains: [
            { begin: /^(\s*)(\$:)/gm, end: /(\s*)/gm, className: "keyword" },
          ],
        },
        {
          begin: /^(\s*)(<style.*>)/gm,
          end: /^(\s*)(<\/style>)/gm,
          subLanguage: "css",
          excludeBegin: !0,
          excludeEnd: !0,
        },
        {
          begin: /\{/gm,
          end: /\}/gm,
          subLanguage: "javascript",
          contains: [
            { begin: /[\{]/, end: /[\}]/, skip: !0 },
            {
              begin: /([#:\/@])(if|else|each|await|then|catch|debug|html)/gm,
              className: "keyword",
              relevance: 10,
            },
          ],
        },
      ],
    };
  },
};

Then, in a Svelte script, I can do:

  import hljs from "highlight.js";
  import { Highlight } from "svelte-highlight";
  import { xml, json } from "svelte-highlight/languages";
  import { a11yDark } from "svelte-highlight/styles";
  import svelte from "../lib/svelte-highlight-svelte.js"; // Svelte syntax highlighting

Then I use the Highlight component like this (data contains the Svelte code I want to display with formatting/highlighting).

<Highlight language={svelte} code={data} />

Not really a patch, but I hope it helps. Good luck!