@astrojs/markdown-remark 0.6.0 → 0.6.1-next.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @astrojs/markdown-remark
 
+## 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 +111,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 shikiTheme = (_d = opts == null ? void 0 : opts.shikiTheme) != null ? _d : "github-dark";
   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(shikiTheme)]);
+  }
   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/remark-shiki.d.ts

@@ -0,0 +1,3 @@
+import shiki from 'shiki';
+declare const remarkShiki: (theme: shiki.Theme) => Promise<() => (tree: any) => void>;
+export default remarkShiki;

package/dist/remark-shiki.js

@@ -0,0 +1,21 @@
+import shiki from "shiki";
+import { visit } from "unist-util-visit";
+const remarkShiki = async (theme) => {
+  const highlighter = await shiki.getHighlighter({ theme });
+  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 class="astro-code"');
+      html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-');
+      node.type = "html";
+      node.value = html;
+      node.children = [];
+    });
+  };
+};
+var remark_shiki_default = remarkShiki;
+export {
+  remark_shiki_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vc3JjL3JlbWFyay1zaGlraS50cyJdLAogICJtYXBwaW5ncyI6ICJBQUFBO0FBQ0E7QUFFQSxNQUFNLGNBQWMsT0FBTyxVQUF1QjtBQUNqRCxRQUFNLGNBQWMsTUFBTSxNQUFNLGVBQWUsRUFBRTtBQUVqRCxTQUFPLE1BQU0sQ0FBQyxTQUFjO0FBQzNCLFVBQU0sTUFBTSxRQUFRLENBQUMsU0FBUztBQVBoQztBQVFHLFVBQUksT0FBTyxZQUFZLFdBQVcsS0FBSyxPQUFPLEVBQUUsTUFBTSxXQUFLLFNBQUwsWUFBYTtBQUduRSxhQUFPLEtBQUssUUFBUSxzQkFBc0I7QUFFMUMsYUFBTyxLQUFLLFFBQVEsOENBQThDO0FBRWxFLFdBQUssT0FBTztBQUNaLFdBQUssUUFBUTtBQUNiLFdBQUssV0FBVztBQUFBO0FBQUE7QUFBQTtBQUtuQixJQUFPLHVCQUFROyIsCiAgIm5hbWVzIjogW10KfQo=

package/dist/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/markdown-remark",
-  "version": "0.6.0",
+  "version": "0.6.1-next.0",
   "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 shikiTheme = opts?.shikiTheme ?? 'github-dark';
 	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(shikiTheme)]);
+	}
+
 	parser.use([[markdownToHtml as any, { allowDangerousHtml: true, passThrough: ['raw', 'mdxTextExpression', 'mdxJsxTextElement', 'mdxJsxFlowElement'] }]]);
 
 	loadedRehypePlugins.forEach(([plugin, opts]) => {

package/src/remark-shiki.ts

@@ -0,0 +1,23 @@
+import shiki from 'shiki';
+import { visit } from 'unist-util-visit';
+
+const remarkShiki = async (theme: shiki.Theme) => {
+	const highlighter = await shiki.getHighlighter({ theme });
+
+	return () => (tree: any) => {
+		visit(tree, 'code', (node) => {
+			let html = highlighter.codeToHtml(node.value, { lang: node.lang ?? 'plaintext' });
+
+			// Replace "shiki" class naming with "astro".
+			html = html.replace('<pre class="shiki"', '<pre class="astro-code"');
+			// Replace "shiki" css variable naming with "astro".
+			html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-');
+
+			node.type = 'html';
+			node.value = html;
+			node.children = [];
+		});
+	};
+};
+
+export default remarkShiki;

package/src/types.ts

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