@astrojs/markdown-remark 3.2.1 → 3.3.0

package/dist/remark-shiki.js

@@ -1,40 +1,39 @@
-import { getHighlighter } from "shiki";
+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",
   wrap = false
 } = {}) {
-  const cacheID = typeof theme === "string" ? theme : theme.name;
-  let highlighterAsync = highlighterCacheAsync.get(cacheID);
+  const cacheId = (typeof theme === "string" ? theme : theme.name ?? "") + langs.map((l) => l.name ?? l.id).join(",");
+  let highlighterAsync = highlighterCacheAsync.get(cacheId);
   if (!highlighterAsync) {
-    highlighterAsync = getHighlighter({ theme }).then((hl) => {
-      hl.setColorReplacements({
-        "#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)"
-      });
-      return hl;
+    highlighterAsync = getHighlighter({
+      langs: langs.length ? langs : Object.keys(bundledLanguages),
+      themes: [theme]
     });
-    highlighterCacheAsync.set(cacheID, highlighterAsync);
+    highlighterCacheAsync.set(cacheId, highlighterAsync);
   }
-  let highlighter;
   return async (tree) => {
-    if (!highlighter) {
-      highlighter = await highlighterAsync;
-      for (const lang of langs) {
-        await highlighter.loadLanguage(lang);
-      }
-    }
+    const highlighter = await highlighterAsync;
     visit(tree, "code", (node) => {
       let lang;
       if (typeof node.lang === "string") {
@@ -48,7 +47,7 @@ function remarkShiki({
       } else {
         lang = "plaintext";
       }
-      let html = highlighter.codeToHtml(node.value, { lang });
+      let html = highlighter.codeToHtml(node.value, { lang, theme });
       html = html.replace(/<pre class="(.*?)shiki(.*?)"/, `<pre class="$1astro-code$2"`);
       if (node.lang === "diff") {
         html = html.replace(
@@ -64,12 +63,19 @@ function remarkShiki({
           '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));
+      }
       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/types.d.ts

@@ -1,7 +1,7 @@
 import type * as hast from 'hast';
 import type * as mdast from 'mdast';
 import type { one as Handler, all as Handlers, Options as RemarkRehypeOptions } from 'remark-rehype';
-import type { ILanguageRegistration, IThemeRegistration, Theme } from 'shiki';
+import type { BuiltinTheme, LanguageRegistration, ThemeRegistration, ThemeRegistrationRaw } from 'shikiji';
 import type * as unified from 'unified';
 import type { VFile } from 'vfile';
 export type { Node } from 'unist';
@@ -17,8 +17,8 @@ export type RemarkRehype = Omit<RemarkRehypeOptions, 'handlers' | 'unknownHandle
     handler?: typeof Handler;
 };
 export interface ShikiConfig {
-    langs?: ILanguageRegistration[];
-    theme?: Theme | IThemeRegistration;
+    langs?: LanguageRegistration[];
+    theme?: BuiltinTheme | ThemeRegistration | ThemeRegistrationRaw;
     wrap?: boolean | null;
 }
 export interface AstroMarkdownOptions {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/markdown-remark",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "type": "module",
   "author": "withastro",
   "license": "MIT",
@@ -20,7 +20,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "astro": "^3.2.3"
+    "astro": "^3.3.0"
   },
   "dependencies": {
     "@astrojs/prism": "^3.0.0",
@@ -33,7 +33,7 @@
     "remark-parse": "^10.0.2",
     "remark-rehype": "^10.1.0",
     "remark-smartypants": "^2.0.0",
-    "shiki": "^0.14.3",
+    "shikiji": "^0.6.8",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.2",
     "vfile": "^5.3.7"