chore(share): bring back syntax highlight

apps/desktop/scripts/build.ts

@@ -11,6 +11,7 @@ async function main() {
     // Copy assets.
     build.copy("src/assets", "assets/");
     build.copy("/apps/server/src/assets", "assets/");
+    build.triggerBuildAndCopyTo("packages/share-theme", "share-theme/assets/");
     build.copy("/packages/share-theme/src/templates", "share-theme/templates/");
 
     // Copy node modules dependencies

apps/server/package.json

@@ -36,6 +36,7 @@
     "@triliumnext/commons": "workspace:*",
     "@triliumnext/express-partial-content": "workspace:*",
     "@triliumnext/turndown-plugin-gfm": "workspace:*",
+    "@triliumnext/highlightjs": "workspace:*",
     "@types/archiver": "6.0.3",
     "@types/better-sqlite3": "7.6.13",
     "@types/cls-hooked": "4.3.9",

apps/server/src/share/content_renderer.ts

@@ -1,4 +1,4 @@
-import { parse, HTMLElement, TextNode } from "node-html-parser";
+import { parse, HTMLElement, TextNode, Options } from "node-html-parser";
 import shaca from "./shaca/shaca.js";
 import assetPath, { assetUrlFragment } from "../services/asset_path.js";
 import shareRoot from "./share_root.js";
@@ -14,6 +14,7 @@ import ejs from "ejs";
 import log from "../services/log.js";
 import { join } from "path";
 import { readFileSync } from "fs";
+import { highlightAuto } from "@triliumnext/highlightjs";
 
 const shareAdjustedAssetPath = isDev ? assetPath : `../${assetPath}`;
 const templateCache: Map<string, string> = new Map();
@@ -264,7 +265,10 @@ function renderIndex(result: Result) {
 
 function renderText(result: Result, note: SNote | BNote) {
     if (typeof result.content !== "string") return;
-    const document = parse(result.content || "");
+    const parseOpts: Partial<Options> = {
+        blockTextElements: {}
+    }
+    const document = parse(result.content || "", parseOpts);
 
     // Process include notes.
     for (const includeNoteEl of document.querySelectorAll("section.include-note")) {
@@ -277,7 +281,7 @@ function renderText(result: Result, note: SNote | BNote) {
         const includedResult = getContent(note);
         if (typeof includedResult.content !== "string") continue;
 
-        const includedDocument = parse(includedResult.content).childNodes;
+        const includedDocument = parse(includedResult.content, parseOpts).childNodes;
         if (includedDocument) {
             includeNoteEl.replaceWith(...includedDocument);
         }
@@ -286,6 +290,7 @@ function renderText(result: Result, note: SNote | BNote) {
     result.isEmpty = document.textContent?.trim().length === 0 && document.querySelectorAll("img").length === 0;
 
     if (!result.isEmpty) {
+        // Process attachment links.
         for (const linkEl of document.querySelectorAll("a")) {
             const href = linkEl.getAttribute("href");
 
@@ -299,6 +304,13 @@ function renderText(result: Result, note: SNote | BNote) {
             }
         }
 
+        // Apply syntax highlight.
+        for (const codeEl of document.querySelectorAll("pre code")) {
+            const highlightResult = highlightAuto(codeEl.innerText);
+            codeEl.innerHTML = highlightResult.value;
+            codeEl.classList.add("hljs");
+        }
+
         result.content = document.innerHTML ?? "";
 
         if (note.hasLabel("shareIndex")) {

packages/share-theme/src/scripts/index.ts

@@ -7,6 +7,7 @@ import setupMermaid from "./modules/mermaid";
 import setupMath from "./modules/math";
 import api from "./modules/api";
 import "boxicons/css/boxicons.min.css";
+import "highlight.js/styles/default.css";
 
 function $try<T extends (...a: unknown[]) => unknown>(func: T, ...args: Parameters<T>) {
     try {

packages/uikit/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@triliumnext/uikit",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@triliumnext/commons": "workspace:*",
+    "@triliumnext/highlightjs": "workspace:*",
+    "jquery": "3.7.1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "packageManager": "pnpm@10.18.3"
+}

pnpm-lock.yaml

@@ -480,6 +480,9 @@ importers:
       '@triliumnext/express-partial-content':
         specifier: workspace:*
         version: link:../../packages/express-partial-content
+      '@triliumnext/highlightjs':
+        specifier: workspace:*
+        version: link:../../packages/highlightjs
       '@triliumnext/turndown-plugin-gfm':
         specifier: workspace:*
         version: link:../../packages/turndown-plugin-gfm
@@ -1394,6 +1397,18 @@ importers:
         specifier: 0.0.3
         version: 0.0.3(bufferutil@4.0.9)(utf-8-validate@6.0.5)
 
+  packages/uikit:
+    dependencies:
+      '@triliumnext/commons':
+        specifier: workspace:*
+        version: link:../commons
+      '@triliumnext/highlightjs':
+        specifier: workspace:*
+        version: link:../highlightjs
+      jquery:
+        specifier: 3.7.1
+        version: 3.7.1
+
 packages:
 
   '@ampproject/remapping@2.3.0':