@astrojs/markdown-remark 7.0.0-beta.7 → 7.0.0-beta.9

package/dist/highlight.d.ts

@@ -11,7 +11,6 @@ export declare const defaultExcludeLanguages: string[];
  * @param highlighter
  *   A function which receives the code and language, and returns the HTML of a syntax
  *   highlighted `<pre>` element.
- * @returns The number of code blocks that were highlighted.
  */
-export declare function highlightCodeBlocks(tree: Root, highlighter: Highlighter, excludeLanguages?: string[]): Promise<number>;
+export declare function highlightCodeBlocks(tree: Root, highlighter: Highlighter, excludeLanguages?: string[]): Promise<void>;
 export {};

package/dist/highlight.js

@@ -54,7 +54,6 @@ async function highlightCodeBlocks(tree, highlighter, excludeLanguages = []) {
     const index = grandParent.children.indexOf(parent);
     grandParent.children[index] = replacement;
   }
-  return nodes.length;
 }
 export {
   defaultExcludeLanguages,

package/dist/index.d.ts

@@ -5,8 +5,6 @@ export { rehypePrism } from './rehype-prism.js';
 export { rehypeShiki } from './rehype-shiki.js';
 export { remarkCollectImages } from './remark-collect-images.js';
 export { type CreateShikiHighlighterOptions, createShikiHighlighter, type ShikiHighlighter, type ShikiHighlighterHighlightOptions, } from './shiki.js';
-export { globalShikiStyleCollector } from './shiki-style-collector.js';
-export { transformerStyleToClass, type ShikiTransformerStyleToClass, } from './transformers/style-to-class.js';
 export * from './types.js';
 export declare const syntaxHighlightDefaults: Required<SyntaxHighlightConfig>;
 export declare const markdownConfigDefaults: Required<AstroMarkdownOptions>;

package/dist/index.js

@@ -25,10 +25,6 @@ import { remarkCollectImages as remarkCollectImages2 } from "./remark-collect-im
 import {
   createShikiHighlighter
 } from "./shiki.js";
-import { globalShikiStyleCollector } from "./shiki-style-collector.js";
-import {
-  transformerStyleToClass
-} from "./transformers/style-to-class.js";
 export * from "./types.js";
 const syntaxHighlightDefaults = {
   type: "shiki",
@@ -122,8 +118,7 @@ async function createMarkdownProcessor(opts) {
           headings: result.data.astro?.headings ?? [],
           localImagePaths: result.data.astro?.localImagePaths ?? [],
           remoteImagePaths: result.data.astro?.remoteImagePaths ?? [],
-          frontmatter: result.data.astro?.frontmatter ?? {},
-          hasCodeBlocks: result.data.astro?.hasCodeBlocks ?? false
+          frontmatter: result.data.astro?.frontmatter ?? {}
         }
       };
     }
