Add tests and CSS; fmt

Author: josh-collinsworth

example/content.md

@@ -70,12 +70,12 @@ G_{\mu v} = \frac{8 \pi G}{c^4} T_{\mu v}
 
 We also support math blocks and inline math blocks as well!
 
-When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
+When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$and they are
 
 $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 
-You can even typeset individual letters or whole sentences inline just like $x$
-or $Quadratic \; formula$. You can also use math blocks to typeset whole
+You can even typeset individual letters or whole sentences inline just like
+$x$or $Quadratic \; formula$. You can also use math blocks to typeset whole
 equations with $\LaTeX$:
 
 $$ \begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\

mod.ts

@@ -1,17 +1,17 @@
 import { emojify } from "emoji";
-import * as Marked from "marked";
 import GitHubSlugger from "github-slugger";
+import he from "he";
+import katex from "katex";
+import * as Marked from "marked";
 import markedAlert from "marked-alert";
 import markedFootnote from "marked-footnote";
 import { gfmHeadingId } from "marked-gfm-heading-id";
 import Prism from "prismjs";
 import sanitizeHtml from "sanitize-html";
-import he from "he";
-import katex from "katex";
 
+import "https://esm.sh/[email protected]/components/prism-yaml";
 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());
@@ -39,11 +39,7 @@ export class Renderer extends Marked.Renderer {
     this.#slugger = new GitHubSlugger();
   }
 
-  heading(
-    text: string,
-    level: 1 | 2 | 3 | 4 | 5 | 6,
-    raw: string,
-  ): string {
+  heading(text: string, level: 1 | 2 | 3 | 4 | 5 | 6, raw: string): string {
     const slug = this.#slugger.slug(raw);
     return `<h${level} id="${slug}"><a class="anchor" aria-hidden="true" tabindex="-1" href="#${slug}"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>${text}</h${level}>\n`;
   }
@@ -163,10 +159,11 @@ export function render(markdown: string, opts: RenderOptions = {}): string {
 
   const marked_opts = getOpts(opts);
 
-  const html =
-    (opts.inline
+  const html = (
+    opts.inline
       ? Marked.marked.parseInline(markdown, marked_opts)
-      : Marked.marked.parse(markdown, marked_opts)) as string;
+      : Marked.marked.parse(markdown, marked_opts)
+  ) as string;
 
   if (opts.disableHtmlSanitization) {
     return html;
@@ -241,6 +238,7 @@ export function render(markdown: string, opts: RenderOptions = {}): string {
       "notranslate",
       "markdown-alert",
       "markdown-alert-*",
+      "markdown-code-title",
     ],
     span: [
       "token",
@@ -322,18 +320,22 @@ export function render(markdown: string, opts: RenderOptions = {}): string {
     annotation: ["encoding"], // Only enabled when math is enabled
     details: ["open"],
     section: ["data-footnotes"],
-    input: ["checked", "disabled", {
-      name: "type",
-      values: ["checkbox"],
-    }],
+    input: [
+      "checked",
+      "disabled",
+      {
+        name: "type",
+        values: ["checkbox"],
+      },
+    ],
   };
 
   return sanitizeHtml(html, {
     transformTags: {
       img: transformMedia,
       video: transformMedia,
     },
-    allowedTags: [...defaultAllowedTags, ...opts.allowedTags ?? []],
+    allowedTags: [...defaultAllowedTags, ...(opts.allowedTags ?? [])],
     allowedAttributes: mergeAttributes(
       defaultAllowedAttributes,
       opts.allowedAttributes ?? {},
@@ -366,14 +368,12 @@ function stripTokens(
 
   for (const token of tokens) {
     if (token.type === "heading") {
-      sections[index].header = sections[index].header.trim().replace(
-        /\n{3,}/g,
-        "\n",
-      );
-      sections[index].content = sections[index].content.trim().replace(
-        /\n{3,}/g,
-        "\n",
-      );
+      sections[index].header = sections[index].header
+        .trim()
+        .replace(/\n{3,}/g, "\n");
+      sections[index].content = sections[index].content
+        .trim()
+        .replace(/\n{3,}/g, "\n");
 
       sections.push({ header: "", depth: token.depth, content: "" });
       index += 1;
@@ -498,20 +498,21 @@ export function stripSplitBySections(
   markdown: string,
   opts: RenderOptions = {},
 ): MarkdownSections[] {
-  markdown = emojify(markdown).replace(BLOCK_MATH_REGEXP, "").replace(
-    INLINE_MATH_REGEXP,
-    "",
-  );
+  markdown = emojify(markdown)
+    .replace(BLOCK_MATH_REGEXP, "")
+    .replace(INLINE_MATH_REGEXP, "");
   const tokens = Marked.marked.lexer(markdown, {
     ...getOpts(opts),
     tokenizer: new StripTokenizer(),
   });
 
-  const sections: MarkdownSections[] = [{
-    header: "",
-    depth: 0,
-    content: "",
-  }];
+  const sections: MarkdownSections[] = [
+    {
+      header: "",
+      depth: 0,
+      content: "",
+    },
+  ];
   stripTokens(tokens, sections, false);
 
   return sections;
@@ -521,7 +522,11 @@ export function stripSplitBySections(
  * Strip all markdown syntax to get a plaintext output
  */
 export function strip(markdown: string, opts: RenderOptions = {}): string {
-  return stripSplitBySections(markdown, opts).map((section) =>
-    section.header + "\n\n" + section.content
-  ).join("\n\n").trim().replace(/\n{3,}/g, "\n") + "\n";
+  return (
+    stripSplitBySections(markdown, opts)
+      .map((section) => section.header + "\n\n" + section.content)
+      .join("\n\n")
+      .trim()
+      .replace(/\n{3,}/g, "\n") + "\n"
+  );
 }

style/main.scss

@@ -19,7 +19,7 @@
     &[align="center"] {
       margin: 0 auto;
     }
-    
+
     display: inline;
   }
 
@@ -41,15 +41,15 @@
     padding-top: 2px;
     text-align: center;
   }
-  
+
   ol {
     list-style: decimal;
   }
-  
+
   ul {
     list-style: disc;
   }
-  
+
   table {
     width: fit-content;
   }
@@ -123,6 +123,16 @@
   }
 }
 
+.markdown-body .markdown-code-title {
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--borderColor-muted,var(--color-border-muted));
+  margin: 0;
+  font-size: 85%;
+  font-weight: bold;
+  display: block;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;

test/fixtures/footnote.md

@@ -22,24 +22,23 @@ blocks[^bignote].
 
 [^bignote]: The first paragraph of the definition.
 
-    Paragraph two of the definition.
+Paragraph two of the definition.
 
-    > A blockquote with
-    > multiple lines.
+> A blockquote with multiple lines.
 
-    ~~~
-    a code block
-    ~~~
+```
+a code block
+```
 
-    | Header 1 | Header 2 |
-    | -------- | -------- |
-    | Cell 1   | Cell 2   |
+| Header 1 | Header 2 |
+| -------- | -------- |
+| Cell 1   | Cell 2   |
 
-    A \`final\` paragraph before list.
+A \`final\` paragraph before list.
 
-    - Item 1
-    - Item 2
-      - Subitem 1
-      - Subitem 2
+- Item 1
+- Item 2
+  - Subitem 1
+  - Subitem 2
 
 [^@#$%]: A footnote on the label: "@#$%".