fix: correctly handle yaml highlighting (#96)

Author: deer

mod.ts

@@ -11,6 +11,7 @@ import katex from "katex";
 
 import { CSS, KATEX_CLASSES, KATEX_CSS } from "./style.ts";
 export { CSS, KATEX_CSS, Marked };
+import "https://esm.sh/[email protected]/components/prism-yaml";
 
 Marked.marked.use(markedAlert());
 Marked.marked.use(gfmHeadingId());
@@ -254,6 +255,8 @@ export function render(markdown: string, opts: RenderOptions = {}): string {
       "line",
       "deleted",
       "inserted",
+      "key",
+      "atrule",
       ...(opts.allowMath ? KATEX_CLASSES : []),
     ],
     a: ["anchor"],

style.ts

@@ -75,6 +75,14 @@
     color: var(--color-prettylights-syntax-constant);
   }
 
+  &.atrule {
+    color: var(--color-prettylights-syntax-keyword);
+  }
+
+  &.punctuation {
+    color: var(--color-prettylights-syntax-entity);
+  }
+
   &.function {
     color: var(--color-prettylights-syntax-entity);
   }

style/main.scss

@@ -0,0 +1,18 @@
+<div class="highlight highlight-source-yaml notranslate"><pre><span class="token key atrule">doe</span><span class="token punctuation">:</span> <span class="token string">"a deer, a female deer"</span>
+<span class="token key atrule">ray</span><span class="token punctuation">:</span> <span class="token string">"a drop of golden sun"</span>
+<span class="token key atrule">pi</span><span class="token punctuation">:</span> <span class="token number">3.14159</span>
+<span class="token key atrule">xmas</span><span class="token punctuation">:</span> <span class="token boolean">true</span>
+<span class="token key atrule">french-hens</span><span class="token punctuation">:</span> <span class="token number">3</span>
+<span class="token key atrule">calling-birds</span><span class="token punctuation">:</span>
+  <span class="token punctuation">-</span> huey
+  <span class="token punctuation">-</span> dewey
+  <span class="token punctuation">-</span> louie
+  <span class="token punctuation">-</span> fred
+<span class="token key atrule">xmas-fifth-day</span><span class="token punctuation">:</span>
+  <span class="token key atrule">calling-birds</span><span class="token punctuation">:</span> four
+  <span class="token key atrule">french-hens</span><span class="token punctuation">:</span> <span class="token number">3</span>
+  <span class="token key atrule">golden-rings</span><span class="token punctuation">:</span> <span class="token number">5</span>
+  <span class="token key atrule">partridges</span><span class="token punctuation">:</span>
+    <span class="token key atrule">count</span><span class="token punctuation">:</span> <span class="token number">1</span>
+    <span class="token key atrule">location</span><span class="token punctuation">:</span> <span class="token string">"a pear tree"</span>
+  <span class="token key atrule">turtle-doves</span><span class="token punctuation">:</span> two</pre></div>

test/fixtures/yaml.html

@@ -0,0 +1,20 @@
+```yaml
+doe: "a deer, a female deer"
+ray: "a drop of golden sun"
+pi: 3.14159
+xmas: true
+french-hens: 3
+calling-birds:
+  - huey
+  - dewey
+  - louie
+  - fred
+xmas-fifth-day:
+  calling-birds: four
+  french-hens: 3
+  golden-rings: 5
+  partridges:
+    count: 1
+    location: "a pear tree"
+  turtle-doves: two
+```

test/fixtures/yaml.md

@@ -152,3 +152,29 @@ Deno.test("footnote with style", async () => {
     assertEquals(footnoteStyle, "rgb(31, 35, 40)");
   });
 });
+
+Deno.test("yaml style", async () => {
+  await browserTest("yaml", async (page) => {
+    const nameStyle = await page.evaluate(() => {
+      const element = document.querySelector(
+        "body > main > div > pre > span:nth-child(1)", // doe in the first line
+      );
+      if (element) {
+        return globalThis.getComputedStyle(element).color;
+      }
+      return null;
+    });
+    assertEquals(nameStyle, "rgb(207, 34, 46)");
+
+    const colonStyle = await page.evaluate(() => {
+      const element = document.querySelector(
+        "body > main > div > pre > span:nth-child(2)", // : in the first line
+      );
+      if (element) {
+        return globalThis.getComputedStyle(element).color;
+      }
+      return null;
+    });
+    assertEquals(colonStyle, "rgb(102, 57, 186)");
+  });
+});

test/server_test.ts

@@ -440,3 +440,11 @@ Deno.test("example file", () => {
   assertEquals(strip(markdown), expectedStrip);
   assertEquals(stripSplitBySections(markdown), expectedJSON);
 });
+
+Deno.test("yaml unit", () => {
+  const markdown = Deno.readTextFileSync("./test/fixtures/yaml.md");
+  const expected = Deno.readTextFileSync("./test/fixtures/yaml.html");
+
+  const html = render(markdown);
+  assertEquals(html, expected.trim());
+});

test/test.ts

@@ -9,7 +9,7 @@ type TestCase = {
   renderOptions?: RenderOptions;
 };
 
-export type TestCases = "basicMarkdownTable" | "footnotes";
+export type TestCases = "basicMarkdownTable" | "footnotes" | "yaml";
 
 export const testCases: Record<TestCases, TestCase> = {
   "basicMarkdownTable": {
@@ -24,6 +24,9 @@ export const testCases: Record<TestCases, TestCase> = {
   "footnotes": {
     markdown: Deno.readTextFileSync("./test/fixtures/footnote.md"),
   },
+  "yaml": {
+    markdown: Deno.readTextFileSync("./test/fixtures/yaml.md"),
+  },
 };
 
 export async function browserTest(