pantsdown 1.10.4 → 2.0.1

package/README.md

@@ -6,9 +6,6 @@
 Pantsdown is a **Markdown** to **HTML** converter. It attempts to render markdown similar to how GitHub does it plus
 some features developed specifically for [github-preview.nvim](https://github.com/wallpants/github-preview.nvim).
 
-If you need a feature that's supported by GitHub and is not already listed in the [Roadmap](#-roadmap),
-feel free to open an issue.
-
 ## [▶️ Demo](https://wallpants.github.io/pantsdown/)
 
 ## 📦 Installation
@@ -32,7 +29,9 @@ it's recommended you use a sanitization library like [DOMPurify](https://github.
 ### Styles
 
 For styles to be properly applied, either the element containing the generated html or one of its parents
-must have the classes `class="pantsdown light"` or `class="pantsdown dark"` added.
+must have the classes `class="pantsdown light"` or `class="pantsdown dark"` added. You can also add
+the class `"high-contrast"` to enable high-contrast themes `class="pantsdown dark high-contrast"` or
+`class="pantsdown light high-contrast"`.
 
 ### [Bun](https://bun.sh/)
 
@@ -74,16 +73,22 @@ import { useEffect } from "react";
 const pantsdown = new Pantsdown();
 
 function App() {
-    useEffect(() => {
-        const markdown = "# Hello world\n- [ ] Task 1\n- [x] Task 2";
-        const html = pantsdown.parse(markdown);
-        const container = document.getElementById("markdown-container");
-        if (container) container.innerHTML = html;
-    }, []);
-
-    // ⚠️ for styles to be applied, a parent element must have
-    // the classes "pantsdown light" or "pantsdown dark" added
-    return <div id="markdown-container" className="pantsdown light" />;
+  useEffect(() => {
+    const container = document.getElementById("markdown-container");
+    if (!container) return;
+
+    const markdown = "# Hello world\n- [ ] Task 1\n- [x] Task 2";
+    const { html, javascript } = pantsdown.parse(markdown);
+    container.innerHTML = html;
+
+    const newScript = document.createElement("script");
+    newScript.text = javascript;
+    container.appendChild(newScript);
+  }, []);
+
+  // ⚠️ for styles to be applied, a parent element must have
+  // the classes "pantsdown light" or "pantsdown dark" added
+  return <div id="markdown-container" className="pantsdown light" />;
 }
 
 export default App;
@@ -100,32 +105,32 @@ import { Pantsdown, type PartialPantsdownConfig } from "pantsdown";
 // This is the default config object. If you provide
 // a config object, it will be deeply merged into this.
 const config: PartialPantsdownConfig = {
-    renderer: {
-        /**
-         * Prefix to be added to relative image sources.
-         * Must start and end with "/"
-         *
-         * @example
-         * relativeImageUrlPrefix: "/__localimage__/"
-         *
-         * ![image](./wallpants-512.png)
-         * relative src is updated and results in:
-         * <img src="/__localimage__/wallpants-512.png" />
-         *
-         * ![image](https://avatars.githubusercontent.com/wallpants)
-         * absolute src remains unchanged:
-         * <img src="https://avatars.githubusercontent.com/wallpants" />
-         */
-        relativeImageUrlPrefix: "",
-
-        /**
-         * Whether to render <details> html tags with attribute open=""
-         *
-         * @default
-         * false
-         */
-        detailsTagDefaultOpen: false,
-    },
+  renderer: {
+    /**
+     * Prefix to be added to relative image sources.
+     * Must start and end with "/"
+     *
+     * @example
+     * relativeImageUrlPrefix: "/__localimage__/"
+     *
+     * ![image](./wallpants-512.png)
+     * relative src is updated and results in:
+     * <img src="/__localimage__/wallpants-512.png" />
+     *
+     * ![image](https://avatars.githubusercontent.com/wallpants)
+     * absolute src remains unchanged:
+     * <img src="https://avatars.githubusercontent.com/wallpants" />
+     */
+    relativeImageUrlPrefix: "",
+
+    /**
+     * Whether to render <details> html tags with attribute open=""
+     *
+     * @default
+     * false
+     */
+    detailsTagDefaultOpen: false,
+  },
 };
 
 const pantsdown = new Pantsdown(config);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pantsdown",
-  "version": "1.10.4",
+  "version": "2.0.1",
   "author": "wallpants",
   "description": "Markdown to 'GitHub HTML' parser",
   "license": "MIT",

package/src/css/styles.css

@@ -52,7 +52,7 @@
     --color-done-fg: #b780ff;
     --color-icon-directory: #f0f3f6;
     --color-icon-file: #7d8590;
-    --color-btn-bg: #7d8590;
+    --color-btn-bg: #272b33;
     --color-btn-border: #7a828e;
     --color-btn-hover-bg: #525964;
 }
@@ -190,10 +190,6 @@
     margin-bottom: 16px;
 }
 
-/* TODO: clean-up */
-/* .pantsdown .mermaid { */
-/* } */
-
 .pantsdown .octicon {
     display: inline-block;
     fill: currentColor;

package/src/{code-copy.ts → javascript.ts}

@@ -1,5 +1,5 @@
-export const codeCopyScript = `
-<script id="code-copy-script" type="module">
+export const javascript = `
+    /** code copy button */
     document.querySelectorAll("pre").forEach((pre) => {
         const firstElement = pre.firstElementChild;
         if (!firstElement || firstElement.tagName !== "CODE") return;
@@ -15,17 +15,21 @@ export const codeCopyScript = `
 
         pre.appendChild(copyButton);
         copyButton.addEventListener("click", () => {
-            navigator.clipboard.writeText(pre.firstChild.textContent)
-                .then(
-                    () => {
-                        copyButton.classList.add("success");
-                        setTimeout(() => {
-                            copyButton.classList.remove("success");
-                        }, 1000);
-                    }
-                );
+            if (!pre.firstChild?.textContent) {
+                return;
+            }
 
+            navigator.clipboard
+                .writeText(pre.firstChild.textContent)
+                .then(() => {
+                    copyButton.classList.add("success");
+                    setTimeout(() => {
+                        copyButton.classList.remove("success");
+                    }, 1000);
+                })
+                .catch(() => {
+                    //
+                });
         });
     });
-</script>
 `;

package/src/pantsdown.ts

@@ -1,5 +1,5 @@
 import GithubSlugger from "github-slugger";
-import { codeCopyScript } from "./code-copy.ts";
+import { javascript } from "./javascript.ts";
 import { Lexer } from "./lexer.ts";
 import { Parser } from "./parser.ts";
 import { type PantsdownConfig, type PartialPantsdownConfig } from "./types.ts";
@@ -38,13 +38,16 @@ export class Pantsdown {
     /**
      * Parse markdown string
      */
-    parse(src: string): string {
+    parse(src: string): { html: string; javascript: string } {
         // re-init slugger to avoid slug count from incorrectly incrementing
         // from previosly slugged headings
         this.parser.renderer.slugger = new GithubSlugger();
 
         const tokens = this.lexer.lex(src);
         const html = this.parser.parse(tokens);
-        return codeCopyScript + html;
+        return {
+            html,
+            javascript,
+        };
     }
 }