@md-plugins/md-plugin-codeblocks 0.1.0-alpha.8 → 0.1.0-beta.0

package/README.md

@@ -16,12 +16,12 @@ A **Markdown-It** plugin that enhances code block rendering by providing syntax
 Install the plugin via your preferred package manager:
 
 ```bash
-# With npm:
-npm install @md-plugins/md-plugin-codeblocks
-# Or with Yarn:
-yarn add @md-plugins/md-plugin-codeblocks
-# Or with pnpm:
+# with pnpm:
 pnpm add @md-plugins/md-plugin-codeblocks
+# with Yarn:
+yarn add @md-plugins/md-plugin-codeblocks
+# with npm:
+npm install @md-plugins/md-plugin-codeblocks
 ```
 
 ## Usage
@@ -90,12 +90,14 @@ 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')
 ```
+````
 
 ### Line Highlighting and Annotations
 
@@ -171,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

@@ -62,4 +62,5 @@ declare module '@md-plugins/shared' {
 
 declare const codeblocksPlugin: PluginWithOptions<CodeblockPluginOptions>;
 
-export { type CodeblockPluginOptions, type Lang, codeblocksPlugin };
+export { codeblocksPlugin };
+export type { CodeblockPluginOptions, Lang };

package/dist/index.d.ts

@@ -62,4 +62,5 @@ declare module '@md-plugins/shared' {
 
 declare const codeblocksPlugin: PluginWithOptions<CodeblockPluginOptions>;
 
-export { type CodeblockPluginOptions, type Lang, codeblocksPlugin };
+export { codeblocksPlugin };
+export type { CodeblockPluginOptions, Lang };

package/dist/index.mjs

@@ -1,6 +1,13 @@
 import prism from 'prismjs';
 import loadLanguages from 'prismjs/components/index.js';
 
+function resolvePluginOptions(options, key, defaults) {
+  if (options && typeof options === "object" && key in options) {
+    return { ...defaults, ...options[key] };
+  }
+  return { ...defaults, ...options };
+}
+
 const defaultLangList = [
   { name: "markup" },
   { name: "bash", customCopy: true },
@@ -16,23 +23,39 @@ const defaultLangList = [
   { name: "diff" }
   // special grammars
 ];
-const codeblocksPlugin = (md, {
-  defaultLang = "markup",
-  containerComponent = "MarkdownPrerender",
-  copyButtonComponent = "MarkdownCopyButton",
-  preClass = "markdown-code",
-  codeClass = "",
-  tabPanelTagName = "q-tab-panel",
-  tabPanelTagClass = "q-pa-none",
-  pageScripts = [
+const DEFAULT_CODEBLOCK_PLUGIN_OPTIONS = {
+  defaultLang: "markup",
+  containerComponent: "MarkdownPrerender",
+  copyButtonComponent: "MarkdownCopyButton",
+  preClass: "markdown-code",
+  codeClass: "",
+  tabPanelTagName: "q-tab-panel",
+  tabPanelTagClass: "q-pa-none",
+  pageScripts: [
     "import MarkdownPrerender from 'src/.q-press/components/MarkdownPrerender'",
-    // ts file
     "import MarkdownCopyButton from 'src/.q-press/components/MarkdownCopyButton.vue'"
   ],
-  langList = defaultLangList
-} = {}) => {
-  const customCopyLangList = langList.filter((l) => l.customCopy === true).map((l) => l.name);
+  langList: defaultLangList
+};
+const codeblocksPlugin = (md, options) => {
+  const resolvedOptions = resolvePluginOptions(
+    options,
+    "codeblocksPlugin",
+    DEFAULT_CODEBLOCK_PLUGIN_OPTIONS
+  );
+  const {
+    defaultLang = DEFAULT_CODEBLOCK_PLUGIN_OPTIONS.defaultLang,
+    containerComponent = DEFAULT_CODEBLOCK_PLUGIN_OPTIONS.containerComponent,
+    copyButtonComponent = DEFAULT_CODEBLOCK_PLUGIN_OPTIONS.copyButtonComponent,
+    preClass = DEFAULT_CODEBLOCK_PLUGIN_OPTIONS.preClass,
+    codeClass = DEFAULT_CODEBLOCK_PLUGIN_OPTIONS.codeClass,
+    tabPanelTagName = DEFAULT_CODEBLOCK_PLUGIN_OPTIONS.tabPanelTagName,
+    tabPanelTagClass = DEFAULT_CODEBLOCK_PLUGIN_OPTIONS.tabPanelTagClass,
+    pageScripts = DEFAULT_CODEBLOCK_PLUGIN_OPTIONS.pageScripts,
+    langList = defaultLangList
+  } = resolvedOptions;
   loadLanguages(langList.map((l) => l.name));
+  const customCopyLangList = langList.filter((l) => l.customCopy === true).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>.+))?$`
@@ -57,7 +80,7 @@ const codeblocksPlugin = (md, {
           },
           content: []
         };
