@md-plugins/md-plugin-codeblocks 0.1.0-alpha.1 → 0.1.0-alpha.10

package/LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2024-present, Jeff Galbraith
+Copyright (c) 2024-present, MD-PLUGINS
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -29,25 +29,25 @@ pnpm add @md-plugins/md-plugin-codeblocks
 ### Basic Setup
 
 ```js
-import MarkdownIt from 'markdown-it';
-import { codeblocksPlugin } from '@md-plugins/md-plugin-codeblocks';
+import MarkdownIt from 'markdown-it'
+import { codeblocksPlugin } from '@md-plugins/md-plugin-codeblocks'
 
-const md = new MarkdownIt();
+const md = new MarkdownIt()
 md.use(codeblocksPlugin, {
   containerComponent: 'MarkdownPrerender',
   copyButtonComponent: '<MarkdownCopyButton',
   preClass: 'markdown-code',
   pageScripts: [
-    "import MarkdownPrerender from 'src/components/md/MarkdownPrerender'",
-    "import MarkdownCopyButton from 'src/components/md/MarkdownCopyButton.vue'",
+    "import MarkdownPrerender from 'src/.q-press/components/MarkdownPrerender'",
+    "import MarkdownCopyButton from 'src/.q-press/components/MarkdownCopyButton.vue'",
   ],
-});
+})
 ```
 
 ## Example Markdown Input
 
 ```javascript
-console.log('Hello, world!');
+console.log('Hello, world!')
 ```
 
 ### Example Output
@@ -81,7 +81,6 @@ The `md-plugin-codeblocks` plugin supports the following options:
 | copyButtonComponent | string | 'markdown-copy-button' | Custom copy button component.                                  |
 | preClass            | string | 'markdown-code'        | CSS class for the `<pre>` element.                             |
 | codeClass           | string | ''                     | CSS class for the `<code>` element.                            |
-| linePrefixClass     | string | 'line-'                | Prefix for classes used in line annotations.                   |
 | tabPanelTagName     | string | 'q-tab-panel'          | Tag name for the tab panels.                                   |
 | tabPanelTagClass    | string | 'q-pa-none'            | CSS class for the tab panels.                                  |
 
@@ -91,55 +90,56 @@ The `md-plugin-codeblocks` plugin supports the following options:
 
 The plugin supports magic comments for inline annotations:
 
+````markup
 ```js [numbered]
 // All lines will be numbered
-console.log('Line 1');
-console.log('Line 2');
-console.log('Line 3');
+console.log('Line 1')
+console.log('Line 2')
+console.log('Line 3')
 ```
+````
 
 ### Line Highlighting and Annotations
 
-````markdown
+````markup
 ```js [highlight=2]
-console.log('Line 1');
-console.log('Line 2'); // This line will be highlighted
-console.log('Line 3');
+console.log('Line 1')
+console.log('Line 2') // This line will be highlighted
+console.log('Line 3')
 ```
 ````
 
-````markdown
+````markup
 ```js
-console.log('Line 1');
-console.log('Line 2');
-[[highlight]]; // This line will be highlighted
-console.log('Line 3');
+console.log('Line 1')
+console.log('Line 2') [[highlight]] // This line will be highlighted
+console.log('Line 3')
 ```
 ````
 
-````markdown
+````markup
 ```js [add=2]
-console.log('Line 1');
-console.log('Line 2'); // This line will be accented and prefixed with a '+'
-console.log('Line 3');
+console.log('Line 1')
+console.log('Line 2') // This line will be accented and prefixed with a '+'
+console.log('Line 3')
 ```
 ````
 
-````markdown
+````markup
 ```js [rem=2]
-console.log('Line 1');
-console.log('Line 2'); // This line will be accented and prefixed with a '-'
-console.log('Line 3');
+console.log('Line 1')
+console.log('Line 2') // This line will be accented and prefixed with a '-'
+console.log('Line 3')
 ```
 ````
 
 #### Combining Annotations
 
