@nuxtjs/mdc 0.1.0

package/dist/runtime/shiki/highlighter.mjs

@@ -0,0 +1,298 @@
+import { getHighlighter, BUNDLED_LANGUAGES, BUNDLED_THEMES, FontStyle } from "shiki-es";
+import { consola } from "consola";
+import mdcTMLanguage from "./mdc.tmLanguage.mjs";
+const logger = consola.withTag("@nuxtjs/mdc");
+const resolveLang = (lang) => BUNDLED_LANGUAGES.find((l) => l.id === lang || l.aliases?.includes(lang));
+const resolveTheme = (theme) => {
+  if (!theme) {
+    return;
+  }
+  if (typeof theme === "string") {
+    theme = {
+      default: theme
+    };
+  }
+  return Object.entries(theme).reduce((acc, [key, value]) => {
+    acc[key] = BUNDLED_THEMES.find((t) => t === value);
+    return acc;
+  }, {});
+};
+export const useShikiHighlighter = createSingleton((opts) => {
+  const { theme, preload } = opts || {};
+  let promise;
+  const getShikiHighlighter = () => {
+    if (!promise) {
+      promise = getHighlighter({
+        theme: theme?.default || theme || "dark-plus",
+        langs: [
+          ...preload || [],
+          "diff",
+          "json",
+          "js",
+          "ts",
+          "css",
+          "shell",
+          "html",
+          "md",
+          "yaml",
+          "vue",
+          {
+            id: "md",
+            scopeName: "text.markdown.mdc",
+            path: "mdc.tmLanguage.json",
+            aliases: ["markdown", "md", "mdc"],
+            grammar: mdcTMLanguage
+          }
+        ]
+      }).then((highlighter) => {
+        const themes = Object.values(typeof theme === "string" ? { default: theme } : theme || {});
+        if (themes.length) {
+          return Promise.all(themes.map((theme2) => highlighter.loadTheme(theme2))).then(() => highlighter);
+        }
+        return highlighter;
+      });
+    }
+    return promise;
+  };
+  const splitCodeToLines = (code) => {
+    const lines = code.split(/\r\n|\r|\n/);
+    return [...lines.map((line) => [{ content: line }])];
+  };
+  const getHighlightedTokens = async (code, lang, theme2) => {
+    const highlighter = await getShikiHighlighter();
+    code = code.replace(/\n+$/, "");
+    lang = resolveLang(lang || "")?.id || lang;
+    theme2 = resolveTheme(theme2 || "") || { default: highlighter.getTheme() };
+    const newThemes = Object.values(theme2).filter((t) => !highlighter.getLoadedThemes().includes(t));
+    if (newThemes.length) {
+      await Promise.all(newThemes.map(highlighter.loadTheme));
+    }
+    const result = {
+      code,
+      lang,
+      theme: Object.fromEntries(Object.entries(theme2).map(([n, t]) => [n, highlighter.getTheme(t)])),
+      tokens: splitCodeToLines(code)
+    };
+    if (!lang) {
+      return result;
+    }
+    if (!highlighter.getLoadedLanguages().includes(lang)) {
+      const languageRegistration = resolveLang(lang);
+      if (languageRegistration) {
+        await highlighter.loadLanguage(languageRegistration);
+      } else {
+        logger.warn(`Language '${lang}' is not supported by shiki. Skipping highlight.`);
+        return result;
+      }
+    }
+    const coloredTokens = Object.entries(theme2).map(([key, theme3]) => {
+      const tokens = highlighter.codeToThemedTokens(code, lang, theme3, { includeExplanation: false }).map((line) => line.map((token) => ({
+        content: token.content,
+        style: {
+          [key]: { color: token.color, fontStyle: token.fontStyle }
+        }
+      })));
+      return {
+        key,
+        theme: theme3,
+        tokens
+      };
+    });
+    const highlightedCode = [];
+    for (const line in coloredTokens[0].tokens) {
+      highlightedCode[line] = coloredTokens.reduce((acc, color) => {
+        return mergeLines({
+          key: coloredTokens[0].key,
+          tokens: acc
+        }, {
+          key: color.key,
+          tokens: color.tokens[line]
+        });
+      }, coloredTokens[0].tokens[line]);
+    }
+    result.tokens = highlightedCode;
+    return result;
+  };
+  const getHighlightedAST = async (code, lang, theme2, opts2) => {
+    const { tokens, theme: themeMap } = await getHighlightedTokens(code, lang, theme2);
+    const { highlights = [], styleMap = {} } = opts2 || {};
+    const className = Object.values(themeMap).map((th) => th.name).join("_").replace(".", "");
+    styleMap[className] = {
+      style: Object.entries(themeMap).reduce((acc, [key, th]) => {
+        acc[key] = {
+          background: th.bg,
+          color: th.fg
+        };
+        return acc;
+      }, {}),
+      className
+    };
+    const tree = tokens.map((line, lineIndex) => {
+      if (lineIndex !== tokens.length - 1) {
+        if (line.length === 0) {
+          line.push({ content: "" });
+        }
+        line[line.length - 1].content += "\n";
+      }
+      return {
+        type: "element",
+        tagName: "span",
+        properties: {
+          class: ["line", highlights.includes(lineIndex + 1) ? "highlight" : ""].join(" ").trim(),
+          line: lineIndex + 1
+        },
+        children: line.map(tokenSpan)
+      };
+    });
+    return {
+      tree,
+      className
+    };
+    function getSpanProps(token) {
+      if (!token.style) {
+        return {};
+      }
+      const key = Object.values(token.style).map((themeStyle) => Object.values(themeStyle).join("")).join("");
+      if (!styleMap[key]) {
+        styleMap[key] = {
+          style: token.style,
+          // Using the hash value of the style as the className,
+          // ensure that the className remains stable over multiple compilations,
+          // which facilitates content caching.
+          className: "ct-" + hash(key)
+        };
+      }
+      return { class: styleMap[key].className };
+    }
+    function tokenSpan(token) {
+      return {
+        type: "element",
+        tagName: "span",
+        properties: getSpanProps(token),
+        children: [{ type: "text", value: token.content }]
+      };
+    }
+  };
+  const getHighlightedCode = async (code, lang, theme2, opts2) => {
+    const styleMap = opts2?.styleMap || {};
+    const highlights = opts2?.highlights || [];
+    const { tree, className } = await getHighlightedAST(code, lang, theme2, { styleMap, highlights });
+    function renderNode(node) {
+      if (node.type === "text") {
+        return node.value.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      }
+      const children = node.children.map(renderNode).join("");
+      return `<${node.tag} class="${node.props.class}">${children}</${node.tag}>`;
+    }
+    return {
+      code: tree.map(renderNode).join(""),
+      className,
+      styles: generateStyles(styleMap)
+    };
+  };
+  const generateStyles = (styleMap) => {
+    const styles = [];
+    for (const styleToken of Object.values(styleMap)) {
+      const defaultStyle = styleToken.style.default;
+      const hasColor = !!defaultStyle?.color;
+      const hasBold = isBold(defaultStyle);
+      const hasItalic = isItalic(defaultStyle);
+      const hasUnderline = isUnderline(defaultStyle);
+      const themeStyles = Object.entries(styleToken.style).map(([variant, style]) => {
+        const styleText = [
+          // If the default theme has a style, but the current theme does not have one,
+          // we need to override to reset style
+          ["color", style.color || (hasColor ? "unset" : "")],
+          ["font-weight", isBold(style) ? "bold" : hasBold ? "unset" : ""],
+          ["font-style", isItalic(style) ? "italic" : hasItalic ? "unset" : ""],
+          ["text-decoration", isUnderline(style) ? "bold" : hasUnderline ? "unset" : ""],
+          ["background", style.background || ""]
+        ].filter((kv) => kv[1]).map((kv) => kv.join(":") + ";").join("");
+        return { variant, styleText };
+      });
+      const defaultThemeStyle = themeStyles.find((themeStyle) => themeStyle.variant === "default");
+      themeStyles.forEach((themeStyle) => {
+        if (themeStyle.variant === "default") {
+          styles.push(`.${styleToken.className}{${themeStyle.styleText}}`);
+        } else if (themeStyle.styleText !== defaultThemeStyle?.styleText) {
+          styles.push(`.${themeStyle.variant} .${styleToken.className}{${themeStyle.styleText}}`);
+        }
+      });
+    }
+    return styles.join("\n");
+  };
+  return {
+    getHighlightedTokens,
+    getHighlightedAST,
+    getHighlightedCode,
+    generateStyles
+  };
+});
+function mergeLines(line1, line2) {
+  const mergedTokens = [];
+  const right = {
+    key: line1.key,
+    tokens: line1.tokens.slice()
+  };
+  const left = {
+    key: line2.key,
+    tokens: line2.tokens.slice()
+  };
+  let index = 0;
+  while (index < right.tokens.length) {
+    const rightToken = right.tokens[index];
+    const leftToken = left.tokens[index];
+    if (rightToken.content === leftToken.content) {
+      mergedTokens.push({
+        content: rightToken.content,
+        style: {
+          ...right.tokens[index].style,
+          ...left.tokens[index].style
+        }
+      });
+      index += 1;
+      continue;
+    }
+    if (rightToken.content.startsWith(leftToken.content)) {
+      const nextRightToken = {
+        ...rightToken,
+        content: rightToken.content.slice(leftToken.content.length)
+      };
+      rightToken.content = leftToken.content;
+      right.tokens.splice(index + 1, 0, nextRightToken);
+      continue;
+    }
+    if (leftToken.content.startsWith(rightToken.content)) {
+      const nextLeftToken = {
+        ...leftToken,
+        content: leftToken.content.slice(rightToken.content.length)
+      };
+      leftToken.content = rightToken.content;
+      left.tokens.splice(index + 1, 0, nextLeftToken);
+      continue;
+    }
+    throw new Error("Unexpected token");
+  }
+  return mergedTokens;
+}
+function isBold(style) {
+  return style && style.fontStyle === FontStyle.Bold;
+}
+function isItalic(style) {
+  return style && style.fontStyle === FontStyle.Italic;
+}
+function isUnderline(style) {
+  return style && style.fontStyle === FontStyle.Underline;
+}
+function hash(str) {
+  return Array.from(str).reduce((s, c) => Math.imul(31, s) + c.charCodeAt(0) | 0, 0).toString().slice(-6);
+}
+function createSingleton(fn) {
+  let instance;
+  return (...args) => {
+    if (!instance) {
+      instance = fn(...args);
+    }
+    return instance;
+  };
+}

