feat: customization of allowedClasses

mod.ts

@@ -112,6 +112,7 @@ export interface RenderOptions {
   allowMath?: boolean;
   disableHtmlSanitization?: boolean;
   renderer?: Renderer;
+  allowedClasses?: { [index: string]: boolean | Array<string | RegExp> };
 }
 
 export function render(markdown: string, opts: RenderOptions = {}): string {
@@ -199,6 +200,44 @@ export function render(markdown: string, opts: RenderOptions = {}): string {
     return { tagName, attribs };
   }
 
+  const defaultAllowedClasses = {
+    div: [
+      "highlight",
+      "highlight-source-*",
+      "notranslate",
+      "markdown-alert",
+      "markdown-alert-*",
+    ],
+    span: [
+      "token",
+      "keyword",
+      "operator",
+      "number",
+      "boolean",
+      "function",
+      "string",
+      "comment",
+      "class-name",
+      "regex",
+      "regex-delimiter",
+      "tag",
+      "attr-name",
+      "punctuation",
+      "script-punctuation",
+      "script",
+      "plain-text",
+      "property",
+      "prefix",
+      "line",
+      "deleted",
+      "inserted",
+      ...(opts.allowMath ? KATEX_CLASSES : []),
+    ],
+    a: ["anchor"],
+    p: ["markdown-alert-title"],
+    svg: ["octicon", "octicon-alert", "octicon-link"],
+  };
+
   return sanitizeHtml(html, {
     transformTags: {
       img: transformMedia,
@@ -236,43 +275,7 @@ export function render(markdown: string, opts: RenderOptions = {}): string {
       math: ["xmlns"], // Only enabled when math is enabled
       annotation: ["encoding"], // Only enabled when math is enabled
     },
-    allowedClasses: {
-      div: [
-        "highlight",
-        "highlight-source-*",
-        "notranslate",
-        "markdown-alert",
-        "markdown-alert-*",
-      ],
-      span: [
-        "token",
-        "keyword",
-        "operator",
-        "number",
-        "boolean",
-        "function",
-        "string",
-        "comment",
-        "class-name",
-        "regex",
-        "regex-delimiter",
-        "tag",
-        "attr-name",
-        "punctuation",
-        "script-punctuation",
-        "script",
-        "plain-text",
-        "property",
-        "prefix",
-        "line",
-        "deleted",
-        "inserted",
-        ...(opts.allowMath ? KATEX_CLASSES : []),
-      ],
-      a: ["anchor"],
-      p: ["markdown-alert-title"],
-      svg: ["octicon", "octicon-alert", "octicon-link"],
-    },
+    allowedClasses: { ...defaultAllowedClasses, ...opts.allowedClasses },
     allowProtocolRelative: false,
   });
 }

test/fixtures/customAllowedClasses.html

@@ -0,0 +1,7 @@
+<ul class="list-disc"><li>a</li>
+<li>b</li>
+<li>c</li>
+</ul><ol class="list-decimal"><li>a</li>
+<li>b</li>
+<li>c</li>
+</ol>

test/fixtures/customAllowedClasses.md

@@ -0,0 +1,7 @@
+- a
+- b
+- c
+
+1. a
+2. b
+3. c

test/test.ts

@@ -208,3 +208,27 @@ Deno.test("Math rendering in code block", () => {
   const html = render(markdown, { allowMath: true });
   assertEquals(html, expected);
 });
+
+Deno.test(
+  "custom allowed classes",
+  async () => {
+    const markdown = await Deno.readTextFile(
+      "./test/fixtures/customAllowedClasses.md",
+    );
+    const expected = await Deno.readTextFile(
+      "./test/fixtures/customAllowedClasses.html",
+    );
+    class CustomRenderer extends Renderer {
+      list(body: string, ordered: boolean): string {
+        const type = ordered ? "list-decimal" : "list-disc";
+        const tag = ordered ? "ol" : "ul";
+        return `<${tag} class="${type}">${body}</${tag}>`;
+      }
+    }
+    const html = render(markdown, {
+      renderer: new CustomRenderer({}),
+      allowedClasses: { ul: ["list-disc"], ol: ["list-decimal"] },
+    });
+    assertEquals(html, expected.trim());
+  },
+);