fix(builder): support for [data-hl] and don't break variable names

lowlighter · Jun 8, 2024 · f6a981c · f6a981c
1 parent fa58cb5
commit f6a981c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/app/build/html.ts b/app/build/html.ts
@@ -117,5 +117,11 @@ export async function html_builder() {
   section.innerHTML = builder.querySelector("details")!.innerHTML
   section.querySelector("summary")?.remove()
   document.querySelector("main")!.append(section)
+  // Syntax highlighting
+  Array.from(document.querySelectorAll("[data-hl]")).forEach((_element) => {
+    const element = _element as unknown as HTMLElement
+    element.innerHTML = syntax.highlight(element.innerText, { language: element.getAttribute("data-hl")! }).value.trim()
+    element.removeAttribute("data-hl")
+  })
   return `<!DOCTYPE html>${document.documentElement!.outerHTML}`
 }
diff --git a/app/mod.css b/app/mod.css
@@ -95,6 +95,10 @@ details summary a {
   max-width: 4rem;
 }
 
+.matcha-build .variables td code:only-child {
+  white-space: nowrap;
+}
+
 .matcha-build .styling {
   display: flex;
   flex-wrap: wrap;