@astrojs/markdown-remark 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @astrojs/markdown-remark
 
+## 0.6.1
+
+### Patch Changes
+
+- [#2534](https://github.com/withastro/astro/pull/2534) [`cfeaa941`](https://github.com/withastro/astro/commit/cfeaa9414acdecec6f5d66ee0e33fe4fde574eee) Thanks [@JuanM04](https://github.com/JuanM04)! - Now you can use local plugins by passing a function instead of an `import`
+
+* [#2518](https://github.com/withastro/astro/pull/2518) [`2bc91543`](https://github.com/withastro/astro/commit/2bc91543ceeb5f3dd45e201bf75d79f186e85141) Thanks [@JuanM04](https://github.com/JuanM04)! - Added the ability to use custom themes and langs with Shiki (`<Code />` and `@astrojs/markdown-remark`)
+
+- [#2497](https://github.com/withastro/astro/pull/2497) [`6fe1b027`](https://github.com/withastro/astro/commit/6fe1b0279fce5a7a0e90ff79746ea0b641da3e21) Thanks [@JuanM04](https://github.com/JuanM04)! - Add Shiki as an alternative to Prism
+
+* [#2518](https://github.com/withastro/astro/pull/2518) [`2bc91543`](https://github.com/withastro/astro/commit/2bc91543ceeb5f3dd45e201bf75d79f186e85141) Thanks [@JuanM04](https://github.com/JuanM04)! - Added `wrap` to Shiki config
+
+- [#2564](https://github.com/withastro/astro/pull/2564) [`d71c4620`](https://github.com/withastro/astro/commit/d71c46207af40de6811596ca4f5e10aa9006377b) Thanks [@JuanM04](https://github.com/JuanM04)! - Fixed curly braces inside Shiki codeblocks
+
+## 0.6.1-next.2
+
+### Patch Changes
+
+- [#2564](https://github.com/withastro/astro/pull/2564) [`d71c4620`](https://github.com/withastro/astro/commit/d71c46207af40de6811596ca4f5e10aa9006377b) Thanks [@JuanM04](https://github.com/JuanM04)! - Fixed curly braces inside Shiki codeblocks
+
+## 0.6.1-next.1
+
+### Patch Changes
+
+- [#2534](https://github.com/withastro/astro/pull/2534) [`cfeaa941`](https://github.com/withastro/astro/commit/cfeaa9414acdecec6f5d66ee0e33fe4fde574eee) Thanks [@JuanM04](https://github.com/JuanM04)! - Now you can use local plugins by passing a function instead of an `import`
+
+* [#2518](https://github.com/withastro/astro/pull/2518) [`2bc91543`](https://github.com/withastro/astro/commit/2bc91543ceeb5f3dd45e201bf75d79f186e85141) Thanks [@JuanM04](https://github.com/JuanM04)! - Added the ability to use custom themes and langs with Shiki (`<Code />` and `@astrojs/markdown-remark`)
+
+- [#2518](https://github.com/withastro/astro/pull/2518) [`2bc91543`](https://github.com/withastro/astro/commit/2bc91543ceeb5f3dd45e201bf75d79f186e85141) Thanks [@JuanM04](https://github.com/JuanM04)! - Added `wrap` to Shiki config
+
+## 0.6.1-next.0
+
+### Patch Changes
+
+- [#2497](https://github.com/withastro/astro/pull/2497) [`6fe1b027`](https://github.com/withastro/astro/commit/6fe1b0279fce5a7a0e90ff79746ea0b641da3e21) Thanks [@JuanM04](https://github.com/JuanM04)! - Add Shiki as an alternative to Prism
+
 ## 0.6.0
 
 ### Minor Changes
@@ -105,10 +141,10 @@
 
   ```js
   export default {
-    markdownOptions: {
-      remarkPlugins: ['remark-slug', ['remark-autolink-headings', { behavior: 'prepend' }]],
-      rehypePlugins: ['rehype-slug', ['rehype-autolink-headings', { behavior: 'prepend' }]],
-    },
+  	markdownOptions: {
+  		remarkPlugins: ['remark-slug', ['remark-autolink-headings', { behavior: 'prepend' }]],
+  		rehypePlugins: ['rehype-slug', ['rehype-autolink-headings', { behavior: 'prepend' }]],
+  	},
   };
   ```
 

package/dist/index.js

@@ -26,6 +26,7 @@ import { remarkJsx, loadRemarkJsx } from "./remark-jsx.js";
 import rehypeJsx from "./rehype-jsx.js";
 import rehypeEscape from "./rehype-escape.js";
 import remarkPrism from "./remark-prism.js";
+import remarkShiki from "./remark-shiki.js";
 import remarkUnwrap from "./remark-unwrap.js";
 import { loadPlugins } from "./load-plugins.js";
 import { unified } from "unified";
@@ -42,10 +43,12 @@ async function renderMarkdownWithFrontmatter(contents, opts) {
 const DEFAULT_REMARK_PLUGINS = ["remark-gfm", "remark-smartypants"];
 const DEFAULT_REHYPE_PLUGINS = ["rehype-slug"];
 async function renderMarkdown(content, opts) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   let { remarkPlugins = [], rehypePlugins = [] } = opts != null ? opts : {};
   const scopedClassName = (_a = opts == null ? void 0 : opts.$) == null ? void 0 : _a.scopedClassName;
   const mode = (_b = opts == null ? void 0 : opts.mode) != null ? _b : "mdx";
+  const syntaxHighlight = (_c = opts == null ? void 0 : opts.syntaxHighlight) != null ? _c : "prism";
+  const shikiConfig = (_d = opts == null ? void 0 : opts.shikiConfig) != null ? _d : {};
   const isMDX = mode === "mdx";
   const { headers, rehypeCollectHeaders } = createCollectHeaders();
   await Promise.all([loadRemarkExpressions(), loadRemarkJsx()]);
@@ -62,7 +65,11 @@ async function renderMarkdown(content, opts) {
   if (scopedClassName) {
     parser.use([scopedStyles(scopedClassName)]);
   }
-  parser.use([remarkPrism(scopedClassName)]);
+  if (syntaxHighlight === "prism") {
+    parser.use([remarkPrism(scopedClassName)]);
+  } else if (syntaxHighlight === "shiki") {
+    parser.use([await remarkShiki(shikiConfig)]);
+  }
   parser.use([[markdownToHtml, { allowDangerousHtml: true, passThrough: ["raw", "mdxTextExpression", "mdxJsxTextElement", "mdxJsxFlowElement"] }]]);
   loadedRehypePlugins.forEach(([plugin, opts2]) => {
     parser.use([[plugin, opts2]]);
@@ -89,4 +96,4 @@ export {
   renderMarkdown,
   renderMarkdownWithFrontmatter
 };
-//# sourceMappingURL=data:application/json;base64,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
+//# sourceMappingURL=data:application/json;base64,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

package/dist/load-plugins.d.ts

@@ -1,3 +1,3 @@
 import * as unified from 'unified';
 import type { Plugin } from './types';
-export declare function loadPlugins(items: Plugin[]): Promise<[unified.Plugin] | [unified.Plugin, any]>[];
+export declare function loadPlugins(items: Plugin[]): Promise<[unified.Plugin, any?]>[];

package/dist/load-plugins.js

@@ -1,21 +1,22 @@
 async function importPlugin(p) {
   if (typeof p === "string") {
-    return await import(p);
+    const importResult = await import(p);
+    return importResult.default;
   }
-  return await p;
+  return p;
 }
 function loadPlugins(items) {
   return items.map((p) => {
     return new Promise((resolve, reject) => {
       if (Array.isArray(p)) {
         const [plugin, opts] = p;
-        return importPlugin(plugin).then((m) => resolve([m.default, opts])).catch((e) => reject(e));
+        return importPlugin(plugin).then((m) => resolve([m, opts])).catch((e) => reject(e));
       }
-      return importPlugin(p).then((m) => resolve([m.default])).catch((e) => reject(e));
+      return importPlugin(p).then((m) => resolve([m])).catch((e) => reject(e));
     });
   });
 }
 export {
   loadPlugins
 };
-//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vc3JjL2xvYWQtcGx1Z2lucy50cyJdLAogICJtYXBwaW5ncyI6ICJBQUdBLDRCQUE0QixHQUFzRDtBQUNqRixNQUFJLE9BQU8sTUFBTSxVQUFVO0FBQzFCLFdBQU8sTUFBTSxPQUFPO0FBQUE7QUFHckIsU0FBTyxNQUFNO0FBQUE7QUFHUCxxQkFBcUIsT0FBc0U7QUFDakcsU0FBTyxNQUFNLElBQUksQ0FBQyxNQUFNO0FBQ3ZCLFdBQU8sSUFBSSxRQUFRLENBQUMsU0FBUyxXQUFXO0FBQ3ZDLFVBQUksTUFBTSxRQUFRLElBQUk7QUFDckIsY0FBTSxDQUFDLFFBQVEsUUFBUTtBQUN2QixlQUFPLGFBQWEsUUFDbEIsS0FBSyxDQUFDLE1BQU0sUUFBUSxDQUFDLEVBQUUsU0FBUyxRQUNoQyxNQUFNLENBQUMsTUFBTSxPQUFPO0FBQUE7QUFHdkIsYUFBTyxhQUFhLEdBQ2xCLEtBQUssQ0FBQyxNQUFNLFFBQVEsQ0FBQyxFQUFFLFdBQ3ZCLE1BQU0sQ0FBQyxNQUFNLE9BQU87QUFBQTtBQUFBO0FBQUE7IiwKICAibmFtZXMiOiBbXQp9Cg==
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vc3JjL2xvYWQtcGx1Z2lucy50cyJdLAogICJtYXBwaW5ncyI6ICJBQUdBLDRCQUE0QixHQUFxRDtBQUNoRixNQUFJLE9BQU8sTUFBTSxVQUFVO0FBQzFCLFVBQU0sZUFBZSxNQUFNLE9BQU87QUFDbEMsV0FBTyxhQUFhO0FBQUE7QUFHckIsU0FBTztBQUFBO0FBR0QscUJBQXFCLE9BQW9EO0FBQy9FLFNBQU8sTUFBTSxJQUFJLENBQUMsTUFBTTtBQUN2QixXQUFPLElBQUksUUFBUSxDQUFDLFNBQVMsV0FBVztBQUN2QyxVQUFJLE1BQU0sUUFBUSxJQUFJO0FBQ3JCLGNBQU0sQ0FBQyxRQUFRLFFBQVE7QUFDdkIsZUFBTyxhQUFhLFFBQ2xCLEtBQUssQ0FBQyxNQUFNLFFBQVEsQ0FBQyxHQUFHLFFBQ3hCLE1BQU0sQ0FBQyxNQUFNLE9BQU87QUFBQTtBQUd2QixhQUFPLGFBQWEsR0FDbEIsS0FBSyxDQUFDLE1BQU0sUUFBUSxDQUFDLEtBQ3JCLE1BQU0sQ0FBQyxNQUFNLE9BQU87QUFBQTtBQUFBO0FBQUE7IiwKICAibmFtZXMiOiBbXQp9Cg==

package/dist/remark-shiki.d.ts

@@ -0,0 +1,30 @@
+import shiki from 'shiki';
+export interface ShikiConfig {
+    /**
+     * The languages loaded to Shiki.
+     * Supports all languages listed here: https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages
+     * Instructions for loading a custom language: https://github.com/shikijs/shiki/blob/main/docs/languages.md#supporting-your-own-languages-with-shiki
+     *
+     * @default []
+     */
+    langs?: shiki.ILanguageRegistration[];
+    /**
+     * The styling theme.
+     * Supports all themes listed here: https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
+     * Instructions for loading a custom theme: https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme
+     *
+     * @default "github-dark"
+     */
+    theme?: shiki.IThemeRegistration;
+    /**
+     * Enable word wrapping.
+     *  - true: enabled.
+     *  - false: enabled.
+     *  - null: All overflow styling removed. Code will overflow the element by default.
+     *
+     * @default false
+     */
+    wrap?: boolean | null;
+}
+declare const remarkShiki: ({ langs, theme, wrap }: ShikiConfig) => Promise<() => (tree: any) => void>;
+export default remarkShiki;

package/dist/remark-shiki.js

@@ -0,0 +1,29 @@
+import shiki from "shiki";
+import { visit } from "unist-util-visit";
+const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false }) => {
+  const highlighter = await shiki.getHighlighter({ theme });
+  for (const lang of langs) {
+    await highlighter.loadLanguage(lang);
+  }
+  return () => (tree) => {
+    visit(tree, "code", (node) => {
+      var _a;
+      let html = highlighter.codeToHtml(node.value, { lang: (_a = node.lang) != null ? _a : "plaintext" });
+      html = html.replace('<pre class="shiki"', '<pre data-astro-raw class="astro-code"');
+      html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-');
+      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;"');
+      }
+      node.type = "html";
+      node.value = html;
+      node.children = [];
+    });
+  };
+};
+var remark_shiki_default = remarkShiki;
+export {
+  remark_shiki_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vc3JjL3JlbWFyay1zaGlraS50cyJdLAogICJtYXBwaW5ncyI6ICJBQUFBO0FBQ0E7QUE4QkEsTUFBTSxjQUFjLE9BQU8sRUFBRSxRQUFRLElBQUksUUFBUSxlQUFlLE9BQU8sWUFBeUI7QUFDL0YsUUFBTSxjQUFjLE1BQU0sTUFBTSxlQUFlLEVBQUU7QUFFakQsYUFBVyxRQUFRLE9BQU87QUFDekIsVUFBTSxZQUFZLGFBQWE7QUFBQTtBQUdoQyxTQUFPLE1BQU0sQ0FBQyxTQUFjO0FBQzNCLFVBQU0sTUFBTSxRQUFRLENBQUMsU0FBUztBQXZDaEM7QUF3Q0csVUFBSSxPQUFPLFlBQVksV0FBVyxLQUFLLE9BQU8sRUFBRSxNQUFNLFdBQUssU0FBTCxZQUFhO0FBR25FLGFBQU8sS0FBSyxRQUFRLHNCQUFzQjtBQUUxQyxhQUFPLEtBQUssUUFBUSw4Q0FBOEM7QUFHbEUsVUFBSSxTQUFTLE9BQU87QUFDbkIsZUFBTyxLQUFLLFFBQVEsaUJBQWlCO0FBQUEsaUJBQzNCLFNBQVMsTUFBTTtBQUN6QixlQUFPLEtBQUssUUFBUSxpQkFBaUI7QUFBQTtBQUd0QyxXQUFLLE9BQU87QUFDWixXQUFLLFFBQVE7QUFDYixXQUFLLFdBQVc7QUFBQTtBQUFBO0FBQUE7QUFLbkIsSUFBTyx1QkFBUTsiLAogICJuYW1lcyI6IFtdCn0K

package/dist/types.d.ts

@@ -1,10 +1,10 @@
-import * as unified from 'unified';
-export declare type UnifiedPluginImport = Promise<{
-    default: unified.Plugin;
-}>;
-export declare type Plugin = string | [string, any] | UnifiedPluginImport | [UnifiedPluginImport, any];
+import type * as unified from 'unified';
+import type { ShikiConfig } from './remark-shiki';
+export declare type Plugin = string | [string, any] | unified.Plugin | [unified.Plugin, any];
 export interface AstroMarkdownOptions {
     mode?: 'md' | 'mdx';
+    syntaxHighlight?: 'prism' | 'shiki' | false;
+    shikiConfig?: ShikiConfig;
     remarkPlugins?: Plugin[];
     rehypePlugins?: Plugin[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/markdown-remark",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "type": "module",
   "author": "withastro",
   "license": "MIT",
@@ -38,6 +38,7 @@
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.0.1",
     "remark-smartypants": "^2.0.0",
+    "shiki": "^0.10.0",
     "unified": "^10.1.1",
     "unist-util-map": "^3.0.0",
     "unist-util-visit": "^4.1.0"

package/src/index.ts

@@ -9,6 +9,7 @@ import { remarkJsx, loadRemarkJsx } from './remark-jsx.js';
 import rehypeJsx from './rehype-jsx.js';
 import rehypeEscape from './rehype-escape.js';
 import remarkPrism from './remark-prism.js';
+import remarkShiki from './remark-shiki.js';
 import remarkUnwrap from './remark-unwrap.js';
 import { loadPlugins } from './load-plugins.js';
 
@@ -37,6 +38,8 @@ export async function renderMarkdown(content: string, opts?: MarkdownRenderingOp
 	let { remarkPlugins = [], rehypePlugins = [] } = opts ?? {};
 	const scopedClassName = opts?.$?.scopedClassName;
 	const mode = opts?.mode ?? 'mdx';
+	const syntaxHighlight = opts?.syntaxHighlight ?? 'prism';
+	const shikiConfig = opts?.shikiConfig ?? {};
 	const isMDX = mode === 'mdx';
 	const { headers, rehypeCollectHeaders } = createCollectHeaders();
 
@@ -64,7 +67,12 @@ export async function renderMarkdown(content: string, opts?: MarkdownRenderingOp
 		parser.use([scopedStyles(scopedClassName)]);
 	}
 
-	parser.use([remarkPrism(scopedClassName)]);
+	if (syntaxHighlight === 'prism') {
+		parser.use([remarkPrism(scopedClassName)]);
+	} else if (syntaxHighlight === 'shiki') {
+		parser.use([await remarkShiki(shikiConfig)]);
+	}
+
 	parser.use([[markdownToHtml as any, { allowDangerousHtml: true, passThrough: ['raw', 'mdxTextExpression', 'mdxJsxTextElement', 'mdxJsxFlowElement'] }]]);
 
 	loadedRehypePlugins.forEach(([plugin, opts]) => {

package/src/load-plugins.ts

@@ -1,26 +1,27 @@
 import * as unified from 'unified';
-import type { Plugin, UnifiedPluginImport } from './types';
+import type { Plugin } from './types';
 
-async function importPlugin(p: string | UnifiedPluginImport): UnifiedPluginImport {
+async function importPlugin(p: string | unified.Plugin): Promise<unified.Plugin> {
 	if (typeof p === 'string') {
-		return await import(p);
+		const importResult = await import(p);
+		return importResult.default;
 	}
 
-	return await p;
+	return p;
 }
 
-export function loadPlugins(items: Plugin[]): Promise<[unified.Plugin] | [unified.Plugin, any]>[] {
+export function loadPlugins(items: Plugin[]): Promise<[unified.Plugin, any?]>[] {
 	return items.map((p) => {
 		return new Promise((resolve, reject) => {
 			if (Array.isArray(p)) {
 				const [plugin, opts] = p;
 				return importPlugin(plugin)
-					.then((m) => resolve([m.default, opts]))
+					.then((m) => resolve([m, opts]))
 					.catch((e) => reject(e));
 			}
 
 			return importPlugin(p)
-				.then((m) => resolve([m.default]))
+				.then((m) => resolve([m]))
 				.catch((e) => reject(e));
 		});
 	});

package/src/remark-shiki.ts

@@ -0,0 +1,62 @@
+import shiki from 'shiki';
+import { visit } from 'unist-util-visit';
+
+export interface ShikiConfig {
+	/**
+	 * The languages loaded to Shiki.
+	 * Supports all languages listed here: https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages
+	 * Instructions for loading a custom language: https://github.com/shikijs/shiki/blob/main/docs/languages.md#supporting-your-own-languages-with-shiki
+	 *
+	 * @default []
+	 */
+	langs?: shiki.ILanguageRegistration[];
+	/**
+	 * The styling theme.
+	 * Supports all themes listed here: https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
+	 * Instructions for loading a custom theme: https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme
+	 *
+	 * @default "github-dark"
+	 */
+	theme?: shiki.IThemeRegistration;
+	/**
+	 * Enable word wrapping.
+	 *  - true: enabled.
+	 *  - false: enabled.
+	 *  - null: All overflow styling removed. Code will overflow the element by default.
+	 *
+	 * @default false
+	 */
+	wrap?: boolean | null;
+}
+
+const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => {
+	const highlighter = await shiki.getHighlighter({ theme });
+
+	for (const lang of langs) {
+		await highlighter.loadLanguage(lang);
+	}
+
+	return () => (tree: any) => {
+		visit(tree, 'code', (node) => {
+			let html = highlighter.codeToHtml(node.value, { lang: node.lang ?? 'plaintext' });
+
+			// Replace "shiki" class naming with "astro" and add "data-astro-raw".
+			html = html.replace('<pre class="shiki"', '<pre data-astro-raw class="astro-code"');
+			// Replace "shiki" css variable naming with "astro".
+			html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-');
+			// Handle code wrapping
+			// if wrap=null, do nothing.
+			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;"');
+			}
+
+			node.type = 'html';
+			node.value = html;
+			node.children = [];
+		});
+	};
+};
+
+export default remarkShiki;

package/src/types.ts

@@ -1,10 +1,12 @@
-import * as unified from 'unified';
+import type * as unified from 'unified';
+import type { ShikiConfig } from './remark-shiki';
 
-export type UnifiedPluginImport = Promise<{ default: unified.Plugin }>;
-export type Plugin = string | [string, any] | UnifiedPluginImport | [UnifiedPluginImport, any];
+export type Plugin = string | [string, any] | unified.Plugin | [unified.Plugin, any];
 
 export interface AstroMarkdownOptions {
 	mode?: 'md' | 'mdx';
+	syntaxHighlight?: 'prism' | 'shiki' | false;
+	shikiConfig?: ShikiConfig;
 	remarkPlugins?: Plugin[];
 	rehypePlugins?: Plugin[];
 }