No support for HTML

[Zev-G]

No HTML language available

highlight.js has HTML as one of its supported language but for some reason svelte-highlight doesn't have an import available for the language.

Reproductible demo

<script>
    import { html} from "svelte-highlight/src/languages";
</script>

^ Won't work

[metonym]

Try xml

[Zev-G]

XML is very different from HTML.

Github supports both so you can see the difference in highlighting yourself:

xml

<div id="content">
    <p>Paragraph one</p>
    <p>Paragraph two</p>
</div>

<style>
    #content {
        display: flex;
        flex-direction: column;
        gap: 4em;
    }
</style>

<script>
    const content = document.getElementById("content");
    for (let i = 0; i < 10; i++) {
        let element = document.createElement("div");
        let text = document.createTextNode(`${i + 1}`);
        element.appendChild(text);
        content.appendChild(element);
    }
</script>

html

<div id="content">
    <p>Paragraph one</p>
    <p>Paragraph two</p>
</div>

<style>
    #content {
        display: flex;
        flex-direction: column;
        gap: 4em;
    }
</style>

<script>
    const content = document.getElementById("content");
    for (let i = 0; i < 10; i++) {
        let element = document.createElement("div");
        let text = document.createTextNode(`${i + 1}`);
        element.appendChild(text);
        content.appendChild(element);
    }
</script>

[metonym]

Interesting.

This library re-exports all available languages from highlight.js.

I'd suggest raising an issue in highlight.js.

[Zev-G]

highlight.js clearly shows this working on their demo and on their usage page. I've also seen other sites which use highlight.js have syntax highlighting for html.

I don't think this is an issue on the highlight.js side. Maybe it has to do with the fact that XML and HTML are listed together? Is it possible the way this library re-exports languages could ignore some?

For my personal use I see that HighlightSvelte will work but I still think it's important that such a fundamental language like HTML is supported.

[metonym]

This library's build script uses the hljs.listLanguages API: https://github.com/metonym/svelte-highlight/blob/ca3f390e1d4d974b3b983778c9a2343edaf650f8/scripts/build-languages.js#L10

On unpkg, highlight.js exports the following languages: https://unpkg.com/browse/highlight.js@11.5.0/lib/languages/

A cursory search of highlight.js issues indicates that html/xml is an alias for the XML grammar https://github.com/highlightjs/highlight.js/issues/2888 https://github.com/PeterWone/vsc-print/issues/63

If I'm reading this comment correctly, you may need to escape your HTML for security purposes for it to be highlighted.

[metonym]

For my personal use I see that HighlightSvelte will work but I still think it's important that such a fundamental language like HTML is supported.

HighlightSvelte uses the xml grammar for markup highlighting.

Since you bring this up, I'm inclined to believe that HTML only applies to markup and that you must import the CSS/JS grammars separately.

Importing xml, css, and js grammars to highlight the code you provided seems to work.

https://svelte.dev/repl/7e4f20ca78964bc99638907e0f97eb8f?version=3.46.4

<script>
  import atomOneDark from "svelte-highlight/src/styles/atom-one-dark";
  import hljs from "highlight.js/lib/core";
  import xml from "highlight.js/lib/languages/xml";
  import javascript from "highlight.js/lib/languages/javascript";
  import css from "highlight.js/lib/languages/css";

  hljs.registerLanguage("xml", xml);
  hljs.registerLanguage("javascript", javascript);
  hljs.registerLanguage("css", css);

  let code = `<div id="content">
  <p>Paragraph one</p>
  <p>Paragraph two</p>
</div>

<style>
  #content {
    display: flex;
    flex-direction: column;
    gap: 4em;
  }
</style>

<script>
  const content = document.getElementById("content");
  for (let i = 0; i < 10; i++) {
    let element = document.createElement("div");
    let text = document.createTextNode(\`$\{i + 1}\`);
    element.appendChild(text);
    content.appendChild(element);
  }
<\/script>`;

  $: highlighted = hljs.highlightAuto(code).value;
</script>

<pre data-language="html" {...$$restProps}><code class="hljs"
    >{@html highlighted}</code
  ></pre>

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