@astrojs/markdown-remark 4.2.1 → 4.3.0

package/dist/frontmatter-injection.d.ts

@@ -1,4 +1,4 @@
-import type { VFileData as Data, VFile } from 'vfile';
+import type { VFile, VFileData as Data } from 'vfile';
 import type { MarkdownAstroData } from './types.js';
 export declare class InvalidAstroDataError extends TypeError {
 }

package/dist/highlight.d.ts

@@ -0,0 +1,13 @@
+import type { Root } from 'hast';
+type Highlighter = (code: string, language: string) => string;
+/**
+ * A hast utility to syntax highlight code blocks with a given syntax highlighter.
+ *
+ * @param tree
+ *   The hast tree in which to syntax highlight code blocks.
+ * @param highlighter
+ *   A fnction which receives the code and language, and returns the HTML of a syntax
+ *   highlighted `<pre>` element.
+ */
+export declare function highlightCodeBlocks(tree: Root, highlighter: Highlighter): void;
+export {};

package/dist/highlight.js

@@ -0,0 +1,44 @@
+import { fromHtml } from "hast-util-from-html";
+import { toText } from "hast-util-to-text";
+import { removePosition } from "unist-util-remove-position";
+import { visitParents } from "unist-util-visit-parents";
+const languagePattern = /\blanguage-(\S+)\b/;
+function highlightCodeBlocks(tree, highlighter) {
+  visitParents(tree, { type: "element", tagName: "code" }, (node, ancestors) => {
+    const parent = ancestors.at(-1);
+    if (parent?.type !== "element" || parent.tagName !== "pre") {
+      return;
+    }
+    if (parent.children.length !== 1) {
+      return;
+    }
+    let languageMatch;
+    let { className } = node.properties;
+    if (typeof className === "string") {
+      languageMatch = className.match(languagePattern);
+    } else if (Array.isArray(className)) {
+      for (const cls of className) {
+        if (typeof cls !== "string") {
+          continue;
+        }
+        languageMatch = cls.match(languagePattern);
+        if (languageMatch) {
+          break;
+        }
+      }
+    }
+    if (languageMatch?.[1] === "math") {
+      return;
+    }
+    const code = toText(node, { whitespace: "pre" });
+    const html = highlighter(code, languageMatch?.[1] || "plaintext");
+    const replacement = fromHtml(html, { fragment: true }).children[0];
+    removePosition(replacement);
+    const grandParent = ancestors.at(-2);
+    const index = grandParent.children.indexOf(parent);
+    grandParent.children[index] = replacement;
+  });
+}
+export {
+  highlightCodeBlocks
+};

package/dist/import-plugin-default.js

