diff --git a/dist/glimmer.cjs.cjs b/dist/glimmer.cjs.cjs
index be574fbd..48f29dda 100644
--- a/dist/glimmer.cjs.cjs
+++ b/dist/glimmer.cjs.cjs
@@ -297,11 +297,64 @@ function registerJavaScriptInjections(hljs) {
     return;
   }
   js = js.rawDefinition(hljs);
+  setupHBSLiteral(hljs, js);
+  swapXMLForGlimmer(hljs, js);
+  setupTemplateTag(hljs, js);
+  hljs.registerLanguage("javascript", () => js);
+  hljs.registerLanguage("glimmer-javascript", () => js);
+}
+function setupHBSLiteral(hljs, js) {
   let cssIndex = js.contains.findIndex((rule) => (rule == null ? void 0 : rule.begin) === "css`");
   let css = js.contains[cssIndex];
-  js.contains.flatMap((contains) => (contains == null ? void 0 : contains.contains) || contains).filter((rule) => rule.subLanguage === "xml").forEach((rule) => rule.subLanguage = "glimmer");
   const HBS_TEMPLATE = hljs.inherit(css, { begin: /hbs`/ });
   HBS_TEMPLATE.starts.subLanguage = "glimmer";
   js.contains.splice(cssIndex, 0, HBS_TEMPLATE);
-  hljs.registerLanguage("javascript", () => js);
+}
+function swapXMLForGlimmer(_hljs, js) {
+  js.contains.flatMap((contains) => (contains == null ? void 0 : contains.contains) || contains).filter((rule) => rule.subLanguage === "xml").forEach((rule) => rule.subLanguage = "glimmer");
+}
+function setupTemplateTag(_hljs, js) {
+  const GLIMMER_TEMPLATE_TAG = {
+    begin: /<template>/,
+    end: /<\/template>/,
+    isTrulyOpeningTag: (match, response) => {
+      const afterMatchIndex = match[0].length + match.index;
+      const nextChar = match.input[afterMatchIndex];
+      if (nextChar === "<" || nextChar === ",") {
+        response.ignoreMatch();
+        return;
+      }
+      if (nextChar === ">") {
+        if (!hasClosingTag(match, { after: afterMatchIndex })) {
+          response.ignoreMatch();
+        }
+      }
+      let m;
+      const afterMatch = match.input.substring(afterMatchIndex);
+      if (m = afterMatch.match(/^\s+extends\s+/)) {
+        if (m.index === 0) {
+          response.ignoreMatch();
+          return;
+        }
+      }
+    }
+  };
+  js.contains.unshift({
+    variants: [
+      {
+        begin: GLIMMER_TEMPLATE_TAG.begin,
+        "on:begin": GLIMMER_TEMPLATE_TAG.isTrulyOpeningTag,
+        end: GLIMMER_TEMPLATE_TAG.end
+      }
+    ],
+    subLanguage: "glimmer",
+    contains: [
+      {
+        begin: GLIMMER_TEMPLATE_TAG.begin,
+        end: GLIMMER_TEMPLATE_TAG.end,
+        skip: true,
+        contains: ["self"]
+      }
+    ]
+  });
 }
diff --git a/dist/glimmer.esm.min.js b/dist/glimmer.esm.min.js
index d45f984a..a16d6ad0 100644
--- a/dist/glimmer.esm.min.js
+++ b/dist/glimmer.esm.min.js
@@ -1 +1 @@
-function o(n){function e(){return{name:"Ember.JS, Glimmer",aliases:["glimmer","hbs","html.hbs","html.handlebars","htmlbars"],case_insensitive:!0,keywords:i,disableAutodetect:!0,contains:[n.COMMENT(/\{\{!--/,/--\}\}/),n.COMMENT(/\{\{!/,/\}\}/),n.COMMENT(/<!--/,/-->/),u,...N,l,E,R,...H]}}let s="eq neq",r="gt gte le lte",c="and or not",a="not-eq xor is-array is-object is-equal",O="let each each-in if else unless",M="log debugger",I="has-block concat fn component helper modifier get hash query-params",P="action on",C="outlet yield",U="true false undefined null",i={$pattern:/\b[\w][\w-]+\b/,keyword:`${C} ${P} ${M}`,built_in:O,function:`${a} ${I} ${s} ${r} ${c}`,literal:U},A=t.either(t.concat(/[a-zA-Z_]/,t.optional(/[A-Z0-9:_.-]*:/),/[A-Z0-9_.-]*/),/[a-z]/),m=/[A-Z][A-Za-z0-9]+/,x=t.either(m,/[a-zA-Z0-9]*\.[a-zA-Z0-9-]*/,t.concat(m,/::/,/-?/,m),/[a-z]/),y=/[a-z-][a-z\d-_]+\b/,k=/[@A-Za-z0-9._:-]+/,u={className:"symbol",begin:/&[a-z]+;|&#[0-9]+;|&#x[a-f0-9]+;/},w={className:"punctuation",match:t.either(/\./,/\{\{\{?#?\/?/,/\}\}\}?/,/\(/,/\)/,/::/,/\|/,/~/)},S={begin:/as\s+\|/,keywords:{keyword:"as"},end:/\|/,contains:[{className:"template-variable",begin:k}]},l={className:"operator",match:/\=/},E={className:{1:"punctuation",2:"params"},match:[/@/,/[\w\d-_]+/]},b={className:{1:"attribute",2:"operator"},match:[/[A-Za-z0-9-_]+/,/=/]},p={className:{1:"class",2:"punctuation",3:"property"},match:[/this/,/\./,/[^\s}]+/]},f={className:"title",match:x},B={className:"title",match:y,keywords:i},z={className:"number",match:/[\d]+((\.[\d]+))?/},R={className:"comment",begin:/\{\{!--/,contains:[{className:"comment",match:/.+/},{begin:/--\}\}/,endsParent:!0}]},g={className:"string",variants:[{begin:/"/,end:/"/,contains:[u]},{begin:/'/,end:/'/,contains:[u]}]},_=[w,l,E,z,S,p,b,B,g],T={keywords:i,begin:t.concat(/\(/,t.lookahead(t.concat(/\)/))),end:/\)/,contains:[..._,"self",{begin:/\)/,endsParent:!0}]};_.push(T);let N=[{className:"punctuation mustache",keywords:i,begin:t.concat(/\{\{\{?#?/),end:/\}\}\}?/,contains:[{begin:/\}\}\}?/,endsParent:!0},..._,T]}];g.variants.forEach(G=>G.contains.push(...N));let H=[{className:"tag",begin:t.concat(/<:?/,t.lookahead(t.concat(A,t.either(/\/>/,/>/,/\s/)))),end:/\/?>/,contains:[l,E,R,S,p,...N,b,g,f]},{className:"tag",begin:t.concat(/<\/:?/,t.lookahead(t.concat(A,/>/))),end:/\>/,contains:[f]}];return e()}function Z(n){return d("(?=",n,")")}function $(n){return d("(",n,")?")}function d(...n){return n.map(s=>h(s)).join("")}function v(...n){return"("+n.map(s=>h(s)).join("|")+")"}function h(n){return n?typeof n=="string"?n:n.source:null}var t={lookahead:Z,either:v,optional:$,concat:d};var D=o;function Y(n){K(n),L(n)}function J(n){let e=o(n);return L(n),e}function K(n){return n.registerLanguage("glimmer",o)}function L(n){X(n)}function X(n){let e=n.getLanguage("javascript");if(!e){console.warn("JavaScript grammar not loaded");return}e=e.rawDefinition(n);let s=e.contains.findIndex(a=>(a==null?void 0:a.begin)==="css`"),r=e.contains[s];e.contains.flatMap(a=>(a==null?void 0:a.contains)||a).filter(a=>a.subLanguage==="xml").forEach(a=>a.subLanguage="glimmer");let c=n.inherit(r,{begin:/hbs`/});c.starts.subLanguage="glimmer",e.contains.splice(s,0,c),n.registerLanguage("javascript",()=>e)}export{J as externalSetup,D as glimmer,L as registerInjections,K as registerLanguage,Y as setup};
+function r(n){function e(){return{name:"Ember.JS, Glimmer",aliases:["glimmer","hbs","html.hbs","html.handlebars","htmlbars"],case_insensitive:!0,keywords:g,disableAutodetect:!0,contains:[n.COMMENT(/\{\{!--/,/--\}\}/),n.COMMENT(/\{\{!/,/\}\}/),n.COMMENT(/<!--/,/-->/),m,...f,E,_,L,...H]}}let t="eq neq",s="gt gte le lte",i="and or not",o="not-eq xor is-array is-object is-equal",c="let each each-in if else unless",u="log debugger",b="has-block concat fn component helper modifier get hash query-params",P="action on",C="outlet yield",x="true false undefined null",g={$pattern:/\b[\w][\w-]+\b/,keyword:`${C} ${P} ${u}`,built_in:c,function:`${o} ${b} ${t} ${s} ${i}`,literal:x},T=a.either(a.concat(/[a-zA-Z_]/,a.optional(/[A-Z0-9:_.-]*:/),/[A-Z0-9_.-]*/),/[a-z]/),l=/[A-Z][A-Za-z0-9]+/,y=a.either(l,/[a-zA-Z0-9]*\.[a-zA-Z0-9-]*/,a.concat(l,/::/,/-?/,l),/[a-z]/),U=/[a-z-][a-z\d-_]+\b/,k=/[@A-Za-z0-9._:-]+/,m={className:"symbol",begin:/&[a-z]+;|&#[0-9]+;|&#x[a-f0-9]+;/},w={className:"punctuation",match:a.either(/\./,/\{\{\{?#?\/?/,/\}\}\}?/,/\(/,/\)/,/::/,/\|/,/~/)},A={begin:/as\s+\|/,keywords:{keyword:"as"},end:/\|/,contains:[{className:"template-variable",begin:k}]},E={className:"operator",match:/\=/},_={className:{1:"punctuation",2:"params"},match:[/@/,/[\w\d-_]+/]},S={className:{1:"attribute",2:"operator"},match:[/[A-Za-z0-9-_]+/,/=/]},M={className:{1:"class",2:"punctuation",3:"property"},match:[/this/,/\./,/[^\s}]+/]},h={className:"title",match:y},B={className:"title",match:U,keywords:g},G={className:"number",match:/[\d]+((\.[\d]+))?/},L={className:"comment",begin:/\{\{!--/,contains:[{className:"comment",match:/.+/},{begin:/--\}\}/,endsParent:!0}]},d={className:"string",variants:[{begin:/"/,end:/"/,contains:[m]},{begin:/'/,end:/'/,contains:[m]}]},N=[w,E,_,G,A,M,S,B,d],R={keywords:g,begin:a.concat(/\(/,a.lookahead(a.concat(/\)/))),end:/\)/,contains:[...N,"self",{begin:/\)/,endsParent:!0}]};N.push(R);let f=[{className:"punctuation mustache",keywords:g,begin:a.concat(/\{\{\{?#?/),end:/\}\}\}?/,contains:[{begin:/\}\}\}?/,endsParent:!0},...N,R]}];d.variants.forEach(z=>z.contains.push(...f));let H=[{className:"tag",begin:a.concat(/<:?/,a.lookahead(a.concat(T,a.either(/\/>/,/>/,/\s/)))),end:/\/?>/,contains:[E,_,L,A,M,...f,S,d,h]},{className:"tag",begin:a.concat(/<\/:?/,a.lookahead(a.concat(T,/>/))),end:/\>/,contains:[h]}];return e()}function v(n){return p("(?=",n,")")}function Z(n){return p("(",n,")?")}function p(...n){return n.map(t=>O(t)).join("")}function $(...n){return"("+n.map(t=>O(t)).join("|")+")"}function O(n){return n?typeof n=="string"?n:n.source:null}var a={lookahead:v,either:$,optional:Z,concat:p};var F=r;function Q(n){X(n),I(n)}function W(n){let e=r(n);return I(n),e}function X(n){return n.registerLanguage("glimmer",r)}function I(n){K(n)}function K(n){let e=n.getLanguage("javascript");if(!e){console.warn("JavaScript grammar not loaded");return}e=e.rawDefinition(n),q(n,e),D(n,e),Y(n,e),n.registerLanguage("javascript",()=>e),n.registerLanguage("glimmer-javascript",()=>e)}function q(n,e){let t=e.contains.findIndex(o=>(o==null?void 0:o.begin)==="css`"),s=e.contains[t],i=n.inherit(s,{begin:/hbs`/});i.starts.subLanguage="glimmer",e.contains.splice(t,0,i)}function D(n,e){e.contains.flatMap(t=>(t==null?void 0:t.contains)||t).filter(t=>t.subLanguage==="xml").forEach(t=>t.subLanguage="glimmer")}function Y(n,e){let t={begin:/<template>/,end:/<\/template>/,isTrulyOpeningTag:(s,i)=>{let o=s[0].length+s.index,c=s.input[o];if(c==="<"||c===","){i.ignoreMatch();return}c===">"&&(hasClosingTag(s,{after:o})||i.ignoreMatch());let u;if((u=s.input.substring(o).match(/^\s+extends\s+/))&&u.index===0){i.ignoreMatch();return}}};e.contains.unshift({variants:[{begin:t.begin,"on:begin":t.isTrulyOpeningTag,end:t.end}],subLanguage:"glimmer",contains:[{begin:t.begin,end:t.end,skip:!0,contains:["self"]}]})}export{W as externalSetup,F as glimmer,I as registerInjections,X as registerLanguage,Q as setup};
diff --git a/index.html b/index.html
index f34651dc..11ba842e 100644
--- a/index.html
+++ b/index.html
@@ -93,13 +93,13 @@
         this._updateEditor();
         this._updateHighlightDebug();
         this._updatePreview();
-      }
+      };
 
       _reHighlight = (code, language) => {
         let preview = document.querySelector('pre code');
 
         preview.innerHTML = hljs.highlight(code.trim(), { language }).value;
-      }
+      };
 
       _handleInput = (event) => {
         let formData = new FormData(event.currentTarget);
@@ -112,12 +112,12 @@
         this._updateQp('language', data.language);
 
         this._reHighlight(data.code, data.language);
-      }
+      };
 
       _updatePreview = () => {
         let form = document.querySelector('#editor');
 
-        form.dispatchEvent(new CustomEvent('submit', {cancelable: true}));
+        form.dispatchEvent(new CustomEvent('submit', { cancelable: true }));
       };
 
       _setupSampleNav = () => {
@@ -158,17 +158,17 @@
           let info = state.currentSample;
 
           code.value = info.sample;
-          language.value =  code.language;
+          language.value = code.language;
         }
 
-        if (state.qps.get('code')){
+        if (state.qps.get('code')) {
           code.value = state.qps.get('code');
         }
 
-        if (state.qps.get('language')){
+        if (state.qps.get('language')) {
           language.value = state.qps.get('language');
         }
-      }
+      };
 
       _setupDebug = () => {
         let debugLinks = document.querySelectorAll('#dev a');
@@ -207,7 +207,7 @@
 
           state.navigateTo(`?${qps}`);
         }
-      }
+      };
 
       _updateQp = (name, value) => {
         let qps = new URLSearchParams(state.qps);
@@ -217,7 +217,7 @@
 
           state.navigateTo(`?${qps}`);
         }
