fix: more tweaks to improve remark compatibility (#109)

deer · web-flow · commit 4f1f29eed157 · 2024-02-17T02:08:28.000+01:00
diff --git a/mod.ts b/mod.ts
@@ -16,6 +16,16 @@ export { CSS, KATEX_CSS, Marked };
 Marked.marked.use(markedAlert());
 Marked.marked.use(gfmHeadingId());
 Marked.marked.use(markedFootnote());
+Marked.marked.use({
+  walkTokens: (token) => {
+    // putting a list inside a summary requires a double line break
+    // but we shouldn't keep that double line break in the output
+    // this doesn't happen in remark/rehype
+    if (token.type === "html" && token.text.endsWith("</summary>\n\n")) {
+      token.text = token.text.replace("</summary>\n\n", "</summary>\n");
+    }
+  },
+});
 
 export class Renderer extends Marked.Renderer {
   allowMath: boolean;
@@ -35,7 +45,7 @@ export class Renderer extends Marked.Renderer {
     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}>`;
+    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`;
   }
 
   image(src: string, title: string | null, alt: string) {
@@ -287,7 +297,7 @@ export function render(markdown: string, opts: RenderOptions = {}): string {
     h5: ["id"],
     h6: ["id"],
     li: ["id"],
-    td: ["colspan", "rowspan", "align"],
+    td: ["colspan", "rowspan", "align", "width"],
     iframe: ["src", "width", "height"], // Only used when iframe tags are allowed in the first place.
     math: ["xmlns"], // Only enabled when math is enabled
     annotation: ["encoding"], // Only enabled when math is enabled
diff --git a/test/fixtures/alerts.html b/test/fixtures/alerts.html
@@ -1,4 +1,5 @@
-<h1 id="alerts"><a class="anchor" aria-hidden="true" tabindex="-1" href="#alerts"><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>Alerts</h1><div class="markdown-alert markdown-alert-note">
+<h1 id="alerts"><a class="anchor" aria-hidden="true" tabindex="-1" href="#alerts"><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>Alerts</h1>
+<div class="markdown-alert markdown-alert-note">
 <p class="markdown-alert-title"><svg class="octicon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</p>
 <p>Highlights information that users should take into account, even when
 skimming.</p>
diff --git a/test/fixtures/basic.html b/test/fixtures/basic.html
@@ -1,4 +1,5 @@
-<h1 id="heading"><a class="anchor" aria-hidden="true" tabindex="-1" href="#heading"><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>Heading</h1><ul>
+<h1 id="heading"><a class="anchor" aria-hidden="true" tabindex="-1" href="#heading"><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>Heading</h1>
+<ul>
 <li>list1</li>
 <li>list2</li>
 <li>list3</li>
diff --git a/test/fixtures/detailsSummaryDel.html b/test/fixtures/detailsSummaryDel.html
@@ -1,11 +1,10 @@
 <p>Example</p>
-  <details open>
-  <summary>Shopping list</summary>
-
+<details open>
+<summary>Shopping list</summary>
 <ul>
 <li>Vegetables</li>
 <li>Fruits</li>
 <li>Fish</li>
 <li><del>tofu</del></li>
 </ul>
-  </details>
+</details>
diff --git a/test/fixtures/footnote.html b/test/fixtures/footnote.html
@@ -1,4 +1,5 @@
-<h1 id="example"><a class="anchor" aria-hidden="true" tabindex="-1" href="#example"><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>Example</h1><p>Here is a simple footnote<sup><a id="footnote-ref-1" href="#footnote-1" data-footnote-ref aria-describedby="footnote-label">1</a></sup>.
+<h1 id="example"><a class="anchor" aria-hidden="true" tabindex="-1" href="#example"><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>Example</h1>
+<p>Here is a simple footnote<sup><a id="footnote-ref-1" href="#footnote-1" data-footnote-ref aria-describedby="footnote-label">1</a></sup>.
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
diff --git a/test/fixtures/table.html b/test/fixtures/table.html
@@ -3,13 +3,13 @@
   </thead>
   <tbody>
     <tr>
-      <td align="center" rowspan="2">
-        <a href="https://www.npmjs.com/package/@51degrees/ua-parser-js">
+      <td align="center" width="200px" rowspan="2">
+        <a href="https://www.npmjs.com/package/@51degrees/ua-parser-js" rel="noopener noreferrer">
           <img src="images/51degrees.svg" alt="51degrees" width="75%" height="75%" />
         </a>
       </td>
-      <td align="left">
-        <a href="https://www.npmjs.com/package/@51degrees/ua-parser-js">↗ @51degrees/ua-parser-js</a>
+      <td align="left" width="400px">
+        <a href="https://www.npmjs.com/package/@51degrees/ua-parser-js" rel="noopener noreferrer">↗ @51degrees/ua-parser-js</a>
       </td>
       </tr>
     <tr>
@@ -19,13 +19,13 @@
         </p>
         <p>This package supports all device types including Apple and Android devices and can be used either in a browser (client-side) or Node.js environment (server-side).
         </p>
-        <p>Visit <a href="https://www.npmjs.com/package/@51degrees/ua-parser-js">↗ 51Degrees <u>UAParser</u> </a> to get started.
+        <p>Visit <a href="https://www.npmjs.com/package/@51degrees/ua-parser-js" rel="noopener noreferrer">↗ 51Degrees <u>UAParser</u> </a> to get started.
         </p>
       </td>
     </tr>
     <tr>
       <td colspan="2">
-        <a href="https://opencollective.com/ua-parser-js">↗ Become a sponsor</a>
+        <a href="https://opencollective.com/ua-parser-js" rel="noopener noreferrer">↗ Become a sponsor</a>
       </td>
     </tr>
   </tbody>
diff --git a/test/fixtures/table.md b/test/fixtures/table.md
@@ -4,12 +4,12 @@
   <tbody>
     <tr>
       <td align="center" width="200px" rowspan="2">
-        <a href="https://www.npmjs.com/package/@51degrees/ua-parser-js">
+        <a href="https://www.npmjs.com/package/@51degrees/ua-parser-js" rel="noopener noreferrer">
           <img src="images/51degrees.svg" alt="51degrees" width="75%" height="75%" >
         </a>
       </td>
       <td align="left" width="400px">
-        <a href="https://www.npmjs.com/package/@51degrees/ua-parser-js">↗ @51degrees/ua-parser-js</a>
+        <a href="https://www.npmjs.com/package/@51degrees/ua-parser-js" rel="noopener noreferrer">↗ @51degrees/ua-parser-js</a>
       </td>
       </tr>
     <tr>
@@ -19,13 +19,13 @@
         </p>
         <p>This package supports all device types including Apple and Android devices and can be used either in a browser (client-side) or Node.js environment (server-side).
         </p>
-        <p>Visit <a href="https://www.npmjs.com/package/@51degrees/ua-parser-js">↗ 51Degrees <u>UAParser</u> </a> to get started.
+        <p>Visit <a href="https://www.npmjs.com/package/@51degrees/ua-parser-js" rel="noopener noreferrer">↗ 51Degrees <u>UAParser</u> </a> to get started.
         </p>
       </td>
     </tr>
     <tr>
       <td colspan="2">
-        <a href="https://opencollective.com/ua-parser-js">↗ Become a sponsor</a>
+        <a href="https://opencollective.com/ua-parser-js" rel="noopener noreferrer">↗ Become a sponsor</a>
       </td>
     </tr>
   </tbody>
diff --git a/test/test.ts b/test/test.ts
@@ -296,7 +296,7 @@ Deno.test("render github-slugger not reused", function () {
   for (let i = 0; i < 2; i++) {
     const html = render("## Hello");
     const expected =
-      `<h2 id="hello"><a class="anchor" aria-hidden="true" tabindex="-1" href="#hello"><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>Hello</h2>`;
+      `<h2 id="hello"><a class="anchor" aria-hidden="true" tabindex="-1" href="#hello"><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>Hello</h2>\n`;
     assertEquals(html, expected);
   }
 });
@@ -338,21 +338,22 @@ Deno.test(
 Deno.test("details, summary, and del", () => {
   const markdown = `Example
 
-  <details open>
-  <summary>Shopping list</summary>
+<details open>
+<summary>Shopping list</summary>
 
-  * Vegetables
-  * Fruits
-  * Fish
-  * <del>tofu</del>
+* Vegetables
+* Fruits
+* Fish
+* <del>tofu</del>
 
-  </details>`;
+</details>
+`;
   const expected = Deno.readTextFileSync(
     "./test/fixtures/detailsSummaryDel.html",
   );
 
   const html = render(markdown);
-  assertEquals(html, expected.trim());
+  assertEquals(html, expected);
 });
 
 Deno.test("del tag test", () => {
@@ -366,7 +367,7 @@ Deno.test("del tag test", () => {
 Deno.test("h1 test", () => {
   const markdown = "# Hello";
   const result =
-    `<h1 id="hello"><a class="anchor" aria-hidden="true" tabindex="-1" href="#hello"><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>Hello</h1>`;
+    `<h1 id="hello"><a class="anchor" aria-hidden="true" tabindex="-1" href="#hello"><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>Hello</h1>\n`;
 
   const html = render(markdown);
   assertEquals(html, result);
@@ -389,3 +390,21 @@ Deno.test("task list", () => {
   const html = render(markdown);
   assertEquals(html, expected);
 });
+
+Deno.test("anchor test raw", () => {
+  const markdown =
+    `<a class="anchor" aria-hidden="true" tabindex="-1" href="#hello">foo</a>`;
+  const result =
+    `<p><a class="anchor" aria-hidden="true" tabindex="-1" href="#hello">foo</a></p>\n`;
+
+  const html = render(markdown);
+  assertEquals(html, result);
+});
+
+Deno.test("anchor test", () => {
+  const markdown = `[asdf](#hello)`;
+  const result = `<p><a href="#hello">asdf</a></p>\n`;
+
+  const html = render(markdown);
+  assertEquals(html, result);
+});
