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

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

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

package/dist/shiki.js

@@ -3,13 +3,13 @@ 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();
+let shikiEngine = void 0;
 async function createShikiHighlighter({
   langs = [],
   theme = "github-dark",
@@ -17,10 +17,14 @@ async function createShikiHighlighter({
   langAlias = {}
 } = {}) {
   theme = theme === "css-variables" ? cssVariablesTheme() : theme;
+  if (shikiEngine === void 0) {
+    shikiEngine = await loadShikiEngine();
+  }
   const highlighterOptions = {
     langs: ["plaintext", ...langs],
     langAlias,
-    themes: Object.values(themes).length ? Object.values(themes) : [theme]
+    themes: Object.values(themes).length ? Object.values(themes) : [theme],
+    engine: shikiEngine
   };
   const key = JSON.stringify(highlighterOptions, Object.keys(highlighterOptions).sort());
   let highlighter;
@@ -54,8 +58,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 +70,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 +90,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 }]
                   });
                 }

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.8",
   "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": [
@@ -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
-};