feat: configure Light Owl and Night Owl for syntax highlighting (#110)

package.json

@@ -37,6 +37,7 @@
     "execa": "^9.3.0",
     "linkedom": "^0.18.4",
     "new-github-issue-url": "^1.0.0",
+    "night-owl": "github:sdras/night-owl-vscode-theme",
     "shiki": "^1.11.0"
   },
   "devDependencies": {

src/_transforms/syntax-highlight.js

@@ -1,17 +1,32 @@
+import { readFile } from "fs/promises";
 import { parseHTML } from "linkedom";
-import { codeToHtml } from "shiki";
+import { bundledLanguages, createHighlighter } from "shiki";
 
 export default async function (content) {
     if (this.page.outputPath && this.page.outputPath.includes(".html")) {
         const { document } = parseHTML(content);
         const codeBlocks = [...document.querySelectorAll("pre code")];
 
+        const lightOwl = JSON.parse(await readFile(new URL("./../../node_modules/night-owl/themes/Night Owl-Light-color-theme-noitalic.json", import.meta.url)));
+
+        lightOwl.name = "light-owl";
+
+        const highlighter = await createHighlighter({
+            themes: [lightOwl, "night-owl"],
+            langs: Object.keys(bundledLanguages)
+        });
+
         if (codeBlocks.length > 0) {
             for (const codeBlock of codeBlocks) {
                 const lang = codeBlock.className.replace("language-", "");
-                const html = await codeToHtml(codeBlock.textContent, {
+
+                const html = highlighter.codeToHtml(codeBlock.textContent, {
                     lang,
-                    theme: "night-owl"
+                    themes: {
+                        dark: "night-owl",
+                        light: "light-owl"
+                    },
+                    defaultColor: false
                 });
 
                 codeBlock.parentNode.outerHTML = html;

src/assets/styles/report.css

@@ -161,12 +161,26 @@ code {
 	font-size: 0.875rem;
 }
 
-pre.shiki {
+.shiki {
 	border-radius: 0.25rem;
 	padding-block: 0.5em;
 	padding-inline: 1em;
 }
 
+.shiki,
+.shiki span {
+	background-color: var(--shiki-light-bg);
+	color: var(--shiki-light);
+}
+
+@media (prefers-color-scheme: dark) {
+	.shiki,
+	.shiki span {
+		background-color: var(--shiki-dark-bg);
+		color: var(--shiki-dark);
+	}
+}
+
 [aria-expanded] {
 	appearance: none;
 	background: transparent;