Is it possible to inject HTML highlighting into JS for web components?

[David-Else]

It would be great to be able to see syntax highlighting in this HTML. It requires a plugin in VSCODE: https://marketplace.visualstudio.com/items?itemName=EldarGerfanov.leet-html, maybe treesitter can deal with it in Helix?

const template = document.createElement("template");
template.innerHTML = `
      <nav class="flex items-center justify-between flex-wrap bg-purple-900 p-5">
        <div class="flex items-center flex-shrink-0 text-white mr-6">
          <span class="font-semibold text-xl tracking-tight">Helix Editor Tutorials</span>
        </div>
        <div class="block lg:hidden" id="mobile-nav-button">
          <button class="flex items-center px-3 py-2 border rounded text-white border-white hover:text-white hover:border-white">
            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <title>Menu</title>
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
            </svg>
          </button>
        </div>
        <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto hidden" id="nav-links">
          <div class="text-sm lg:flex-grow">
            <a href="https://helix-editor-tutorials.com/" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white mr-4">Home</a>
            <a href="mastering-the-helix-editor-udemy-course.html" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white mr-4">Mastering the Helix Editor Udemy Course</a>
            <a href="https://elsewebdevelopment.com/get-in-contact/" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white mr-4">Get in contact</a>
          </div>
        </div>
      </nav>
    `;

EDIT I just found out tagged template literals work!

import { LitElement, html, css } from "lit";

class MyComponent extends LitElement {
  static styles = css`
    /* Some styles */
  `;

  render() {
    return html`
      <div>
        <!-- Your component's HTML content -->
        <p>This is my component</p>
      </div>
    `;
  }
}

customElements.define("my-component", MyComponent);

[the-mikedavis]

Tagged templates should work for this as you noticed. I wonder if we are safe to assume that assigning a string literal to innerHTML is HTML. Nix has some highlights similar to that which use bash or python for common setups in nixpkgs:

helix/runtime/queries/nix/injections.scm

Lines 13 to 33 in 0a4432b

	; Common attribute keys corresponding to Python scripts,
	; such as those for NixOS VM tests in nixpkgs/nixos/tests.
	((binding
	attrpath: (attrpath (identifier) @_path)
	expression: (indented_string_expression
	(string_fragment) @injection.content))
	(#match? @_path "(^|\\.)testScript$")
	(#set! injection.language "python")
	(#set! injection.combined))
	; Common attribute keys corresponding to scripts,
	; such as those of stdenv.mkDerivation.
	((binding
	attrpath: (attrpath (identifier) @_path)
	expression: [
	(indented_string_expression (string_fragment) @injection.content)
	(binary_expression (indented_string_expression (string_fragment) @injection.content))
	])
	(#match? @_path "(^\\w*Phase|command|(pre|post)\\w*|(.*\\.)?\\w*([sS]cript|[hH]ook)|(.*\\.)?startup)$")
	(#set! injection.language "bash")
	(#set! injection.combined))