-      } else if (currentTabName !== null) {
+      } else if (currentTabName) {
         tabMap[currentTabName].content.push(line);
       }
     }
@@ -102,8 +125,10 @@ const codeblocksPlugin = (md, {
     const hasRemOrAdd = props.rem.length !== 0 || props.add.length !== 0;
     for (const type of magicCommentList) {
       const target = props[type];
+      if (target === void 0 || target.length === 0) continue;
       for (const value of target) {
         let [from, to] = value.split("-").map((i) => parseInt(i, 10));
+        if (from === void 0) continue;
         if (to === void 0) to = from;
         for (let i = from; i <= to; i++) {
           acc[i - 1].classList.push(`line-${type}`);
@@ -116,17 +141,24 @@ const codeblocksPlugin = (md, {
         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 ? "-" : " "
-      );
-    });
+    if (hasRemOrAdd === true) {
+      lines.forEach((_, lineIndex) => {
+        const target = acc[lineIndex];
+        if (target === void 0) return;
+        target.prefix.push(
+          target.classList.includes(`line-add`) ? "+" : target.classList.includes(`line-rem`) ? "-" : " "
+        );
+      });
+    }
     return acc;
   }
   function renderCodeBlock(html, codeClass2) {
     return `<code${codeClass2 ? ` class="${codeClass2}"` : ""}>${html}</code>`;
   }
+  function getPrismHighlightedContent(rawContent, lang) {
+    const content = rawContent.trim();
+    return prism.highlight(content, prism.languages[lang], lang);
+  }
   function getHighlightedContent(rawContent, attrs) {
     const { lang, maxheight } = attrs;
     let content = rawContent.trim();
@@ -134,18 +166,21 @@ const codeblocksPlugin = (md, {
     if (lang !== "markup") {
       content = content.trim().replace(magicCommentGlobalRE, "");
     }
-    const html = prism.highlight(content, prism.languages[lang], lang).split("\n").map((line, lineIndex) => {
+    const html = getPrismHighlightedContent(content, lang).split("\n").map((line, lineIndex) => {
       const target = lineList[lineIndex];
+      if (target === void 0) return line;
       let lineHtml = "";
       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}"` : "";
-    return `<pre v-pre class="${preClass}${langClass}"${preAttrs}>` + renderCodeBlock(html, codeClass) + `</pre><${copyButtonComponent}${langProp} />`;
+    return (
+      // `<pre v-pre class="${preClass}${langClass}"${preAttrs}>` +
+      `<pre v-pre class="${preClass}"${preAttrs}>` + renderCodeBlock(html, codeClass) + `</pre><${copyButtonComponent}${langProp} />`
+    );
   }
   function parseAttrs(rawAttrs) {
     if (rawAttrs === null) return {};
@@ -182,9 +217,9 @@ const codeblocksPlugin = (md, {
       return "";
     }
     if (token.info === "") {
-      token.info = defaultLang;
+      token.info = defaultLang ?? "markup";
     }
-    if (pageScripts.length > 0) {
+    if (pageScripts && pageScripts.length > 0) {
       env.pageScripts = env.pageScripts || /* @__PURE__ */ new Set();
       for (const script of pageScripts) {
         env.pageScripts.add(script);

package/package.json

@@ -1,24 +1,29 @@
 {
   "name": "@md-plugins/md-plugin-codeblocks",
-  "version": "0.1.0-alpha.8",
+  "version": "0.1.0-beta.0",
   "description": "A markdown-it plugin for code blocks.",
   "keywords": [
     "markdown-it",
     "quasarframework",
-    "vue",
-    "types"
+    "types",
+    "vue"
   ],
   "homepage": "https://github.com/md-plugins",
   "bugs": {
     "url": "https://github.com/md-plugins/md-plugins/issues"
   },
+  "license": "MIT",
+  "author": "hawkeye64 <galbraith64@gmail.com>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/md-plugins/md-plugins.git"
   },
-  "license": "MIT",
-  "author": "hawkeye64 <galbraith64@gmail.com>",
+  "files": [
+    "./dist"
+  ],
   "type": "module",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": {
@@ -27,22 +32,15 @@
       }
     }
   },
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "./dist"
-  ],
-  "dependencies": {
-    "markdown-it": "^14.1.0",
-    "prismjs": "^1.29.0",
-    "@md-plugins/shared": "0.1.0-alpha.8"
-  },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",
-    "@types/prismjs": "^1.26.5"
+    "@types/prismjs": "^1.26.6",
+    "markdown-it": "^14.1.1",
+    "prismjs": "^1.30.0",
+    "@md-plugins/shared": "0.1.0-beta.0"
   },
   "peerDependencies": {
     "markdown-it": "^14.1.0",