@@ -1,6 +1,6 @@
-import { resolve as importMetaResolve } from "import-meta-resolve";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
+import { resolve as importMetaResolve } from "import-meta-resolve";
 let cwdUrlStr;
 async function importPlugin(p) {
   try {

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import type { AstroMarkdownOptions, MarkdownProcessor } from './types.js';
 export { InvalidAstroDataError, setVfileFrontmatter } from './frontmatter-injection.js';
 export { rehypeHeadingIds } from './rehype-collect-headings.js';
 export { remarkCollectImages } from './remark-collect-images.js';
+export { rehypePrism } from './rehype-prism.js';
+export { rehypeShiki } from './rehype-shiki.js';
 export { remarkPrism } from './remark-prism.js';
 export { remarkShiki } from './remark-shiki.js';
 export { createShikiHighlighter, replaceCssVariables, type ShikiHighlighter } from './shiki.js';

package/dist/index.js

@@ -5,9 +5,9 @@ import {
 } from "./frontmatter-injection.js";
 import { loadPlugins } from "./load-plugins.js";
 import { rehypeHeadingIds } from "./rehype-collect-headings.js";
+import { rehypePrism } from "./rehype-prism.js";
+import { rehypeShiki } from "./rehype-shiki.js";
 import { remarkCollectImages } from "./remark-collect-images.js";
-import { remarkPrism } from "./remark-prism.js";
-import { remarkShiki } from "./remark-shiki.js";
 import rehypeRaw from "rehype-raw";
 import rehypeStringify from "rehype-stringify";
 import remarkGfm from "remark-gfm";
@@ -20,8 +20,10 @@ import { rehypeImages } from "./rehype-images.js";
 import { InvalidAstroDataError as InvalidAstroDataError2, setVfileFrontmatter as setVfileFrontmatter2 } from "./frontmatter-injection.js";
 import { rehypeHeadingIds as rehypeHeadingIds2 } from "./rehype-collect-headings.js";
 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 { rehypePrism as rehypePrism2 } from "./rehype-prism.js";
+import { rehypeShiki as rehypeShiki2 } from "./rehype-shiki.js";
+import { remarkPrism } from "./remark-prism.js";
+import { remarkShiki } from "./remark-shiki.js";
 import { createShikiHighlighter, replaceCssVariables } from "./shiki.js";
 export * from "./types.js";
 const markdownConfigDefaults = {
@@ -29,7 +31,7 @@ const markdownConfigDefaults = {
   shikiConfig: {
     langs: [],
     theme: "github-dark",
-    experimentalThemes: {},
+    themes: {},
     wrap: false,
     transformers: []
   },
@@ -65,11 +67,6 @@ async function createMarkdownProcessor(opts) {
     parser.use(plugin, pluginOpts);
   }
   if (!isPerformanceBenchmark) {
-    if (syntaxHighlight === "shiki") {
-      parser.use(remarkShiki, shikiConfig);
-    } else if (syntaxHighlight === "prism") {
-      parser.use(remarkPrism);
-    }
     parser.use(remarkCollectImages);
   }
   parser.use(remarkRehype, {
@@ -77,6 +74,13 @@ async function createMarkdownProcessor(opts) {
     passThrough: [],
     ...remarkRehypeOptions
   });
+  if (!isPerformanceBenchmark) {
+    if (syntaxHighlight === "shiki") {
+      parser.use(rehypeShiki, shikiConfig);
+    } else if (syntaxHighlight === "prism") {
+      parser.use(rehypePrism);
+    }
+  }
   for (const [plugin, pluginOpts] of loadedRehypePlugins) {
     parser.use(plugin, pluginOpts);
   }
@@ -132,9 +136,11 @@ export {
   createShikiHighlighter,
   markdownConfigDefaults,
   rehypeHeadingIds2 as rehypeHeadingIds,
+  rehypePrism2 as rehypePrism,
+  rehypeShiki2 as rehypeShiki,
   remarkCollectImages2 as remarkCollectImages,
-  remarkPrism2 as remarkPrism,
-  remarkShiki2 as remarkShiki,
+  remarkPrism,
+  remarkShiki,
   replaceCssVariables,
   setVfileFrontmatter2 as setVfileFrontmatter
 };

package/dist/rehype-prism.d.ts

@@ -0,0 +1,3 @@
+import type { Root } from 'hast';
+import type { Plugin } from 'unified';
+export declare const rehypePrism: Plugin<[], Root>;

package/dist/rehype-prism.js

@@ -0,0 +1,11 @@
+import { runHighlighterWithAstro } from "@astrojs/prism/dist/highlighter";
+import { highlightCodeBlocks } from "./highlight.js";
+const rehypePrism = () => (tree) => {
+  highlightCodeBlocks(tree, (code, language) => {
+    let { html, classLanguage } = runHighlighterWithAstro(language, code);
+    return `<pre class="${classLanguage}"><code is:raw class="${classLanguage}">${html}</code></pre>`;
+  });
+};
+export {
+  rehypePrism
+};

package/dist/rehype-shiki.d.ts

@@ -0,0 +1,4 @@
+import type { Root } from 'hast';
+import type { Plugin } from 'unified';
+import type { ShikiConfig } from './types.js';
+export declare const rehypeShiki: Plugin<[ShikiConfig?], Root>;

package/dist/rehype-shiki.js

@@ -0,0 +1,13 @@
+import { highlightCodeBlocks } from "./highlight.js";
+import { createShikiHighlighter } from "./shiki.js";
+const rehypeShiki = (config) => {
+  let highlighterAsync;
+  return async (tree) => {
+    highlighterAsync ??= createShikiHighlighter(config);
+    const highlighter = await highlighterAsync;
+    highlightCodeBlocks(tree, highlighter.highlight);
+  };
+};
+export {
+  rehypeShiki
+};

package/dist/remark-prism.d.ts

@@ -1,2 +1,5 @@
 import type { RemarkPlugin } from './types.js';
+/**
+ * @deprecated Use `rehypePrism` instead
+ */
 export declare function remarkPrism(): ReturnType<RemarkPlugin>;

package/dist/remark-shiki.d.ts

@@ -1,2 +1,5 @@
 import type { RemarkPlugin, ShikiConfig } from './types.js';
+/**
+ * @deprecated Use `rehypeShiki` instead
+ */
 export declare function remarkShiki(config?: ShikiConfig): ReturnType<RemarkPlugin>;

package/dist/shiki.d.ts

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

package/dist/shiki.js

@@ -1,11 +1,11 @@
-import { bundledLanguages, createCssVariablesTheme, getHighlighter } from "shikiji";
+import { bundledLanguages, createCssVariablesTheme, getHighlighter } from "shiki";
 import { visit } from "unist-util-visit";
 const ASTRO_COLOR_REPLACEMENTS = {
   "--astro-code-foreground": "--astro-code-color-text",
   "--astro-code-background": "--astro-code-color-background"
 };
 const COLOR_REPLACEMENT_REGEX = new RegExp(
-  `(${Object.keys(ASTRO_COLOR_REPLACEMENTS).join("|")})`,
+  `${Object.keys(ASTRO_COLOR_REPLACEMENTS).join("|")}`,
   "g"
 );
 let _cssVariablesTheme;
@@ -13,11 +13,10 @@ const cssVariablesTheme = () => _cssVariablesTheme ?? (_cssVariablesTheme = crea
 async function createShikiHighlighter({
   langs = [],
   theme = "github-dark",
-  experimentalThemes = {},
+  themes = {},
   wrap = false,
   transformers = []
 } = {}) {
-  const themes = experimentalThemes;
   theme = theme === "css-variables" ? cssVariablesTheme() : theme;
   const highlighter = await getHighlighter({
     langs: langs.length ? langs : Object.keys(bundledLanguages),
@@ -41,8 +40,14 @@ async function createShikiHighlighter({
               if (inline) {
                 node.tagName = "code";
               }
-              const classValue = normalizePropAsString(node.properties.class) ?? "";
-              const styleValue = normalizePropAsString(node.properties.style) ?? "";
+              const {
+                class: attributesClass,
+                style: attributesStyle,
+                ...rest
+              } = 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");
               if (wrap === false) {
                 node.properties.style = styleValue + "; overflow-x: auto;";
@@ -74,7 +79,7 @@ async function createShikiHighlighter({
               }
             },
             root(node) {
-              if (Object.values(experimentalThemes).length) {
+              if (Object.values(themes).length) {
                 return;
               }
               const themeName = typeof theme === "string" ? theme : theme.name;

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 import type * as hast from 'hast';
 import type * as mdast from 'mdast';
 import type { Options as RemarkRehypeOptions } from 'remark-rehype';
-import type { BuiltinTheme, LanguageRegistration, ShikijiTransformer, ThemeRegistration, ThemeRegistrationRaw } from 'shikiji';
+import type { BuiltinTheme, LanguageRegistration, ShikiTransformer, ThemeRegistration, ThemeRegistrationRaw } from 'shiki';
 import type * as unified from 'unified';
 import type { VFile } from 'vfile';
 export type { Node } from 'unist';
@@ -17,9 +17,9 @@ export type ThemePresets = BuiltinTheme | 'css-variables';
 export interface ShikiConfig {
     langs?: LanguageRegistration[];
     theme?: ThemePresets | ThemeRegistration | ThemeRegistrationRaw;
-    experimentalThemes?: Record<string, ThemePresets | ThemeRegistration | ThemeRegistrationRaw>;
+    themes?: Record<string, ThemePresets | ThemeRegistration | ThemeRegistrationRaw>;
     wrap?: boolean | null;
-    transformers?: ShikijiTransformer[];
+    transformers?: ShikiTransformer[];
 }
 export interface AstroMarkdownOptions {
     syntaxHighlight?: 'shiki' | 'prism' | false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/markdown-remark",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "type": "module",
   "author": "withastro",
   "license": "MIT",
@@ -28,6 +28,8 @@
   "dependencies": {
     "@astrojs/prism": "^3.0.0",
     "github-slugger": "^2.0.0",
+    "hast-util-from-html": "^2.0.0",
+    "hast-util-to-text": "^4.0.0",
     "import-meta-resolve": "^4.0.0",
     "mdast-util-definitions": "^6.0.0",
     "rehype-raw": "^7.0.0",
@@ -36,9 +38,11 @@
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.0.0",
     "remark-smartypants": "^2.0.0",
-    "shikiji": "^0.9.18",
+    "shiki": "^1.1.2",
     "unified": "^11.0.4",
+    "unist-util-remove-position": "^5.0.0",
     "unist-util-visit": "^5.0.0",
+    "unist-util-visit-parents": "^6.0.0",
     "vfile": "^6.0.1"
   },
   "devDependencies": {
@@ -48,10 +52,8 @@
     "@types/mdast": "^4.0.3",
     "@types/mocha": "^10.0.4",
     "@types/unist": "^3.0.2",
-    "chai": "^4.3.7",
     "esbuild": "^0.19.6",
     "mdast-util-mdx-expression": "^2.0.0",
-    "mocha": "^10.2.0",
     "astro-scripts": "0.0.14"
   },
   "publishConfig": {
@@ -63,6 +65,6 @@
     "build:ci": "astro-scripts build \"src/**/*.ts\"",
     "postbuild": "astro-scripts copy \"src/**/*.js\"",
     "dev": "astro-scripts dev \"src/**/*.ts\"",
-    "test": "mocha --exit --timeout 20000"
+    "test": "astro-scripts test \"test/**/*.test.js\""
   }
 }