feat: relpace highlight.js with static prisma highlighting

package.json

@@ -22,6 +22,7 @@
   "devDependencies": {
     "@ncpa0cpl/goserve": "^1.0.3",
     "@types/node": "^18",
+    "@types/prismjs": "^1.26.4",
     "async-await-queue": "^2.1.4",
     "chokidar": "^3.6.0",
     "dprint": "^0.46.1",
@@ -30,14 +31,14 @@
     "lightningcss": "^1.26.0",
     "node-os-walk": "^1.0.2",
     "prettier": "^3.3.1",
+    "prismjs": "^1.29.0",
     "rimraf": "^5.0.5",
     "typescript": "^5.4.5"
   },
   "dependencies": {
     "adwavecss": "0.1.1",
     "adwaveui": "0.0.11",
     "dedent": "^1.5.3",
-    "highlight.js": "^11.10.0",
     "htmx.org": "^1.9.12",
     "workbox": "^0.0.0",
     "workbox-expiration": "^7.1.0",

scripts/tmpl-builder.cjs

@@ -49,7 +49,15 @@ module.exports.buildTemplate = async function buildTemplate(
     minify: !IS_DEV,
     write: false,
     sourcemap: IS_DEV ? "inline" : false,
-    external: ["jsxte", "esbuild", "scripts", "prettier", "lightningcss"],
+    external: [
+      "jsxte",
+      "esbuild",
+      "scripts",
+      "prettier",
+      "lightningcss",
+      "prismjs",
+      "prismjs/components/index",
+    ],
     platform: "node",
     plugins: [plugin(srcDir, outDir)],
     alias: {

src/components/code-sample.css

@@ -27,3 +27,38 @@
   flex: 1;
   max-width: 100%;
 }
+
+.dark-theme {
+  .code-sample pre {
+    background: var(--clr-bg-2);
+    border-radius: 8px;
+    padding-left: 1em;
+  }
+}
+
+.light-theme {
+  .code-sample pre {
+    background: var(--clr-bg-2);
+    border-radius: 8px;
+    padding-left: 1em;
+  }
+}
+
+/* unset rules applied by adwavecss due to class name clash */
+.code-sample pre code {
+  & .selector.selector.selector {
+    font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
+    font-size: 1em;
+    background: none;
+    display: inline;
+    transition: none;
+    height: unset;
+    cursor: inherit;
+    border: none;
+    position: static;
+
+    &:active, &:hover {
+      background: none;
+    }
+  }
+}

src/components/code-sample.tsx

@@ -1,6 +1,9 @@
 import { Typography } from "adwavecss";
 import { ComponentApi } from "jsxte/dist/types/component-api/component-api";
 import prettier from "prettier";
+import Prism from "prismjs";
+import loadLanguages from "prismjs/components/index";
+loadLanguages(["html", "css", "javascript"]);
 
 declare global {
   namespace JSX {
@@ -12,34 +15,54 @@ declare global {
   }
 }
 
-export async function CodeSample(
-  props: JSXTE.PropsWithChildren<{}>,
-  componentApi: ComponentApi,
-) {
-  const asString = componentApi.render(<>{props.children}</>, { pretty: true });
-  const formatted = (await prettier.format(asString, {
+async function prettifyHtml(html: string) {
+  let prettierHtml = await prettier.format(html, {
     parser: "html",
     tabWidth: 4,
     bracketSameLine: false,
     printWidth: 80,
-  })).replace(/(\s+)></g, ">$1<").replace(/(\s+)>(\w)/g, ">$1$2");
-  const sanitized = formatted
-    .replace(/&lt;/g, "<")
-    .replace(/&gt;/g, ">")
-    .replace(/=""/g, "")
-    .replace(/=&gt;/g, "=>")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;");
+  });
+  prettierHtml = prettierHtml.replace(/(\s+)></g, ">$1<");
+  prettierHtml = prettierHtml.replace(/(\s+)>(\w)/g, ">$1$2");
+  const lines = prettierHtml.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]!;
+    lines[i] = line.replace(
+      /^(\s+)(.+?<\/.+?>)\s+(<\/.+?>)/g,
+      (_, padding, lineContent, closeTag) => {
+        const lowerPadd = padding.slice(0, -4);
+        return `${padding}${lineContent}\n${lowerPadd}${closeTag}`;
+      },
+    );
+  }
+
+  return lines.join("\n");
+}
+
+export async function CodeSample(
+  props: JSXTE.PropsWithChildren<{}>,
+  componentApi: ComponentApi,
+) {
+  const formatted = await prettifyHtml(
+    componentApi.render(<>{props.children}</>, { pretty: true }),
+  );
+
+  const highlightedHtml = Prism.highlight(
+    formatted,
+    Prism.languages.html!,
+    "html",
+  );
 
   return (
     <div class="contents">
       <div class="flexbox column code-sample-container">
         <div class="flexbox column code-sample">
           <h3 class={Typography.text}>Example:</h3>
-          <div is="code-sample">
-            <pre>{`<code class="html language-html frame">${sanitized}</code>`}</pre>
-          </div>
+          <pre>
+            <code class="language-html">
+              {highlightedHtml}
+            </code>
+          </pre>
         </div>
         <div class="flexbox column code-sample-result">
           <h3 class={Typography.text}>Result:</h3>

src/index.client.ts

@@ -1,8 +1,7 @@
-import "./components/code-sample.client.ts";
 import "./components/font-size-selector.client.js";
 import "./components/navbar.client.js";
 import "./components/theme-switcher.client.js";
-import "./hljs-theme-loader.client.ts";
+import "./prism-theme-loader.client.js";
 import "./service-workers/register.client.ts";
 
 declare global {

src/index.css

@@ -5,6 +5,7 @@
 @import "components/theme-switcher.css";
 @import "components/gh-badge.css";
 @import "../node_modules/adwavecss/dist/styles.css";
+/* @import "../node_modules/prismjs/themes/prism-tomorrow.css"; */
 
 *:not(body, h1, h2, h3, h4, h5, h6) {
   font-size: inherit;

src/layout.tsx

@@ -40,7 +40,6 @@ export function Layout(
         <PreloadFont link="https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoC1CzTtw.ttf" />
         <PreloadFont link="https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvTtw.ttf" />
         <Style dirname={__dirname} path="./index.css" />
-        <Script package="highlight.js" type="global" />
         <Script package="adwaveui" type="iife" />
         <Script dirname={__dirname} path="./htmx.ts" type="iife" />
         <Script

src/hljs-theme-loader.client.ts → src/prism-theme-loader.client.ts

@@ -1,19 +1,19 @@
 // @ts-expect-error
-import hljsThemeLight from "highlight.js/styles/intellij-light.css";
+import themeLight from "prismjs/themes/prism-coy.css";
 // @ts-expect-error
-import hljsThemeDark from "highlight.js/styles/an-old-hope.css";
+import themeDark from "prismjs/themes/prism-tomorrow.css";
 
 const darkCustomCss = /* css */ `
 .code-sample code {
-  font-size: 0.7em;
-  --clr-text: #f9cfff;
+  font-size: 0.9em;
+  --clr-text: #ccc;
 }
 `;
 
 const lightCustomCss = /* css */ `
 .code-sample code {
-  font-size: 0.7em;
-  --clr-text: #373737;
+  font-size: 0.9em;
+  --clr-text: black;
 }
 `;
 
@@ -23,10 +23,10 @@ document.head.appendChild(styleElem);
 function onThemeChange(theme: "dark-theme" | "light-theme") {
   switch (theme) {
     case "dark-theme":
-      styleElem.innerHTML = `${hljsThemeDark}${darkCustomCss}`;
+      styleElem.innerHTML = `${themeDark}${darkCustomCss}`;
       break;
     case "light-theme":
-      styleElem.innerHTML = `${hljsThemeLight}${lightCustomCss}`;
+      styleElem.innerHTML = `${themeLight}${lightCustomCss}`;
       break;
   }
 }

yarn.lock

@@ -179,6 +179,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.6.tgz#26da694f75cdb057750f49d099da5e3f3824cb3e"
   integrity sha512-wf3Vz+jCmOQ2HV1YUJuCWdL64adYxumkrxtc+H1VUQlnQI04+5HtH+qZCOE21lBE7gIrt+CwX2Wv8Acrw5Ak6w==
 
+"@types/prismjs@^1.26.4":
+  version "1.26.4"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.4.tgz#1a9e1074619ce1d7322669e5b46fbe823925103a"
+  integrity sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==
+
 [email protected]:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/adwavecss/-/adwavecss-0.1.1.tgz#a9d5500bff60fbc5062e316963675bbcaf41130a"
@@ -411,11 +416,6 @@ glob@^10.3.7:
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
     path-scurry "^1.10.1"
 
-highlight.js@^11.10.0:
-  version "11.10.0"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.10.0.tgz#6e3600dc4b33d6dc23d5bd94fbf72405f5892b92"
-  integrity sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==
-
 htmx.org@^1.9.12:
   version "1.9.12"
   resolved "https://registry.yarnpkg.com/htmx.org/-/htmx.org-1.9.12.tgz#1c5bc7fb4d3eb4e8c0d72323dc774a6b9b66addc"
@@ -597,6 +597,11 @@ prettier@^3.3.1:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.1.tgz#e68935518dd90bb7ec4821ba970e68f8de16e1ac"
   integrity sha512-7CAwy5dRsxs8PHXT3twixW9/OEll8MLE0VRPCJyl7CkS6VHGPSlsVaWTiASPTyGyYRyApxlaWTzwUxVNrhcwDg==
 
+prismjs@^1.29.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
+  integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"