package/dist/runtime/shiki/mdc.tmLanguage.d.ts

@@ -0,0 +1,323 @@
+declare const grammar: {
+    information_for_contributors: string[];
+    version: string;
+    name: string;
+    injectionSelector: string;
+    scopeName: string;
+    patterns: {
+        include: string;
+    }[];
+    repository: {
+        block: {
+            comment: string;
+            patterns: {
+                include: string;
+            }[];
+        };
+        inline: {
+            patterns: {
+                include: string;
+            }[];
+        };
+        markdown_attributes: {
+            match: string;
+            name: string;
+            captures: {
+                "4": {
+                    patterns: {
+                        include: string;
+                    }[];
+                };
+            };
+        };
+        span: {
+            match: string;
+            name: string;
+            captures: {
+                "2": {
+                    name: string;
+                };
+                "4": {
+                    patterns: {
+                        include: string;
+                    }[];
+                };
+            };
+        };
+        attributes: {
+            match: string;
+            name: string;
+            captures: {
+                "3": {
+                    patterns: {
+                        include: string;
+                    }[];
+                };
+            };
+        };
+        component_inline: {
+            match: string;
+            name: string;
+            captures: {
+                "2": {
+                    name: string;
+                };
+                "3": {
+                    name: string;
+                };
+                "5": {
+                    patterns: {
+                        include: string;
+                    }[];
+                };
+                "6": {
+                    patterns: {
+                        include: string;
+                    }[];
+                };
+                "7": {
+                    patterns: {
+                        include: string;
+                    }[];
+                };
+                "8": {
+                    patterns: {
+                        include: string;
+                    }[];
+                };
+            };
+        };
+        component_block: {
+            begin: string;
+            name: string;
+            end: string;
+            beginCaptures: {
+                "4": {
+                    name: string;
+                };
+                "5": {
+                    patterns: {
+                        include: string;
+                    }[];
+                };
+            };
+            patterns: {
+                include: string;
+            }[];
+        };
+        content: {
+            begin: string;
+            while: string;
+            contentName: string;
+            patterns: ({
+                begin: string;
+                end: string;
+                patterns: {
+                    include: string;
+                }[];
+                match?: undefined;
+                captures?: undefined;
+                comment?: undefined;
+                include?: undefined;
+            } | {
+                match: string;
+                captures: {
+                    "2": {
+                        name: string;
+                    };
+                    "3": {
+                        name: string;
+                    };
+                };
+                begin?: undefined;
+                end?: undefined;
+                patterns?: undefined;
+                comment?: undefined;
+                include?: undefined;
+            } | {
+                comment: string;
+                include: string;
+                begin?: undefined;
+                end?: undefined;
+                patterns?: undefined;
+                match?: undefined;
+                captures?: undefined;
+            })[];
+        };
+        attribute: {
+            patterns: {
+                match: string;
+                captures: {
+                    "2": {
+                        name: string;
+                    };
+                    "3": {
+                        patterns: {
+                            include: string;
+                        }[];
+                    };
+                };
+            }[];
+        };
+        "attribute-interior": {
+            comment: string;
+            patterns: {
+                begin: string;
+                beginCaptures: {
+                    "0": {
+                        name: string;
+                    };
+                };
+                end: string;
+                patterns: ({
+                    match: string;
+                    name: string;
+                    begin?: undefined;
+                    beginCaptures?: undefined;
+                    end?: undefined;
+                    endCaptures?: undefined;
+                    patterns?: undefined;
+                } | {
+                    begin: string;
+                    beginCaptures: {
+                        "0": {
+                            name: string;
+                        };
+                    };
+                    end: string;
+                    endCaptures: {
+                        "0": {
+                            name: string;
+                        };
+                    };
+                    name: string;
+                    patterns: {
+                        include: string;
+                    }[];
+                    match?: undefined;
+                })[];
+            }[];
+        };
+        entities: {
+            comment: string;
+            patterns: ({
+                captures: {
+                    "1": {
+                        name: string;
+                    };
+                    "912": {
+                        name: string;
+                    };
+                    "3"?: undefined;
+                };
+                comment: string;
+                match: string;
+                name: string;
+            } | {
+                captures: {
+                    "1": {
+                        name: string;
+                    };
+                    "3": {
+                        name: string;
+                    };
+                    "912"?: undefined;
+                };
+                match: string;
+                name: string;
+                comment?: undefined;
+            } | {
+                match: string;
+                name: string;
+                captures?: undefined;
+                comment?: undefined;
+            })[];
+        };
+        heading: {
+            match: string;
+            captures: {
+                "1": {
+                    patterns: {
+                        match: string;
+                        name: string;
+                        captures: {
+                            "1": {
+                                name: string;
+                            };
+                            "2": {
+                                name: string;
+                                patterns: {
+                                    include: string;
+                                }[];
+                            };
+                            "3": {
+                                name: string;
+                            };
+                        };
+                    }[];
+                };
+            };
+            name: string;
+            patterns: {
+                include: string;
+            }[];
+        };
+        "heading-setext": {
+            patterns: {
+                match: string;
+                name: string;
+            }[];
+        };
+        lists: {
+            patterns: ({
+                begin: string;
+                beginCaptures: {
+                    "3": {
+                        name: string;
+                    };
+                };
+                comment: string;
+                name: string;
+                patterns: {
+                    include: string;
+                }[];
+                while: string;
+            } | {
+                begin: string;
+                beginCaptures: {
+                    "3": {
+                        name: string;
+                    };
+                };
+                name: string;
+                patterns: {
+                    include: string;
+                }[];
+                while: string;
+                comment?: undefined;
+            })[];
+        };
+        paragraph: {
+            begin: string;
+            name: string;
+            patterns: {
+                include: string;
+            }[];
+            while: string;
+        };
+        blockquote: {
+            begin: string;
+            captures: {
+                "2": {
+                    name: string;
+                };
+            };
+            name: string;
+            patterns: {
+                include: string;
+            }[];
+            while: string;
+        };
+    };
+};
+export default grammar;