@@ -150,7 +145,6 @@ export {
   createMarkdownProcessor,
   createShikiHighlighter,
   extractFrontmatter,
-  globalShikiStyleCollector,
   isFrontmatterValid,
   markdownConfigDefaults,
   parseFrontmatter,
@@ -158,6 +152,5 @@ export {
   rehypePrism2 as rehypePrism,
   rehypeShiki2 as rehypeShiki,
   remarkCollectImages2 as remarkCollectImages,
-  syntaxHighlightDefaults,
-  transformerStyleToClass
+  syntaxHighlightDefaults
 };

package/dist/rehype-shiki.js

@@ -2,7 +2,7 @@ import { highlightCodeBlocks } from "./highlight.js";
 import { createShikiHighlighter } from "./shiki.js";
 const rehypeShiki = (config, excludeLangs) => {
   let highlighterAsync;
-  return async (tree, vfile) => {
+  return async (tree) => {
     highlighterAsync ??= createShikiHighlighter({
       langs: config?.langs,
       theme: config?.theme,
@@ -10,7 +10,7 @@ const rehypeShiki = (config, excludeLangs) => {
       langAlias: config?.langAlias
     });
     const highlighter = await highlighterAsync;
-    const codeBlockCount = await highlightCodeBlocks(
+    await highlightCodeBlocks(
       tree,
       (code, language, options) => {
         return highlighter.codeToHast(code, language, {
@@ -22,10 +22,6 @@ const rehypeShiki = (config, excludeLangs) => {
       },
       excludeLangs
     );
-    if (codeBlockCount > 0) {
-      vfile.data.astro ??= {};
-      vfile.data.astro.hasCodeBlocks = true;
-    }
   };
 };
 export {

package/dist/shiki-engine-default.d.ts

@@ -0,0 +1,2 @@
+import type { RegexEngine } from 'shiki';
+export declare function loadShikiEngine(): Promise<RegexEngine>;

package/dist/shiki-engine-default.js

@@ -0,0 +1,7 @@
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+function loadShikiEngine() {
+  return createOnigurumaEngine(import("shiki/wasm"));
+}
+export {
+  loadShikiEngine
+};

package/dist/shiki-engine-workerd.d.ts

@@ -0,0 +1,2 @@
+import type { RegexEngine } from 'shiki';
+export declare function loadShikiEngine(): Promise<RegexEngine>;

package/dist/shiki-engine-workerd.js

@@ -0,0 +1,7 @@
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+function loadShikiEngine() {
+  return createOnigurumaEngine(import("shiki/onig.wasm"));
+}
+export {
+  loadShikiEngine
+};

package/dist/shiki.d.ts

@@ -40,4 +40,5 @@ export interface ShikiHighlighterHighlightOptions {
      */
     meta?: string;
 }
-export declare function createShikiHighlighter({ langs, theme, themes, langAlias, }?: CreateShikiHighlighterOptions): Promise<ShikiHighlighter>;
+export declare function createShikiHighlighter(options?: CreateShikiHighlighterOptions): Promise<ShikiHighlighter>;
+export type { ThemePresets };

package/dist/shiki.js

@@ -3,33 +3,69 @@ import {
   createHighlighter,
   isSpecialLang
 } from "shiki";
-import { globalShikiStyleCollector } from "./shiki-style-collector.js";
-import { transformerStyleToClass } from "./transformers/style-to-class.js";
+import { loadShikiEngine } from "#shiki-engine";
 let _cssVariablesTheme;
 const cssVariablesTheme = () => _cssVariablesTheme ?? (_cssVariablesTheme = createCssVariablesTheme({
   variablePrefix: "--astro-code-"
 }));
 const cachedHighlighters = /* @__PURE__ */ new Map();
-async function createShikiHighlighter({
+function clearShikiHighlighterCache() {
+  cachedHighlighters.clear();
+}
+function createShikiHighlighter(options) {
+  const key = getCacheKey(options);
+  let highlighterPromise = cachedHighlighters.get(key);
+  if (!highlighterPromise) {
+    highlighterPromise = createShikiHighlighterInternal(options);
+    cachedHighlighters.set(key, highlighterPromise);
+  }
+  return ensureLanguagesLoaded(highlighterPromise, options?.langs);
+}
+function getCacheKey(options) {
+  const keyCache = [];
+  const { theme, themes, langAlias } = options ?? {};
+  if (theme) {
+    keyCache.push(theme);
+  }
+  if (themes) {
+    keyCache.push(Object.entries(themes).sort());
+  }
+  if (langAlias) {
+    keyCache.push(Object.entries(langAlias).sort());
+  }
+  return keyCache.length > 0 ? JSON.stringify(keyCache) : "";
+}
+async function ensureLanguagesLoaded(promise, langs) {
+  const highlighter = await promise;
+  if (!langs) {
+    return highlighter;
+  }
+  const loadedLanguages = highlighter.getLoadedLanguages();
+  for (const lang of langs) {
+    if (typeof lang === "string" && (isSpecialLang(lang) || loadedLanguages.includes(lang))) {
+      continue;
+    }
+    await highlighter.loadLanguage(lang);
+  }
+  return highlighter;
+}
+let shikiEngine = void 0;
+async function createShikiHighlighterInternal({
   langs = [],
   theme = "github-dark",
   themes = {},
   langAlias = {}
 } = {}) {
   theme = theme === "css-variables" ? cssVariablesTheme() : theme;
-  const highlighterOptions = {
+  if (shikiEngine === void 0) {
+    shikiEngine = await loadShikiEngine();
+  }
+  const highlighter = await createHighlighter({
     langs: ["plaintext", ...langs],
     langAlias,
-    themes: Object.values(themes).length ? Object.values(themes) : [theme]
-  };
-  const key = JSON.stringify(highlighterOptions, Object.keys(highlighterOptions).sort());
-  let highlighter;
-  if (cachedHighlighters.has(key)) {
-    highlighter = cachedHighlighters.get(key);
-  } else {
-    highlighter = await createHighlighter(highlighterOptions);
-    cachedHighlighters.set(key, highlighter);
-  }
+    themes: Object.values(themes).length ? Object.values(themes) : [theme],
+    engine: shikiEngine
+  });
   async function highlight(code, lang = "plaintext", options, to) {
     const resolvedLang = langAlias[lang] ?? lang;
     const loadedLanguages = highlighter.getLoadedLanguages();
@@ -54,8 +90,6 @@ async function createShikiHighlighter({
       // they're technically not meta, nor parsed from Shiki's `parseMetaString` API.
       meta: options?.meta ? { __raw: options?.meta } : void 0,
       transformers: [
-        // Extract inline styles to CSS classes for better performance and CSP compliance
-        globalShikiStyleCollector.register(transformerStyleToClass()),
         {
           pre(node) {
             if (inline) {
@@ -68,15 +102,13 @@ async function createShikiHighlighter({
             } = options?.attributes ?? {};
             Object.assign(node.properties, rest);
             const classValue = (normalizePropAsString(node.properties.class) ?? "") + (attributesClass ? ` ${attributesClass}` : "");
+            const styleValue = (normalizePropAsString(node.properties.style) ?? "") + (attributesStyle ? `; ${attributesStyle}` : "");
             node.properties.class = classValue.replace(/shiki/g, "astro-code");
             node.properties.dataLanguage = lang;
             if (options.wrap === false || options.wrap === void 0) {
-              this.addClassToHast(node, "astro-code-overflow");
+              node.properties.style = styleValue + "; overflow-x: auto;";
             } else if (options.wrap === true) {
-              this.addClassToHast(node, "astro-code-overflow astro-code-wrap");
-            }
-            if (attributesStyle) {
-              node.properties.style = attributesStyle;
+              node.properties.style = styleValue + "; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;";
             }
           },
           line(node) {
@@ -90,7 +122,7 @@ async function createShikiHighlighter({
                   innerSpanNode.children.unshift({
                     type: "element",
                     tagName: "span",
-                    properties: { class: "astro-code-no-select" },
+                    properties: { style: "user-select: none;" },
                     children: [{ type: "text", value: start }]
                   });
                 }
@@ -113,6 +145,12 @@ async function createShikiHighlighter({
     },
     codeToHtml(code, lang, options = {}) {
       return highlight(code, lang, options, "html");
+    },
+    loadLanguage(...newLangs) {
+      return highlighter.loadLanguage(...newLangs);
+    },
+    getLoadedLanguages() {
+      return highlighter.getLoadedLanguages();
     }
   };
 }
@@ -120,5 +158,6 @@ function normalizePropAsString(value) {
   return Array.isArray(value) ? value.join(" ") : value;
 }
 export {
+  clearShikiHighlighterCache,
   createShikiHighlighter
 };

package/dist/types.d.ts

@@ -13,7 +13,6 @@ declare module 'vfile' {
             localImagePaths?: string[];
             remoteImagePaths?: string[];
             frontmatter?: Record<string, any>;
-            hasCodeBlocks?: boolean;
         };
     }
 }
@@ -67,8 +66,6 @@ export interface MarkdownProcessorRenderResult {
         localImagePaths: string[];
         remoteImagePaths: string[];
         frontmatter: Record<string, any>;
-        /** Whether the markdown contained code blocks that were syntax highlighted */
-        hasCodeBlocks?: boolean;
     };
 }
 export interface MarkdownHeading {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/markdown-remark",
-  "version": "7.0.0-beta.7",
+  "version": "7.0.0-beta.9",
   "type": "module",
   "author": "withastro",
   "license": "MIT",
@@ -13,12 +13,17 @@
   "homepage": "https://astro.build",
   "main": "./dist/index.js",
   "exports": {
-    ".": "./dist/index.js"
+    ".": "./dist/index.js",
+    "./shiki": "./dist/shiki.js"
   },
   "imports": {
     "#import-plugin": {
       "browser": "./dist/import-plugin-browser.js",
       "default": "./dist/import-plugin-default.js"
+    },
+    "#shiki-engine": {
+      "workerd": "./dist/shiki-engine-workerd.js",
+      "default": "./dist/shiki-engine-default.js"
     }
   },
   "files": [
@@ -36,7 +41,7 @@
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "remark-smartypants": "^3.0.2",
-    "shiki": "^3.22.0",
+    "shiki": "^4.0.0",
     "smol-toml": "^1.6.0",
     "unified": "^11.0.5",
     "unist-util-remove-position": "^5.0.0",
@@ -52,7 +57,7 @@
     "@types/js-yaml": "^4.0.9",
     "@types/mdast": "^4.0.4",
     "@types/unist": "^3.0.3",
-    "esbuild": "^0.24.2",
+    "esbuild": "^0.27.3",
     "mdast-util-mdx-expression": "^2.0.1",
     "astro-scripts": "0.0.14"
   },

package/dist/shiki-style-collector.d.ts

@@ -1,32 +0,0 @@
-import type { ShikiTransformerStyleToClass } from './transformers/style-to-class.js';
-/**
- * Global singleton to collect Shiki styles from multiple transformer instances.
- *
- * Each code block (whether from Code.astro or markdown) creates a new transformer instance.
- * This collector aggregates styles from all instances so they can be bundled into a single
- * CSS file via the virtual module system.
- */
-declare class ShikiStyleCollector {
-    private transformers;
-    /**
-     * Register a transformer instance to collect styles from.
-     * Returns the same transformer to allow chaining.
-     */
-    register(transformer: ShikiTransformerStyleToClass): ShikiTransformerStyleToClass;
-    /**
-     * Collect CSS from all registered transformers.
-     * This is called by the virtual CSS module to generate the final stylesheet.
-     */
-    collectCSS(): string;
-    /**
-     * Clear all registered transformers and their style registries.
-     * Called during HMR in dev mode to prevent stale styles.
-     */
-    clear(): void;
-}
-/**
- * Global instance of the style collector.
- * Shared between Code.astro component and markdown processing.
- */
-export declare const globalShikiStyleCollector: ShikiStyleCollector;
-export {};

package/dist/shiki-style-collector.js

@@ -1,36 +0,0 @@
-class ShikiStyleCollector {
-  transformers = /* @__PURE__ */ new Set();
-  /**
-   * Register a transformer instance to collect styles from.
-   * Returns the same transformer to allow chaining.
-   */
-  register(transformer) {
-    this.transformers.add(transformer);
-    return transformer;
-  }
-  /**
-   * Collect CSS from all registered transformers.
-   * This is called by the virtual CSS module to generate the final stylesheet.
-   */
-  collectCSS() {
-    let css = "";
-    for (const transformer of this.transformers) {
-      css += transformer.getCSS();
-    }
-    return css;
-  }
-  /**
-   * Clear all registered transformers and their style registries.
-   * Called during HMR in dev mode to prevent stale styles.
-   */
-  clear() {
-    for (const transformer of this.transformers) {
-      transformer.clearRegistry();
-    }
-    this.transformers.clear();
-  }
-}
-const globalShikiStyleCollector = new ShikiStyleCollector();
-export {
-  globalShikiStyleCollector
-};

package/dist/transformers/style-to-class.d.ts

@@ -1,18 +0,0 @@
-/**
- * Copied and adapted from https://github.com/shikijs/shiki/blob/main/packages/transformers/src/transformers/style-to-class.ts
- */
-import type { ShikiTransformer } from 'shiki';
-export interface ShikiTransformerStyleToClass extends ShikiTransformer {
-    getClassRegistry: () => Map<string, Record<string, string> | string>;
-    getCSS: () => string;
-    clearRegistry: () => void;
-}
-/**
- * Transform Shiki inline styles to CSS classes.
- * Based on @shikijs/transformers style-to-class transformer.
- *
- * This transformer extracts inline styles from Shiki-generated HTML and converts them
- * to unique class names, allowing CSS to be collected and bundled separately for better
- * performance and CSP compliance.
- */
-export declare function transformerStyleToClass(): ShikiTransformerStyleToClass;

package/dist/transformers/style-to-class.js

@@ -1,75 +0,0 @@
-function transformerStyleToClass() {
-  const classToStyle = /* @__PURE__ */ new Map();
-  function stringifyStyle(style) {
-    return Object.entries(style).map(([key, value]) => `${key}:${value}`).join(";");
-  }
-  function registerStyle(style) {
-    const str = typeof style === "string" ? style : stringifyStyle(style);
-    let className = "__a_" + cyrb53(str);
-    if (!classToStyle.has(className)) {
-      classToStyle.set(className, typeof style === "string" ? style : { ...style });
-    }
-    return className;
-  }
-  return {
-    name: "@astrojs/markdown-remark:style-to-class",
-    pre(node) {
-      if (!node.properties.style) return;
-      const className = registerStyle(node.properties.style);
-      delete node.properties.style;
-      this.addClassToHast(node, className);
-    },
-    tokens(lines) {
-      for (const line of lines) {
-        for (const token of line) {
-          let className;
-          if (token.htmlStyle) {
-            className = registerStyle(token.htmlStyle);
-            token.htmlStyle = {};
-          } else {
-            className = registerStyle({ color: token.color });
-            token.color = "";
-          }
-          token.htmlAttrs ||= {};
-          if (!token.htmlAttrs.class) {
-            token.htmlAttrs.class = className;
-          } else {
-            token.htmlAttrs.class += ` ${className}`;
-          }
-        }
-      }
-    },
-    getClassRegistry() {
-      return classToStyle;
-    },
-    getCSS() {
-      let css = ".astro-code-overflow{overflow-x:auto}";
-      css += ".astro-code-wrap{white-space:pre-wrap;word-wrap:break-word}";
-      css += ".astro-code-no-select{user-select:none}";
-      for (const [className, style] of classToStyle.entries()) {
-        css += `.${className}{${typeof style === "string" ? style : stringifyStyle(style)}}`;
-      }
-      return css;
-    },
-    clearRegistry() {
-      classToStyle.clear();
-    }
-  };
-}
-function cyrb53(str, seed = 0) {
-  let h1 = 3735928559 ^ seed;
-  let h2 = 1103547991 ^ seed;
-  for (let i = 0, ch; i < str.length; i++) {
-    ch = str.charCodeAt(i);
-    h1 = Math.imul(h1 ^ ch, 2654435761);
-    h2 = Math.imul(h2 ^ ch, 1597334677);
-  }
-  h1 = Math.imul(h1 ^ h1 >>> 16, 2246822507);
-  h1 ^= Math.imul(h2 ^ h2 >>> 13, 3266489909);
-  h2 = Math.imul(h2 ^ h2 >>> 16, 2246822507);
-  h2 ^= Math.imul(h1 ^ h1 >>> 13, 3266489909);
-  return (4294967296 * (2097151 & h2) + (h1 >>> 0)).toString(36).slice(0, 6);
-}
-export {
-  transformerStyleToClass
-};