-      }
+      };
 
       _updateDebug = () => {
         let debugMode = document.querySelector('#dev a.debug');
@@ -240,9 +240,7 @@
         } else {
           form.classList.add('hidden');
         }
-
-      }
-
+  };
 
       _updateHighlightDebug = () => {
         if (state.isDebugging) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2364b609..4b391d19 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -110,6 +110,7 @@ importers:
       highlight.js: '>= 11.6.0'
       highlightjs-glimmer: workspace:../
       markdown-it: ^13.0.1
+      prettier: ^2.7.1
       rehype: ^12.0.1
       rehype-highlight: ^6.0.0
       rehype-stringify: ^9.0.3
@@ -130,6 +131,7 @@ importers:
       eslint: 8.26.0
       highlight.js: 11.6.0
       markdown-it: 13.0.1
+      prettier: 2.7.1
       rehype: 12.0.1
       rehype-highlight: 6.0.0
       rehype-stringify: 9.0.3
diff --git a/src/index.js b/src/index.js
index 8484dff2..4a66ebdd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -34,14 +34,15 @@ function registerJavaScriptInjections(hljs) {
 
   js = js.rawDefinition(hljs);
 
-  setupHBSLiteral(js);
-  swapXMLForGlimmer(js);
-  setupTemplateTag(js);
+  setupHBSLiteral(hljs, js);
+  swapXMLForGlimmer(hljs, js);
+  setupTemplateTag(hljs, js);
 
   hljs.registerLanguage('javascript', () => js);
+  hljs.registerLanguage('glimmer-javascript', () => js);
 }
 
-function setupHBSLiteral(js) {
+function setupHBSLiteral(hljs, js) {
   let cssIndex = js.contains.findIndex((rule) => rule?.begin === 'css`');
   let css = js.contains[cssIndex];
 
@@ -52,7 +53,7 @@ function setupHBSLiteral(js) {
   js.contains.splice(cssIndex, 0, HBS_TEMPLATE);
 }
 
-function swapXMLForGlimmer(js) {
+function swapXMLForGlimmer(_hljs, js) {
   // The default JSX grammar is actually just XML, which... is also wrong :D
   js.contains
     .flatMap((contains) => contains?.contains || contains)
@@ -63,7 +64,7 @@ function swapXMLForGlimmer(js) {
 /**
  * A lot of this is stolen from XML
  */
-function setupTemplateTag(js) {
+function setupTemplateTag(_hljs, js) {
   const GLIMMER_TEMPLATE_TAG = {
     begin: /<template>/,
     end: /<\/template>/,
diff --git a/tests-esm/-utils.js b/tests-esm/-utils.js
index 39b30cb4..b041fb6c 100644
--- a/tests-esm/-utils.js
+++ b/tests-esm/-utils.js
@@ -1,18 +1,103 @@
+import { expect } from 'vitest';
 import hljs from 'highlight.js';
-import { registerLanguage } from 'highlightjs-glimmer';
+import { setup } from 'highlightjs-glimmer';
 
-registerLanguage(hljs);
+setup(hljs);
+
+import prettier from 'prettier';
+
+// Used to resolve indentation issues.
+// We don't care about that in these tests -- we only care about tag identification.
+export function format(code) {
+  return prettier.format(code, { parser: 'html', htmlWhitespaceSensitivity: 'ignore' });
+}
+
+export function formattedEquals(actual, expected) {
+  expect(format(actual)).toEqual(format(expected));
+}
 
 export function parse(code, lang = 'glimmer') {
   return hljs.highlight(code, { language: lang }).value;
 }
 
+export function glimmer(...children) {
+  return `<span class="language-glimmer">${children.join('')}</span>`;
+}
+
+export const templateTags = {
+  get begin() {
+    return tag('tag', ['&lt;', tag('title', 'template'), '&gt;']);
+  },
+  get end() {
+    return tag('tag', ['&lt;/', tag('title', 'template'), '&gt;']);
+  },
+};
+
+export function template(...content) {
+  return list(templateTags.begin, '\n', ...indentLines(content), '\n', templateTags.end);
+}
+
+export function selfClosing(name, attributes = []) {
+  return tag('tag', ['&lt;', tag('title', name), ...attributes, ' /&gt;']);
+}
+
+export function indentLines(lines, amount = 2) {
+  let indent = Array(amount + 1).join(' ');
+
+  return lines.map((line) => {
+    return `${indent}${line}`;
+  });
+}
+
+export function element(name, content = []) {
+  return list(
+    tag('tag', ['&lt;', tag('title', name), '&gt;']),
+    '\n',
+    ...indentLines(content),
+    '\n',
+    tag('tag', ['&lt;/', tag('title', name), '&gt;'])
+  );
+}
+
+export function mustache(...content) {
+  return tag('punctuation mustache', ['{{', ...content, '}}']);
+}
+
+export function arg(name) {
+  return list(tag('punctuation', '@'), tag('params', name));
+}
+
+export const keyword = {
+  export: tag('keyword', 'export'),
+  const: tag('keyword', 'const'),
+  default: tag('keyword', 'default'),
+};
+
+export const operator = {
+  equals: tag('operator', '='),
+};
+
+export function string(content) {
+  return tag('string', ['&quot;', content, '&quot;']);
+}
+
+export const tags = {
+  template,
+  mustache,
+  element,
+  selfClosing,
+  arg,
+  keyword,
+  operator,
+  string,
+};
+
 export function tag(klass, children = []) {
   let _children = Array.isArray(children) ? children : [children];
 
   return `<span class="hljs-${klass}">${_children.join('')}</span>`;
 }
 
-export function list(children) {
+export function list(...children) {
   return children.join('');
 }
diff --git a/tests-esm/package.json b/tests-esm/package.json
index 5502c8e7..18094c94 100644
--- a/tests-esm/package.json
+++ b/tests-esm/package.json
@@ -22,6 +22,7 @@
     "eslint": "^8.26.0",
     "highlight.js": ">= 11.6.0",
     "markdown-it": "^13.0.1",
+    "prettier": "^2.7.1",
     "rehype": "^12.0.1",
     "rehype-highlight": "^6.0.0",
     "rehype-stringify": "^9.0.3",
diff --git a/tests-esm/unit/__snapshots__/injections.test.js.snap b/tests-esm/unit/__snapshots__/injections.test.js.snap
new file mode 100644
index 00000000..af23c377
--- /dev/null
+++ b/tests-esm/unit/__snapshots__/injections.test.js.snap
@@ -0,0 +1,255 @@
+// Vitest Snapshot v1
+
+exports[`Injections | JS > gjs / template tag > is embedded in a class 1`] = `
+"<span class=\\"hljs-keyword\\">import</span>
+<span class=\\"hljs-title class_\\">Component</span>
+<span class=\\"hljs-keyword\\">from</span>
+<span class=\\"hljs-string\\">&#x27;@glimmer/component&#x27;</span>
+;
+<span class=\\"hljs-keyword\\">import</span>
+{ gt, lt }
+<span class=\\"hljs-keyword\\">from</span>
+<span class=\\"hljs-string\\">&#x27;@glimmer/helper&#x27;</span>
+;
+
+<span class=\\"hljs-keyword\\">export</span>
+<span class=\\"hljs-keyword\\">default</span>
+<span class=\\"hljs-keyword\\">class</span>
+<span class=\\"hljs-title class_\\">WeatherSummary</span>
+<span class=\\"hljs-keyword\\">extends</span>
+<span class=\\"hljs-title class_ inherited__\\">Component</span>
+{ @tracked currentTemp; interval; getWeather =
+<span class=\\"hljs-function\\">() =&gt;</span>
+{
+<span class=\\"hljs-variable language_\\">this</span>
+.
+<span class=\\"hljs-property\\">currentTemp</span>
+=
+<span class=\\"hljs-comment\\">// something</span>
+}
+
+<span class=\\"hljs-title function_\\">constructor</span>
+(
+<span class=\\"hljs-params\\">owner, args</span>
+) {
+<span class=\\"hljs-variable language_\\">super</span>
+(owner, args);
+<span class=\\"hljs-variable language_\\">this</span>
+.
+<span class=\\"hljs-property\\">interval</span>
+=
+<span class=\\"hljs-built_in\\">setInterval</span>
+(
+<span class=\\"hljs-variable language_\\">this</span>
+.
+<span class=\\"hljs-property\\">getWeather</span>
+,
+<span class=\\"hljs-number\\">10000</span>
+); }
+
+<span class=\\"hljs-title function_\\">willDestroy</span>
+(
+<span class=\\"hljs-params\\"></span>
+) {
+<span class=\\"hljs-variable language_\\">super</span>
+.
+<span class=\\"hljs-title function_\\">willDestroy</span>
+();
+<span class=\\"hljs-built_in\\">clearInterval</span>
+(
+<span class=\\"hljs-variable language_\\">this</span>
+.
+<span class=\\"hljs-property\\">interval</span>
+); }
+
+<span class=\\"language-glimmer\\">
+  <span class=\\"hljs-tag\\">
+    &lt;
+    <span class=\\"hljs-title\\">template</span>
+    &gt;
+  </span>
+  <span class=\\"hljs-tag\\">
+    &lt;
+    <span class=\\"hljs-title\\">p</span>
+    &gt;
+  </span>
+  The current temperature is
+  <span class=\\"hljs-punctuation mustache\\">
+    {{
+    <span class=\\"hljs-class\\">this</span>
+    <span class=\\"hljs-punctuation\\">.</span>
+    <span class=\\"hljs-property\\">currentTemp</span>
+    }}
+  </span>
+  !
+  <span class=\\"hljs-punctuation mustache\\">
+    {{#
+    <span class=\\"hljs-title\\"><span class=\\"hljs-built_in\\">if</span></span>
+    <span class=\\"hljs-punctuation\\">(</span>
+    <span class=\\"hljs-title\\">lt</span>
+    <span class=\\"hljs-number\\">50</span>
+    <span class=\\"hljs-class\\">this</span>
+    <span class=\\"hljs-punctuation\\">.</span>
+    <span class=\\"hljs-property\\">currentTemp)</span>
+    }}
+  </span>
+  Brr! 🥶
+  <span class=\\"hljs-punctuation mustache\\">
+    {{
+    <span class=\\"hljs-title\\"><span class=\\"hljs-built_in\\">else</span></span>
+    <span class=\\"hljs-title\\"><span class=\\"hljs-built_in\\">if</span></span>
+    <span class=\\"hljs-punctuation\\">(</span>
+    <span class=\\"hljs-title\\"><span class=\\"hljs-function\\">gt</span></span>
+    <span class=\\"hljs-number\\">80</span>
+    <span class=\\"hljs-class\\">this</span>
+    <span class=\\"hljs-punctuation\\">.</span>
+    <span class=\\"hljs-property\\">currentTemp)</span>
+    }}
+  </span>
+  Yikes! 🥵
+  <span class=\\"hljs-punctuation mustache\\">
+    {{/
+    <span class=\\"hljs-title\\"><span class=\\"hljs-built_in\\">if</span></span>
+    }}
+  </span>
+  <span class=\\"hljs-tag\\">
+    &lt;/
+    <span class=\\"hljs-title\\">p</span>
+    &gt;
+  </span>
+  <span class=\\"hljs-tag\\">
+    &lt;/
+    <span class=\\"hljs-title\\">template</span>
+    &gt;
+  </span>
+</span>
+}
+"
+`;
+
+exports[`Injections | JS > gjs / template tag > multiple components 1`] = `
+"<span class=\\"hljs-keyword\\">import</span>
+<span class=\\"hljs-title class_\\">WeatherSummary</span>
+<span class=\\"hljs-keyword\\">from</span>
+<span class=\\"hljs-string\\">&#x27;./weather-summary.js&#x27;</span>
+;
+
+<span class=\\"hljs-keyword\\">const</span>
+<span class=\\"hljs-title class_\\">Greeting</span>
+=
+<span class=\\"language-glimmer\\">
+  <span class=\\"hljs-tag\\">
+    &lt;
+    <span class=\\"hljs-title\\">template</span>
+    &gt;
+  </span>
+  <span class=\\"hljs-tag\\">
+    &lt;
+    <span class=\\"hljs-title\\">p</span>
+    &gt;
+  </span>
+  Hello,
+  <span class=\\"hljs-punctuation mustache\\">
+    {{
+    <span class=\\"hljs-punctuation\\">@</span>
+    <span class=\\"hljs-params\\">name</span>
+    }}
+  </span>
+  !
+  <span class=\\"hljs-tag\\">
+    &lt;/
+    <span class=\\"hljs-title\\">p</span>
+    &gt;
+  </span>
+  <span class=\\"hljs-tag\\">
+    &lt;/
+    <span class=\\"hljs-title\\">template</span>
+    &gt;
+  </span>
+</span>
+;
+
+<span class=\\"hljs-keyword\\">function</span>
+<span class=\\"hljs-title function_\\">isBirthday</span>
+(
+<span class=\\"hljs-params\\">dateOfBirth</span>
+) {
+<span class=\\"hljs-keyword\\">const</span>
+now =
+<span class=\\"hljs-keyword\\">new</span>
+<span class=\\"hljs-title class_\\">Date</span>
+();
+<span class=\\"hljs-keyword\\">return</span>
+( dateOfBirth.
+<span class=\\"hljs-title function_\\">getDate</span>
+() === now.
+<span class=\\"hljs-title function_\\">getDate</span>
+() &amp;&amp; dateOfBirth.
+<span class=\\"hljs-title function_\\">getMonth</span>
+() === now.
+<span class=\\"hljs-title function_\\">getMonth</span>
+() ); }
+
+<span class=\\"language-glimmer\\">
+  <span class=\\"hljs-tag\\">
+    &lt;
+    <span class=\\"hljs-title\\">template</span>
+    &gt;
+  </span>
+  <span class=\\"hljs-tag\\">
+    &lt;
+    <span class=\\"hljs-title\\">div</span>
+    &gt;
+  </span>
+  <span class=\\"hljs-tag\\">
+    &lt;
+    <span class=\\"hljs-title\\">Greeting</span>
+    <span class=\\"hljs-punctuation\\">@</span>
+    <span class=\\"hljs-params\\">name</span>
+    <span class=\\"hljs-operator\\">=</span>
+    <span class=\\"hljs-string\\">&quot;Chris&quot;</span>
+    /&gt;
+  </span>
+  <span class=\\"hljs-punctuation mustache\\">
+    {{#
+    <span class=\\"hljs-title\\"><span class=\\"hljs-built_in\\">if</span></span>
+    <span class=\\"hljs-punctuation\\">(</span>
+    <span class=\\"hljs-title\\">isBirthday</span>
+    <span class=\\"hljs-punctuation\\">@</span>
+    <span class=\\"hljs-params\\">user</span>
+    <span class=\\"hljs-punctuation\\">.</span>
+    <span class=\\"hljs-title\\">dateOfBirth</span>
+    <span class=\\"hljs-punctuation\\">)</span>
+    }}
+  </span>
+  <span class=\\"hljs-tag\\">
+    &lt;
+    <span class=\\"hljs-title\\">Celebration</span>
+    <span class=\\"hljs-attribute\\">type</span>
+    <span class=\\"hljs-operator\\">=</span>
+    <span class=\\"hljs-string\\">&#x27;birthday&#x27;</span>
+    /&gt;
+  </span>
+  <span class=\\"hljs-punctuation mustache\\">
+    {{/
+    <span class=\\"hljs-title\\"><span class=\\"hljs-built_in\\">if</span></span>
+    }}
+  </span>
+  <span class=\\"hljs-tag\\">
+    &lt;
+    <span class=\\"hljs-title\\">WeatherSummary</span>
+    /&gt;
+  </span>
+  <span class=\\"hljs-tag\\">
+    &lt;/
+    <span class=\\"hljs-title\\">div</span>
+    &gt;
+  </span>
+  <span class=\\"hljs-tag\\">
+    &lt;/
+    <span class=\\"hljs-title\\">template</span>
+    &gt;
+  </span>
+</span>
+"
+`;
diff --git a/tests-esm/unit/injections.test.js b/tests-esm/unit/injections.test.js
index c55026dc..fc1c9bde 100644
--- a/tests-esm/unit/injections.test.js
+++ b/tests-esm/unit/injections.test.js
@@ -1,6 +1,6 @@
 import { describe, test, expect } from 'vitest';
 import { stripIndent } from 'common-tags';
-import { parse, tag, list } from '../-utils';
+import { parse, tag, list, glimmer, template, tags, formattedEquals, format } from '../-utils';
 
 describe('Injections | JS', () => {
   describe('hbs template literal', () => {
@@ -13,7 +13,7 @@ describe('Injections | JS', () => {
       );
 
       expect(result).toEqual(
-        '<span class="hljs-keyword">const</span> hbs<span class="hljs-string">`{{foo}}`</span>'
+        '<span class="hljs-keyword">const</span> hbs`<span class="language-glimmer"><span class="hljs-punctuation mustache">{{<span class="hljs-title">foo</span>}}</span>`</span>'
       );
     });
   });
@@ -26,15 +26,20 @@ describe('Injections | JS', () => {
             {{@name}}
           </template>;
         `,
-        'js'
+        'glimmer-javascript'
       );
 
       expect(result).toEqual(
-        stripIndent`
-          <span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title class_">Name</span> = <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
-            {{@name}}
-          <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span>;
-        `
+        list(
+          tags.keyword.export,
+          ' ',
+          tags.keyword.const,
+          ' ',
+          tag('title class_', 'Name'),
+          ' = ',
+          glimmer(template(tags.mustache(tags.arg('name')))),
+          ';'
+        )
       );
     });
 
@@ -48,9 +53,7 @@ describe('Injections | JS', () => {
         'js'
       );
 
-      expect(result).toEqual(
-        tag('hljs-name', ['{{', tag('punctuation', '@'), tag('params', 'name'), '}}'])
-      );
+      expect(result).toEqual(glimmer(template(tags.mustache(tags.arg('name')))));
     });
 
     test('explicit default export', () => {
@@ -60,17 +63,16 @@ describe('Injections | JS', () => {
             {{@name}}
           </template>
         `,
-        'js'
+        'javascript'
       );
 
-      console.log(result);
       expect(result).toEqual(
         list(
-          tag('hljs-keyword', 'export'),
+          tags.keyword.export,
           ' ',
-          tag('hljs-keyword', 'default'),
-
-          tag('hljs-name', ['{{', tag('punctuation', '@'), tag('params', 'name'), '}}'])
+          tags.keyword.default,
+          ' ',
+          glimmer(template(tags.mustache(tags.arg('name'))))
         )
       );
     });
@@ -91,7 +93,31 @@ describe('Injections | JS', () => {
         'js'
       );
 
-      expect(result).toEqual();
+      formattedEquals(
+        result,
+        list(
+          // These are JS and not tagged by us
+          `<span class="hljs-keyword">import</span> <span class="hljs-title class_">Greeting</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./greeting.js&#x27;</span>;`,
+          '\n',
+          `<span class="hljs-keyword">import</span> <span class="hljs-title class_">WeatherSummary</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./weather-summary.js&#x27;</span>;`,
+          '\n',
+          '\n',
+          glimmer(
+            template(
+              tags.element('div', [
+                tags.selfClosing('Greeting', [
+                  ' ',
+                  tags.arg('name'),
+                  tags.operator.equals,
+                  tags.string('Chris'),
+                ]),
+                '\n',
+                tags.selfClosing('WeatherSummary'),
+              ])
+            )
+          )
+        )
+      );
     });
 
     test('a function exists above the template', () => {
@@ -121,7 +147,56 @@ describe('Injections | JS', () => {
         'js'
       );
 
-      expect(result).toEqual();
+      formattedEquals(
+        result,
+        list(
+          // These are JS and not tagged by us
+          `<span class="hljs-keyword">import</span> <span class="hljs-title class_">Greeting</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./greeting.js&#x27;</span>;
+ <span class="hljs-keyword">import</span> <span class="hljs-title class_">WeatherSummary</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./weather-summary.js&#x27;</span>;
+
+ <span class="hljs-keyword">function</span> <span class="hljs-title function_">isBirthday</span>(<span class="hljs-params">dateOfBirth</span>) {
+   <span class="hljs-keyword">const</span> now = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>();
+   <span class="hljs-keyword">return</span> (
+     dateOfBirth.<span class="hljs-title function_">getDate</span>() === now.<span class="hljs-title function_">getDate</span>() &amp;&amp;
+     dateOfBirth.<span class="hljs-title function_">getMonth</span>() === now.<span class="hljs-title function_">getMonth</span>()
+   );
+ }`,
+          '\n',
+          '\n',
+          glimmer(
+            template(
+              tags.element('div', [
+                tags.selfClosing('Greeting', [
+                  ' ',
+                  tags.arg('name'),
+                  tags.operator.equals,
+                  tags.string('Chris'),
+                ]),
+                '\n',
+                tags.mustache(
+                  '#',
+                  tag('title', tag('built_in', 'if')),
+                  tag('punctuation', '('),
+                  tag('title', 'isBirthday'),
+                  ' ',
+                  tag('punctuation', '@'),
+                  tag('params', 'user'),
+                  tag('punctuation', '.'),
+                  tag('title', 'dateOfBirth'),
+                  tag('punctuation', ')')
+                ),
+                tags.selfClosing('Celebration', [
+                  tag('attribute', 'type'),
+                  tags.operator.equals,
+                  tag('string', ['&#x27;', 'birthday', '&#x27;']),
+                ]),
+                tags.mustache('/', tag('title', tag('built_in', 'if'))),
+                tags.selfClosing('WeatherSummary'),
+              ])
+            )
+          )
+        )
+      );
     });
 
     test('is embedded in a class', () => {
@@ -164,7 +239,7 @@ describe('Injections | JS', () => {
         'js'
       );
 
-      expect(result).toEqual();
+      expect(format(result)).toMatchSnapshot();
     });
 
     test('multiple components', () => {
@@ -197,7 +272,7 @@ describe('Injections | JS', () => {
         'js'
       );
 
-      expect(result).toEqual();
+      expect(format(result)).toMatchSnapshot();
     });
   });
 });