@astrojs/markdown-remark 3.4.0 → 3.5.0

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { rehypeHeadingIds } from './rehype-collect-headings.js';
 export { remarkCollectImages } from './remark-collect-images.js';
 export { remarkPrism } from './remark-prism.js';
 export { remarkShiki } from './remark-shiki.js';
+export { createShikiHighlighter, replaceCssVariables, type ShikiHighlighter } from './shiki.js';
 export * from './types.js';
 export declare const markdownConfigDefaults: Omit<Required<AstroMarkdownOptions>, 'drafts'>;
 /**

package/dist/index.js

@@ -22,6 +22,7 @@ import { rehypeHeadingIds as rehypeHeadingIds2 } from "./rehype-collect-headings
 import { remarkCollectImages as remarkCollectImages2 } from "./remark-collect-images.js";
 import { remarkPrism as remarkPrism2 } from "./remark-prism.js";
 import { remarkShiki as remarkShiki2 } from "./remark-shiki.js";
+import { createShikiHighlighter, replaceCssVariables } from "./shiki.js";
 export * from "./types.js";
 const markdownConfigDefaults = {
   syntaxHighlight: "shiki",
@@ -147,11 +148,13 @@ ${err.message}`;
 export {
   InvalidAstroDataError2 as InvalidAstroDataError,
   createMarkdownProcessor,
+  createShikiHighlighter,
   markdownConfigDefaults,
   rehypeHeadingIds2 as rehypeHeadingIds,
   remarkCollectImages2 as remarkCollectImages,
   remarkPrism2 as remarkPrism,
   remarkShiki2 as remarkShiki,
   renderMarkdown,
+  replaceCssVariables,
   setVfileFrontmatter2 as setVfileFrontmatter
 };

package/dist/remark-shiki.d.ts

@@ -1,2 +1,2 @@
 import type { RemarkPlugin, ShikiConfig } from './types.js';
-export declare function remarkShiki({ langs, theme, experimentalThemes, wrap, }?: ShikiConfig): ReturnType<RemarkPlugin>;
+export declare function remarkShiki(config?: ShikiConfig): ReturnType<RemarkPlugin>;

package/dist/remark-shiki.js

@@ -1,84 +1,19 @@
-import { bundledLanguages, getHighlighter } from "shikiji";
 import { visit } from "unist-util-visit";
-const ASTRO_COLOR_REPLACEMENTS = {
-  "#000001": "var(--astro-code-color-text)",
-  "#000002": "var(--astro-code-color-background)",
-  "#000004": "var(--astro-code-token-constant)",
-  "#000005": "var(--astro-code-token-string)",
-  "#000006": "var(--astro-code-token-comment)",
-  "#000007": "var(--astro-code-token-keyword)",
-  "#000008": "var(--astro-code-token-parameter)",
-  "#000009": "var(--astro-code-token-function)",
-  "#000010": "var(--astro-code-token-string-expression)",
-  "#000011": "var(--astro-code-token-punctuation)",
-  "#000012": "var(--astro-code-token-link)"
-};
-const COLOR_REPLACEMENT_REGEX = new RegExp(
-  `(${Object.keys(ASTRO_COLOR_REPLACEMENTS).join("|")})`,
-  "g"
-);
-const highlighterCacheAsync = /* @__PURE__ */ new Map();
-function remarkShiki({
-  langs = [],
-  theme = "github-dark",
-  experimentalThemes = {},
-  wrap = false
-} = {}) {
-  const themes = experimentalThemes;
-  const cacheId = Object.values(themes).map((t) => typeof t === "string" ? t : t.name ?? "").join(",") + (typeof theme === "string" ? theme : theme.name ?? "") + langs.map((l) => l.name ?? l.id).join(",");
-  let highlighterAsync = highlighterCacheAsync.get(cacheId);
-  if (!highlighterAsync) {
-    highlighterAsync = getHighlighter({
-      langs: langs.length ? langs : Object.keys(bundledLanguages),
-      themes: Object.values(themes).length ? Object.values(themes) : [theme]
-    });
-    highlighterCacheAsync.set(cacheId, highlighterAsync);
-  }
+import { createShikiHighlighter } from "./shiki.js";
+function remarkShiki(config) {
+  let highlighterAsync;
   return async (tree) => {
+    highlighterAsync ??= createShikiHighlighter(config);
     const highlighter = await highlighterAsync;
     visit(tree, "code", (node) => {
-      let lang;
-      if (typeof node.lang === "string") {
-        const langExists = highlighter.getLoadedLanguages().includes(node.lang);
-        if (langExists) {
-          lang = node.lang;
-        } else {
-          console.warn(`The language "${node.lang}" doesn't exist, falling back to plaintext.`);
-          lang = "plaintext";
-        }
-      } else {
-        lang = "plaintext";
-      }
-      let themeOptions = Object.values(themes).length ? { themes } : { theme };
-      let html = highlighter.codeToHtml(node.value, { ...themeOptions, lang });
-      html = html.replace(/<pre class="(.*?)shiki(.*?)"/, `<pre class="$1astro-code$2"`);
-      if (node.lang === "diff") {
-        html = html.replace(
-          /<span class="line"><span style="(.*?)">([\+|\-])/g,
-          '<span class="line"><span style="$1"><span style="user-select: none;">$2</span>'
-        );
-      }
-      if (wrap === false) {
-        html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto;"');
-      } else if (wrap === true) {
-        html = html.replace(
-          /style="(.*?)"/,
-          'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'
-        );
-      }
-      const themeName = typeof theme === "string" ? theme : theme.name;
-      if (themeName === "css-variables") {
-        html = html.replace(/style="(.*?)"/g, (m) => replaceCssVariables(m));
-      }
+      const lang = typeof node.lang === "string" ? node.lang : "plaintext";
+      const html = highlighter.highlight(node.value, lang);
       node.type = "html";
       node.value = html;
       node.children = [];
     });
   };
 }
-function replaceCssVariables(str) {
-  return str.replace(COLOR_REPLACEMENT_REGEX, (match) => ASTRO_COLOR_REPLACEMENTS[match] || match);
-}
 export {
   remarkShiki
 };

package/dist/shiki.d.ts

@@ -0,0 +1,7 @@
+import type { ShikiConfig } from './types.js';
+export interface ShikiHighlighter {
+    highlight(code: string, lang?: string, options?: {
+        inline?: boolean;
+    }): string;
+}
+export declare function createShikiHighlighter({ langs, theme, experimentalThemes, wrap, }?: ShikiConfig): Promise<ShikiHighlighter>;

package/dist/shiki.js

@@ -0,0 +1,104 @@
+import { bundledLanguages, getHighlighter } from "shikiji";
+import { visit } from "unist-util-visit";
+const ASTRO_COLOR_REPLACEMENTS = {
+  "#000001": "var(--astro-code-color-text)",
+  "#000002": "var(--astro-code-color-background)",
+  "#000004": "var(--astro-code-token-constant)",
+  "#000005": "var(--astro-code-token-string)",
+  "#000006": "var(--astro-code-token-comment)",
+  "#000007": "var(--astro-code-token-keyword)",
+  "#000008": "var(--astro-code-token-parameter)",
+  "#000009": "var(--astro-code-token-function)",
+  "#000010": "var(--astro-code-token-string-expression)",
+  "#000011": "var(--astro-code-token-punctuation)",
+  "#000012": "var(--astro-code-token-link)"
+};
+const COLOR_REPLACEMENT_REGEX = new RegExp(
+  `(${Object.keys(ASTRO_COLOR_REPLACEMENTS).join("|")})`,
+  "g"
+);
+async function createShikiHighlighter({
+  langs = [],
+  theme = "github-dark",
+  experimentalThemes = {},
+  wrap = false
+} = {}) {
+  const themes = experimentalThemes;
+  const highlighter = await getHighlighter({
+    langs: langs.length ? langs : Object.keys(bundledLanguages),
+    themes: Object.values(themes).length ? Object.values(themes) : [theme]
+  });
+  const loadedLanguages = highlighter.getLoadedLanguages();
+  return {
+    highlight(code, lang = "plaintext", options) {
+      if (lang !== "plaintext" && !loadedLanguages.includes(lang)) {
+        console.warn(`[Shiki] The language "${lang}" doesn't exist, falling back to "plaintext".`);
+        lang = "plaintext";
+      }
+      const themeOptions = Object.values(themes).length ? { themes } : { theme };
+      const inline = options?.inline ?? false;
+      return highlighter.codeToHtml(code, {
+        ...themeOptions,
+        lang,
+        transforms: {
+          pre(node) {
+            if (inline) {
+              node.tagName = "code";
+            }
+            const classValue = node.properties.class ?? "";
+            const styleValue = node.properties.style ?? "";
+            node.properties.class = classValue.replace(/shiki/g, "astro-code");
+            if (wrap === false) {
+              node.properties.style = styleValue + "; overflow-x: auto;";
+            } else if (wrap === true) {
+              node.properties.style = styleValue + "; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;";
+            }
+          },
+          line(node) {
+            if (lang === "diff") {
+              const innerSpanNode = node.children[0];
+              const innerSpanTextNode = innerSpanNode?.type === "element" && innerSpanNode.children?.[0];
+              if (innerSpanTextNode && innerSpanTextNode.type === "text") {
+                const start = innerSpanTextNode.value[0];
+                if (start === "+" || start === "-") {
+                  innerSpanTextNode.value = innerSpanTextNode.value.slice(1);
+                  innerSpanNode.children.unshift({
+                    type: "element",
+                    tagName: "span",
+                    properties: { style: "user-select: none;" },
+                    children: [{ type: "text", value: start }]
+                  });
+                }
+              }
+            }
+          },
+          code(node) {
+            if (inline) {
+              return node.children[0];
+            }
+          },
+          root(node) {
+            if (Object.values(experimentalThemes).length) {
+              return;
+            }
+            const themeName = typeof theme === "string" ? theme : theme.name;
+            if (themeName === "css-variables") {
+              visit(node, "element", (child) => {
+                if (child.properties?.style) {
+                  child.properties.style = replaceCssVariables(child.properties.style);
+                }
+              });
+            }
+          }
+        }
+      });
+    }
+  };
+}
+function replaceCssVariables(str) {
+  return str.replace(COLOR_REPLACEMENT_REGEX, (match) => ASTRO_COLOR_REPLACEMENTS[match] || match);
+}
+export {
+  createShikiHighlighter,
+  replaceCssVariables
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/markdown-remark",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "type": "module",
   "author": "withastro",
   "license": "MIT",