-````markdown
+````markup
 ```js [numbered highlight=1 rem=2 add=3]
-console.log('Line 1'); // This line will be highlighted
-console.log('Line 2'); // This line will be accented and prefixed with a '-'
-console.log('Line 3'); // This line will be accented and prefixed
+console.log('Line 1') // This line will be highlighted
+console.log('Line 2') // This line will be accented and prefixed with a '-'
+console.log('Line 3') // This line will be accented and prefixed
 ```
 ````
 
@@ -147,7 +147,7 @@ console.log('Line 3'); // This line will be accented and prefixed
 
 Additonally, with the exception of `numbered`, you can use ranges to annotate multiple lines:
 
-```markdown
+```markup
 [highlight=1,10-11 add=4,7-9 rem=12-14]
 ```
 
@@ -155,7 +155,7 @@ Additonally, with the exception of `numbered`, you can use ranges to annotate mu
 
 Easily create tabbed interfaces for multiple code examples:
 
-````markdown
+````markup
 ```tabs
 <<|js Tab 1|>>
 console.log('Hello from Tab 1');
@@ -173,6 +173,10 @@ Run the unit tests with `Vitest`:
 pnpm test
 ```
 
+## Documentation
+
+In case this README falls out of date, please refer to the [documentation](https://md-plugins.netlify.app/md-plugins/codeblocks/overview) for the latest information.
+
 ## License
 
 This project is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for details.

package/dist/index.d.mts

@@ -1,5 +1,10 @@
 import { PluginWithOptions } from 'markdown-it';
 
+interface Lang {
+    name: string;
+    customCopy?: boolean;
+    aliases?: string;
+}
 interface CodeblockPluginOptions {
     /**
      * The default language to use if none is detected.
@@ -26,27 +31,14 @@ interface CodeblockPluginOptions {
      * @default 'q-pa-none'
      */
     tabPanelTagClass?: string;
-    /**
-     * The class to be used for the line added.
-     * @default 'line-add'
-     */
-    lineAddClass?: string;
-    /**
-     * The prefix to be used for magic classes.
-     * The 3 magic classes are `add`, `rem`, and `highlight`.
-     * Classes in your code are then prefixed with this prefix.
-     * @default 'line-'
-     * The final class names would be: `line-add`, `line-rem`, `line-highlight`.
-     */
-    linePrefixClass?: string;
     /**
      * The class to be used for the pre tag.
-     * @default 'markdown-pre'
+     * @default 'markdown-code'
      */
     preClass?: string;
     /**
      * The class to be used for the code tag (ok to be empty).
-     * @default 'markdown-code'
+     * @default ''
      */
     codeClass?: string;
     /**
@@ -57,11 +49,7 @@ interface CodeblockPluginOptions {
      * Optional Prism languages configuration array. This allows you to override or add custom language definitions.
      * Each item can have a `name`, optional `aliases`, and `customCopy` boolean.
      */
-    langList?: Array<{
-        name: string;
-        aliases?: string;
-        customCopy?: boolean;
-    }>;
+    langList?: Lang[];
 }
 declare module '@md-plugins/shared' {
     interface MarkdownItEnv {
@@ -74,4 +62,4 @@ declare module '@md-plugins/shared' {
 
 declare const codeblocksPlugin: PluginWithOptions<CodeblockPluginOptions>;
 
-export { type CodeblockPluginOptions, codeblocksPlugin };
+export { type CodeblockPluginOptions, type Lang, codeblocksPlugin };

package/dist/index.d.ts

@@ -1,5 +1,10 @@
 import { PluginWithOptions } from 'markdown-it';
 
+interface Lang {
+    name: string;
+    customCopy?: boolean;
+    aliases?: string;
+}
 interface CodeblockPluginOptions {
     /**
      * The default language to use if none is detected.
@@ -26,27 +31,14 @@ interface CodeblockPluginOptions {
      * @default 'q-pa-none'
      */
     tabPanelTagClass?: string;
-    /**
-     * The class to be used for the line added.
-     * @default 'line-add'
-     */
-    lineAddClass?: string;
-    /**
-     * The prefix to be used for magic classes.
-     * The 3 magic classes are `add`, `rem`, and `highlight`.
-     * Classes in your code are then prefixed with this prefix.
-     * @default 'line-'
-     * The final class names would be: `line-add`, `line-rem`, `line-highlight`.
-     */
-    linePrefixClass?: string;
     /**
      * The class to be used for the pre tag.
-     * @default 'markdown-pre'
+     * @default 'markdown-code'
      */
     preClass?: string;
     /**
      * The class to be used for the code tag (ok to be empty).
-     * @default 'markdown-code'
+     * @default ''
      */
     codeClass?: string;
     /**
@@ -57,11 +49,7 @@ interface CodeblockPluginOptions {
      * Optional Prism languages configuration array. This allows you to override or add custom language definitions.
      * Each item can have a `name`, optional `aliases`, and `customCopy` boolean.
      */
-    langList?: Array<{
-        name: string;
-        aliases?: string;
-        customCopy?: boolean;
-    }>;
+    langList?: Lang[];
 }
 declare module '@md-plugins/shared' {
     interface MarkdownItEnv {
@@ -74,4 +62,4 @@ declare module '@md-plugins/shared' {
 
 declare const codeblocksPlugin: PluginWithOptions<CodeblockPluginOptions>;
 
-export { type CodeblockPluginOptions, codeblocksPlugin };
+export { type CodeblockPluginOptions, type Lang, codeblocksPlugin };

package/dist/index.mjs

@@ -13,8 +13,8 @@ const defaultLangList = [
   { name: "xml" },
   { name: "nginx" },
   { name: "html" },
-  // special grammars:
   { name: "diff" }
+  // special grammars
 ];
 const codeblocksPlugin = (md, {
   defaultLang = "markup",
@@ -22,70 +22,43 @@ const codeblocksPlugin = (md, {
   copyButtonComponent = "MarkdownCopyButton",
   preClass = "markdown-code",
   codeClass = "",
-  linePrefixClass = "line-",
   tabPanelTagName = "q-tab-panel",
   tabPanelTagClass = "q-pa-none",
   pageScripts = [
-    "import MarkdownPrerender from 'src/components/md/MarkdownPrerender'",
+    "import MarkdownPrerender from 'src/.q-press/components/MarkdownPrerender'",
     // ts file
-    "import MarkdownCopyButton from 'src/components/md/MarkdownCopyButton.vue'"
+    "import MarkdownCopyButton from 'src/.q-press/components/MarkdownCopyButton.vue'"
   ],
   langList = defaultLangList
 } = {}) => {
-  const customCopyLangList = langList.filter((l) => l.customCopy).map((l) => l.name);
+  const customCopyLangList = langList.filter((l) => l.customCopy === true).map((l) => l.name);
   loadLanguages(langList.map((l) => l.name));
   const langMatch = langList.map((l) => l.aliases || l.name).join("|");
   const definitionLineRE = new RegExp(
-    `^(?<lang>(tabs|${langMatch}))(\\s+\\[(?<attrs>[^\\]]+)\\])?(\\s+(?<title>.+))?$`
+    `^(?<lang>(tabs|${langMatch}))(\\s+\\[(?<attrs>.*)\\])?(\\s+(?<title>.+))?$`
   );
   const tabsLineRE = new RegExp(
-    `^<<\\|\\s*(?<lang>${langMatch})(?:\\s+\\[(?<attrs>[^\\]]+)\\])?(?:\\s+(?<title>.+?))?\\s*\\|>>$`
-    // ends with "|>>" + optional spaces
+    `^<<\\|\\s+(?<lang>${langMatch})(\\s+\\[(?<attrs>.*)\\])?(\\s+(?<title>.+))?\\s*\\|>>$`
   );
-  const magicCommentList = ["highlight", "rem", "add"];
-  const magicCommentRE = new RegExp(
-    ` *\\[\\[! (?<type>(${magicCommentList.join("|")}))\\]\\] *`
-  );
-  const magicCommentGlobalRE = new RegExp(magicCommentRE, "g");
-  function parseAttrs(rawAttrs) {
-    if (rawAttrs === null) return {};
-    const acc = {};
-    const attrList = rawAttrs.split(/\s+/);
-    for (const attr of attrList) {
-      const [key, value] = attr.split("=");
-      if (key !== void 0) {
-        const normalizedValue = value !== void 0 ? value.trim().replace(/^['"]|['"]$/g, "") : true;
-        acc[key.trim()] = normalizedValue;
-      }
-    }
-    return acc;
-  }
   function extractTabs(content) {
     const list = [];
     const tabMap = {};
     let currentTabName = null;
-    for (const line of content.split("\n").map((line2) => line2.trim())) {
-      if (line.startsWith("<<|")) {
-        const tabsMatch = line.match(tabsLineRE);
-        if (tabsMatch !== null) {
-          const { groups } = tabsMatch;
-          const lang = groups?.lang;
-          const attrs = groups?.attrs;
-          const title = groups?.title;
-          currentTabName = title?.trim() || `Tab ${list.length + 1}`;
-          if (currentTabName) {
-            list.push(currentTabName);
-            tabMap[currentTabName] = {
-              attrs: {
-                ...parseAttrs(attrs?.trim() || null),
-                lang
-              },
-              content: []
-            };
-          }
-        }
+    for (const line of content.split("\n")) {
+      const tabsMatch = line.match(tabsLineRE);
+      if (tabsMatch !== null) {
+        const { lang, attrs, title } = tabsMatch.groups || {};
+        currentTabName = title?.trim() || `Tab ${list.length + 1}`;
+        list.push(currentTabName);
+        tabMap[currentTabName] = {
+          attrs: {
+            ...parseAttrs(attrs?.trim() || null),
+            lang
+          },
+          content: []
+        };
       } else if (currentTabName !== null) {
-        tabMap[currentTabName]?.content.push(line);
+        tabMap[currentTabName].content.push(line);
       }
     }
     if (list.length === 0) return;
@@ -93,13 +66,13 @@ const codeblocksPlugin = (md, {
       param: `[ ${list.map((tab) => `'${tab}'`).join(", ")} ]`,
       content: list.map((tabName) => {
         const props = tabMap[tabName];
-        if (props) {
-          return `<${tabPanelTagName} class="${tabPanelTagClass}" name="${tabName}">` + getHighlightedContent(props.content.join("\n"), props.attrs) + `</${tabPanelTagName}>`;
-        }
-        return "";
+        return `<${tabPanelTagName} class="${tabPanelTagClass}" name="${tabName}">` + getHighlightedContent(props.content.join("\n"), props.attrs) + `</${tabPanelTagName}>`;
       }).join("\n")
     };
   }
+  const magicCommentList = ["highlight", "rem", "add"];
+  const magicCommentRE = new RegExp(` *\\[\\[! (?<type>(${magicCommentList.join("|")}))\\]\\] *`);
+  const magicCommentGlobalRE = new RegExp(magicCommentRE, "g");
   function extractCodeLineProps(lines, attrs) {
     const acc = {};
     for (const type of magicCommentList) {
@@ -107,9 +80,9 @@ const codeblocksPlugin = (md, {
     }
     lines.forEach((line, lineIndex) => {
       const match = line.match(magicCommentRE);
-      if (match !== null && match.groups) {
-        const { type } = match.groups;
-        if (type && type in acc) {
+      if (match !== null) {
+        const type = match.groups?.type;
+        if (type !== void 0) {
           acc[type].push("" + (lineIndex + 1));
         }
       }
@@ -117,94 +90,89 @@ const codeblocksPlugin = (md, {
     return acc;
   }
   function parseCodeLine(content, attrs) {
-    const normalized = content.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
-    const lines = normalized.split("\n");
+    const lines = content.split("\n");
+    const acc = lines.map(() => ({
+      prefix: [],
+      classList: []
+    }));
+    if (attrs.lang === "markup") {
+      return acc;
+    }
     const props = extractCodeLineProps(lines, attrs);
-    const acc = lines.map(() => ({ prefix: [], classList: [] }));
-    const hasRemOrAdd = (props.rem?.length || 0) > 0 || (props.add?.length || 0) > 0;
+    const hasRemOrAdd = props.rem.length !== 0 || props.add.length !== 0;
     for (const type of magicCommentList) {
       const target = props[type];
-      if (target) {
-        for (const value of target) {
-          const [fromStr, toStr] = value.split("-");
-          const from = parseInt(String(fromStr), 10);
-          const to = toStr ? parseInt(toStr, 10) : from;
-          if (!isNaN(from) && !isNaN(to)) {
-            for (let i = from; i <= to; i++) {
-              if (acc[i - 1]) {
-                acc[i - 1].classList.push(`${linePrefixClass}${type}`);
-              }
-            }
-          }
+      for (const value of target) {
+        let [from, to] = value.split("-").map((i) => parseInt(i, 10));
+        if (to === void 0) to = from;
+        for (let i = from; i <= to; i++) {
+          acc[i - 1].classList.push(`line-${type}`);
         }
       }
     }
     if (attrs.numbered === true) {
-      const lineCount = String(lines.length).length;
+      const lineCount = ("" + lines.length).length;
       lines.forEach((_, lineIndex) => {
-        if (acc[lineIndex]) {
-          acc[lineIndex].prefix.push(
-            String(lineIndex + 1).padStart(lineCount, " ")
-          );
-        }
-      });
-    }
-    if (hasRemOrAdd) {
-      lines.forEach((_, lineIndex) => {
-        const target = acc[lineIndex];
-        if (target) {
-          target.prefix.push(
-            target.classList.includes(`${linePrefixClass}add`) ? "+" : target.classList.includes(`${linePrefixClass}rem`) ? "-" : " "
-          );
-        }
+        acc[lineIndex].prefix.push(("" + (lineIndex + 1)).padStart(lineCount, " "));
       });
     }
+    hasRemOrAdd === true && lines.forEach((_, lineIndex) => {
+      const target = acc[lineIndex];
+      target.prefix.push(
+        target.classList.includes(`line-add`) === true ? "+" : target.classList.includes(`line-rem`) === true ? "-" : " "
+      );
+    });
     return acc;
   }
+  function renderCodeBlock(html, codeClass2) {
+    return `<code${codeClass2 ? ` class="${codeClass2}"` : ""}>${html}</code>`;
+  }
   function getHighlightedContent(rawContent, attrs) {
-    const { lang = defaultLang, maxheight } = attrs;
-    const content = rawContent.trim();
+    const { lang, maxheight } = attrs;
+    let content = rawContent.trim();
     const lineList = parseCodeLine(content, attrs);
-    const grammar = prism.languages[lang || defaultLang];
-    const html = prism.highlight(content.replace(magicCommentGlobalRE, ""), grammar, lang).split("\n").map((line, lineIndex) => {
+    if (lang !== "markup") {
+      content = content.trim().replace(magicCommentGlobalRE, "");
+    }
+    const html = prism.highlight(content, prism.languages[lang], lang).split("\n").map((line, lineIndex) => {
       const target = lineList[lineIndex];
       let lineHtml = "";
-      if (target) {
-        if (target.classList.length !== 0) {
-          lineHtml += `<span class="c-line ${target.classList.join(" ")}"></span>`;
-        }
-        if (target.prefix.length !== 0) {
-          lineHtml += `<span class="c-lpref">${target.prefix.join(" ")}</span>`;
-        }
-      }
+      lineHtml += target.classList.length !== 0 ? `<span class="c-line ${target.classList.join(" ")}"></span>` : "";
+      lineHtml += target.prefix.length !== 0 ? `<span class="c-lpref">${target.prefix.join(" ")}</span>` : "";
       lineHtml += line;
       return lineHtml;
     }).join("\n");
     const langClass = lang === "css" ? " language-css" : ` language-${lang}`;
     const preAttrs = maxheight !== void 0 ? ` style="max-height:${maxheight}"` : "";
     const langProp = customCopyLangList.includes(lang) === true ? ` lang="${lang}"` : "";
-    const results = `<pre v-pre class="${preClass}${langClass}"${preAttrs}><code${codeClass ? ` class="${codeClass}"` : ""}>${!!grammar ? html : rawContent}</code></pre>` + (copyButtonComponent ? `<${copyButtonComponent} ${langProp} />` : "");
-    return results;
+    return `<pre v-pre class="${preClass}${langClass}"${preAttrs}>` + renderCodeBlock(html, codeClass) + `</pre><${copyButtonComponent}${langProp} />`;
+  }
+  function parseAttrs(rawAttrs) {
+    if (rawAttrs === null) return {};
+    const acc = {};
+    const attrList = rawAttrs.split(/\s+/);
+    for (const attr of attrList) {
+      const [key, value] = attr.split("=");
+      acc[key.trim()] = value?.trim() || true;
+    }
+    return acc;
   }
   function parseDefinitionLine(token) {
     const match = token.info.trim().match(definitionLineRE);
     if (match === null) {
       return {
-        lang: defaultLang,
+        lang: "markup",
         title: null
       };
     }
-    const { groups } = match;
+    const { lang, attrs, title } = match.groups || {};
     const acc = {
-      ...parseAttrs(groups?.attrs?.trim() || null),
-      lang: groups?.lang || defaultLang,
-      title: groups?.title?.trim() || null
+      ...parseAttrs(attrs?.trim() || null),
+      lang,
+      title: title?.trim() || null
     };
     if (acc.lang === "tabs") {
-      const tabs = extractTabs(token.content);
-      if (tabs) {
-        acc.tabs = tabs;
-      }
+      acc.tabs = extractTabs(token.content);
     }
     return acc;
   }
@@ -213,16 +181,17 @@ const codeblocksPlugin = (md, {
     if (!token) {
       return "";
     }
-    const attrs = parseDefinitionLine(token);
+    if (token.info === "") {
+      token.info = defaultLang;
+    }
     if (pageScripts.length > 0) {
-      if (!env.pageScripts) {
-        env.pageScripts = /* @__PURE__ */ new Set();
-      }
+      env.pageScripts = env.pageScripts || /* @__PURE__ */ new Set();
       for (const script of pageScripts) {
         env.pageScripts.add(script);
       }
     }
-    return `<${containerComponent}${attrs.title !== null ? ` title="${attrs.title}"` : ""}${"tabs" in attrs && attrs.tabs !== void 0 ? ` :tabs="${attrs.tabs.param}"` : ""}>` + ("tabs" in attrs && attrs.tabs !== void 0 ? attrs.tabs.content : getHighlightedContent(token.content, attrs)) + `</${containerComponent}>`;
+    const attrs = parseDefinitionLine(token);
+    return `<${containerComponent}${attrs.title !== null ? ` title="${attrs.title}"` : ""}${attrs.tabs !== void 0 ? ` :tabs="${attrs.tabs.param}"` : ""}>` + (attrs.tabs !== void 0 ? attrs.tabs.content : getHighlightedContent(token.content, attrs)) + `</${containerComponent}>`;
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@md-plugins/md-plugin-codeblocks",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.10",
   "description": "A markdown-it plugin for code blocks.",
   "keywords": [
     "markdown-it",
@@ -35,7 +35,7 @@
   "dependencies": {
     "markdown-it": "^14.1.0",
     "prismjs": "^1.29.0",
-    "@md-plugins/shared": "0.1.0-alpha.1"
+    "@md-plugins/shared": "0.1.0-alpha.10"
   },
   "publishConfig": {
     "access": "public"
@@ -44,9 +44,13 @@
     "@types/markdown-it": "^14.1.2",
     "@types/prismjs": "^1.26.5"
   },
+  "peerDependencies": {
+    "markdown-it": "^14.1.0",
+    "prismjs": "^1.29.0"
+  },
   "scripts": {
     "build": "unbuild",
-    "clean": "rm -rf dist",
+    "clean": "rm -rf dist/ node_modules/",
     "test": "vitest"
   }
 }