fix: yaml is correctly highlighted

deno.json

@@ -6,6 +6,7 @@
     "dev": "deno run -A --unstable --watch --no-check ./example/main.ts",
     "ok": "deno fmt --check && deno lint && deno task check:types && deno task test",
     "report": "deno coverage cov_profile --html",
+    "server": "deno run -A --watch=test/,mod.ts ./test/runTestServer.ts",
     "test": "deno test --allow-read --allow-env --allow-write --allow-run --allow-net"
   },
   "fmt": {

mod.ts

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

style/main.scss

@@ -61,6 +61,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);
   }

test/fixtures/yaml.html

@@ -0,0 +1,6 @@
+<div class="highlight highlight-source-yaml notranslate"><pre><span class="token key atrule">name</span><span class="token punctuation">:</span> test
+<span class="token key atrule">checks</span><span class="token punctuation">:</span>
+    <span class="token key atrule">prop</span><span class="token punctuation">:</span> <span class="token string">"a"</span>
+    <span class="token key atrule">list</span><span class="token punctuation">:</span>
+        <span class="token punctuation">-</span> first
+        <span class="token punctuation">-</span> second</pre></div>

test/fixtures/yaml.md

@@ -0,0 +1,8 @@
+```yaml
+name: test
+checks:
+    prop: "a"
+    list:
+        - first
+        - second
+```

test/runTestServer.ts

@@ -0,0 +1,2 @@
+import { startServer } from "./test_utils.ts";
+startServer();

test/server_test.ts

@@ -1,22 +1,8 @@
-import { assert } from "./test_deps.ts";
-import { render } from "../mod.ts";
-import { browserTest, setupHtmlWithCss } from "./test_utils.ts";
+import { assert, assertEquals } from "./test_deps.ts";
+import { browserTest } from "./test_utils.ts";
 
 Deno.test("basic md table with dollar signs", async () => {
-  const markdown = `| Fruit Name | Quantity | Unit Cost per Item | Subtotal |
-  |------------|----------|--------------------|----------|
-  | Apple      | 1        | $1.50              | $1.50    |
-  | Pear       | 2        | $2.00              | $4.00    |
-  | Orange     | 3        | $2.50              | $7.50    |
-  | Grape      | 60       | $0.05              | $3.00    |
-  | Total      |          |                    | $16.00   |`;
-
-  const body = render(markdown);
-  const html = setupHtmlWithCss(body);
-
-  await browserTest(html, async (page, address) => {
-    await page.goto(`${address}`);
-
+  await browserTest("basicMarkdownTable", async (page) => {
     await page.waitForSelector("table", { timeout: 1000 });
     const tableExists = await page.evaluate(() => {
       const table = document.querySelector("table");
@@ -91,3 +77,29 @@ Deno.test("basic md table with dollar signs", async () => {
     );
   });
 });
+
+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)",
+      );
+      if (element) {
+        return window.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)",
+      );
+      if (element) {
+        return window.getComputedStyle(element).color;
+      }
+      return null;
+    });
+    assertEquals(colonStyle, "rgb(102, 57, 186)");
+  });
+});

test/test.ts

@@ -283,3 +283,11 @@ Deno.test("expect console warning from invalid math", () => {
 
   console.warn = originalWarn;
 });
+
+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);
+});

test/test_utils.ts

@@ -1,12 +1,33 @@
 import { Page, puppeteer } from "./test_deps.ts";
-import { CSS } from "../mod.ts";
+import { CSS, render, RenderOptions } from "../mod.ts";
+
+type TestCase = {
+  markdown: string;
+  renderOptions?: RenderOptions;
+};
+
+export type TestCases = "basicMarkdownTable" | "yaml";
+
+export const testCases: Record<TestCases, TestCase> = {
+  "basicMarkdownTable": {
+    markdown: `| Fruit Name | Quantity | Unit Cost per Item | Subtotal |
+|------------|----------|--------------------|----------|
+| Apple      | 1        | $1.50              | $1.50    |
+| Pear       | 2        | $2.00              | $4.00    |
+| Orange     | 3        | $2.50              | $7.50    |
+| Grape      | 60       | $0.05              | $3.00    |
+| Total      |          |                    | $16.00   |`,
+  },
+  "yaml": {
+    markdown: Deno.readTextFileSync("./test/fixtures/yaml.md"),
+  },
+};
 
 export async function browserTest(
-  htmlContent: string,
-  fn: (page: Page, address: string) => Promise<void>,
-  port = 8000,
+  test: TestCases,
+  fn: (page: Page) => Promise<void>,
 ) {
-  const { serverProcess, address } = await startServer(htmlContent, port);
+  const { serverProcess, address } = await startServer();
 
   try {
     const browser = await puppeteer.launch({
@@ -16,7 +37,8 @@ export async function browserTest(
 
     try {
       const page = await browser.newPage();
-      await fn(page, address);
+      await page.goto(`${address}/${test}`);
+      await fn(page);
     } finally {
       await browser.close();
     }
@@ -25,22 +47,31 @@ export async function browserTest(
   }
 }
 
-function startServer(htmlContent: string, port: number) {
-  const serverProcess = Deno.serve({ port }, (_req) => {
+export function startServer() {
+  const serverProcess = Deno.serve((req) => {
+    const route = req.url.replace("http://localhost:8000/", "");
+    let body = "";
+    if (isTestCase(route)) {
+      const testCase = testCases[route];
+      body = render(testCase.markdown, testCase.renderOptions);
+    } else if (route === "") {
+      body = render(generateIndexMarkdown());
+    } else {
+      throw new Error("Invalid route specified");
+    }
+    const htmlContent = wrapBody(body);
+
     return new Response(htmlContent, {
       headers: { "Content-Type": "text/html" },
     });
   });
 
-  const hostname = "localhost";
-  const address = `http://${hostname}:${port}`;
-
-  console.log(`Server running at ${address}`);
+  const address = `http://localhost:8000`;
 
   return { serverProcess, address };
 }
 
-export function setupHtmlWithCss(bodyContent: string): string {
+function wrapBody(bodyContent: string) {
   return `<!DOCTYPE html>
   <html lang="en">
     <head>
@@ -62,3 +93,15 @@ export function setupHtmlWithCss(bodyContent: string): string {
   </html>
 `;
 }
+
+function generateIndexMarkdown() {
+  let markdown = "# Deno GFM Server Tests\n";
+  markdown += Object.keys(testCases).map((testCase) => {
+    return `- [${testCase}](http://localhost:8000/${testCase})`;
+  }).join("\n");
+  return markdown;
+}
+
+function isTestCase(route: string): route is TestCases {
+  return route in testCases;
+}