@astrojs/markdown-remark 0.5.0 → 0.6.1-next.2

package/src/rehype-collect-headers.ts

@@ -4,35 +4,35 @@ import slugger from 'github-slugger';
 
 /**  */
 export default function createCollectHeaders() {
-  const headers: any[] = [];
+	const headers: any[] = [];
 
-  function rehypeCollectHeaders() {
-    return function (tree: Root) {
-      visit(tree, (node) => {
-        if (node.type !== 'element') return;
-        const { tagName } = node;
-        if (tagName[0] !== 'h') return;
-        const [_, level] = tagName.match(/h([0-6])/) ?? [];
-        if (!level) return;
-        const depth = Number.parseInt(level);
+	function rehypeCollectHeaders() {
+		return function (tree: Root) {
+			visit(tree, (node) => {
+				if (node.type !== 'element') return;
+				const { tagName } = node;
+				if (tagName[0] !== 'h') return;
+				const [_, level] = tagName.match(/h([0-6])/) ?? [];
+				if (!level) return;
+				const depth = Number.parseInt(level);
 
-        let text = '';
+				let text = '';
 
-        visit(node, 'text', (child) => {
-          text += child.value;
-        });
+				visit(node, 'text', (child) => {
+					text += child.value;
+				});
 
-        let slug = node?.properties?.id || slugger.slug(text);
+				let slug = node?.properties?.id || slugger.slug(text);
 
-        node.properties = node.properties || {};
-        node.properties.id = slug;
-        headers.push({ depth, slug, text });
-      });
-    };
-  }
+				node.properties = node.properties || {};
+				node.properties.id = slug;
+				headers.push({ depth, slug, text });
+			});
+		};
+	}
 
-  return {
-    headers,
-    rehypeCollectHeaders,
-  };
+	return {
+		headers,
+		rehypeCollectHeaders,
+	};
 }

package/src/rehype-escape.ts

@@ -1,12 +1,12 @@
 import { SKIP, visit } from 'unist-util-visit';
 
 export default function rehypeEscape(): any {
-  return function (node: any): any {
-    return visit(node, 'element', (el) => {
-      if (el.tagName === 'code' || el.tagName === 'pre') {
-        el.properties['data-astro-raw'] = true;
-      }
-      return el;
-    });
-  };
+	return function (node: any): any {
+		return visit(node, 'element', (el) => {
+			if (el.tagName === 'code' || el.tagName === 'pre') {
+				el.properties['data-astro-raw'] = true;
+			}
+			return el;
+		});
+	};
 }

package/src/rehype-expressions.ts

@@ -1,12 +1,12 @@
 import { map } from 'unist-util-map';
 
 export default function rehypeExpressions(): any {
-  return function (node: any): any {
-    return map(node, (child) => {
-      if (child.type === 'mdxTextExpression') {
-        return { type: 'text', value: `{${(child as any).value}}` };
-      }
-      return child;
-    });
-  };
+	return function (node: any): any {
+		return map(node, (child) => {
+			if (child.type === 'mdxTextExpression') {
+				return { type: 'text', value: `{${(child as any).value}}` };
+			}
+			return child;
+		});
+	};
 }

package/src/rehype-islands.ts

@@ -1,31 +1,35 @@
-import { SKIP, visit } from 'unist-util-visit';
+import { SKIP, visit as _visit } from 'unist-util-visit';
+
+// This is a workaround.
+// It fixes a compatibility issue between different, incompatible ASTs given by plugins to Unist
+const visit = _visit as (node: any, type: string, callback?: (node: any, index: number, parent: any) => any) => any;
 
 // This fixes some confusing bugs coming from somewhere inside of our Markdown pipeline.
 // `unist`/`remark`/`rehype` (not sure) often generate malformed HTML inside of <astro-root>
 // For hydration to work properly, frameworks need the DOM to be the exact same on server/client.
 // This reverts some "helpful corrections" that are applied to our perfectly valid HTML!
 export default function rehypeIslands(): any {
-  return function (node: any): any {
-    return visit(node, 'element', (el) => {
-      // Bugs only happen inside of <astro-root> islands
-      if (el.tagName == 'astro-root') {
-        visit(el, 'text', (child, index, parent) => {
-          if (child.type === 'text') {
-            // Sometimes comments can be trapped as text, which causes them to be escaped
-            // This casts them back to real HTML comments
-            if (parent && child.value.indexOf('<!--') > -1 && index != null) {
-              parent.children.splice(index, 1, { ...child, type: 'comment', value: child.value.replace('<!--', '').replace('-->', '').trim() });
-              return [SKIP, index];
-            }
-            // For some reason `rehype` likes to inject extra linebreaks,
-            // but React and Vue throw hydration errors when they see these!
-            // This removes any extra linebreaks, which is fine because
-            // framework compilers don't preserve them anyway
-            child.value = child.value.replace(/\n+/g, '');
-            return child;
-          }
-        });
-      }
-    });
-  };
+	return function (node: any): any {
+		return visit(node, 'element', (el) => {
+			// Bugs only happen inside of <astro-root> islands
+			if (el.tagName == 'astro-root') {
+				visit(el, 'text', (child, index, parent) => {
+					if (child.type === 'text') {
+						// Sometimes comments can be trapped as text, which causes them to be escaped
+						// This casts them back to real HTML comments
+						if (parent && child.value.indexOf('<!--') > -1 && index != null) {
+							parent.children.splice(index, 1, { ...child, type: 'comment', value: child.value.replace('<!--', '').replace('-->', '').trim() });
+							return [SKIP, index];
+						}
+						// For some reason `rehype` likes to inject extra linebreaks,
+						// but React and Vue throw hydration errors when they see these!
+						// This removes any extra linebreaks, which is fine because
+						// framework compilers don't preserve them anyway
+						child.value = child.value.replace(/\n+/g, '');
+						return child;
+					}
+				});
+			}
+		});
+	};
 }

package/src/rehype-jsx.ts

@@ -2,28 +2,28 @@ import { map } from 'unist-util-map';
 
 const MDX_ELEMENTS = new Set(['mdxJsxFlowElement', 'mdxJsxTextElement']);
 export default function rehypeJsx(): any {
-  return function (node: any): any {
-    return map(node, (child: any) => {
-      if (child.type === 'element') {
-        return { ...child, tagName: `${child.tagName}` };
-      }
-      if (MDX_ELEMENTS.has(child.type)) {
-        return {
-          ...child,
-          type: 'element',
-          tagName: `${child.name}`,
-          properties: child.attributes.reduce((acc: any[], entry: any) => {
-            let attr = entry.value;
-            if (attr && typeof attr === 'object') {
-              attr = `{${attr.value}}`;
-            } else if (attr === null) {
-              attr = `{true}`;
-            }
-            return Object.assign(acc, { [entry.name]: attr });
-          }, {}),
-        };
-      }
-      return child;
-    });
-  };
+	return function (node: any): any {
+		return map(node, (child: any) => {
+			if (child.type === 'element') {
+				return { ...child, tagName: `${child.tagName}` };
+			}
+			if (MDX_ELEMENTS.has(child.type)) {
+				return {
+					...child,
+					type: 'element',
+					tagName: `${child.name}`,
+					properties: child.attributes.reduce((acc: any[], entry: any) => {
+						let attr = entry.value;
+						if (attr && typeof attr === 'object') {
+							attr = `{${attr.value}}`;
+						} else if (attr === null) {
+							attr = `{true}`;
+						}
+						return Object.assign(acc, { [entry.name]: attr });
+					}, {}),
+				};
+			}
+			return child;
+		});
+	};
 }

package/src/remark-expressions.ts

@@ -4,28 +4,28 @@ let mdxExpressionFromMarkdown: any;
 let mdxExpressionToMarkdown: any;
 
 export function remarkExpressions(this: any, options: any) {
-  let settings = options || {};
-  let data = this.data();
+	let settings = options || {};
+	let data = this.data();
 
-  add('micromarkExtensions', mdxExpression({}));
-  add('fromMarkdownExtensions', mdxExpressionFromMarkdown);
-  add('toMarkdownExtensions', mdxExpressionToMarkdown);
+	add('micromarkExtensions', mdxExpression({}));
+	add('fromMarkdownExtensions', mdxExpressionFromMarkdown);
+	add('toMarkdownExtensions', mdxExpressionToMarkdown);
 
-  function add(field: any, value: any) {
-    /* istanbul ignore if - other extensions. */
-    if (data[field]) data[field].push(value);
-    else data[field] = [value];
-  }
+	function add(field: any, value: any) {
+		/* istanbul ignore if - other extensions. */
+		if (data[field]) data[field].push(value);
+		else data[field] = [value];
+	}
 }
 
 export async function loadRemarkExpressions() {
-  if (!mdxExpression) {
-    const micromarkMdxExpression = await import('micromark-extension-mdx-expression');
-    mdxExpression = micromarkMdxExpression.mdxExpression;
-  }
-  if (!mdxExpressionFromMarkdown || !mdxExpressionToMarkdown) {
-    const mdastUtilMdxExpression = await import('mdast-util-mdx-expression');
-    mdxExpressionFromMarkdown = mdastUtilMdxExpression.mdxExpressionFromMarkdown;
-    mdxExpressionToMarkdown = mdastUtilMdxExpression.mdxExpressionToMarkdown;
-  }
+	if (!mdxExpression) {
+		const micromarkMdxExpression = await import('micromark-extension-mdx-expression');
+		mdxExpression = micromarkMdxExpression.mdxExpression;
+	}
+	if (!mdxExpressionFromMarkdown || !mdxExpressionToMarkdown) {
+		const mdastUtilMdxExpression = await import('mdast-util-mdx-expression');
+		mdxExpressionFromMarkdown = mdastUtilMdxExpression.mdxExpressionFromMarkdown;
+		mdxExpressionToMarkdown = mdastUtilMdxExpression.mdxExpressionToMarkdown;
+	}
 }

package/src/remark-jsx.ts

@@ -4,28 +4,28 @@ let mdxJsxFromMarkdown: any;
 let mdxJsxToMarkdown: any;
 
 export function remarkJsx(this: any, options: any) {
-  let settings = options || {};
-  let data = this.data();
+	let settings = options || {};
+	let data = this.data();
 
-  // TODO this seems to break adding slugs, no idea why add('micromarkExtensions', mdxJsx({}));
-  add('fromMarkdownExtensions', mdxJsxFromMarkdown);
-  add('toMarkdownExtensions', mdxJsxToMarkdown);
+	// TODO this seems to break adding slugs, no idea why add('micromarkExtensions', mdxJsx({}));
+	add('fromMarkdownExtensions', mdxJsxFromMarkdown);
+	add('toMarkdownExtensions', mdxJsxToMarkdown);
 
-  function add(field: any, value: any) {
-    /* istanbul ignore if - other extensions. */
-    if (data[field]) data[field].push(value);
-    else data[field] = [value];
-  }
+	function add(field: any, value: any) {
+		/* istanbul ignore if - other extensions. */
+		if (data[field]) data[field].push(value);
+		else data[field] = [value];
+	}
 }
 
 export async function loadRemarkJsx() {
-  if (!mdxJsx) {
-    const micromarkMdxJsx = await import('micromark-extension-mdx-jsx');
-    mdxJsx = micromarkMdxJsx.mdxJsx;
-  }
-  if (!mdxJsxFromMarkdown || !mdxJsxToMarkdown) {
-    const mdastUtilMdxJsx = await import('mdast-util-mdx-jsx');
-    mdxJsxFromMarkdown = mdastUtilMdxJsx.mdxJsxFromMarkdown;
-    mdxJsxToMarkdown = mdastUtilMdxJsx.mdxJsxToMarkdown;
-  }
+	if (!mdxJsx) {
+		const micromarkMdxJsx = await import('micromark-extension-mdx-jsx');
+		mdxJsx = micromarkMdxJsx.mdxJsx;
+	}
+	if (!mdxJsxFromMarkdown || !mdxJsxToMarkdown) {
+		const mdastUtilMdxJsx = await import('mdast-util-mdx-jsx');
+		mdxJsxFromMarkdown = mdastUtilMdxJsx.mdxJsxFromMarkdown;
+		mdxJsxToMarkdown = mdastUtilMdxJsx.mdxJsxToMarkdown;
+	}
 }

package/src/remark-prism.ts

@@ -7,64 +7,64 @@ const noVisit = new Set(['root', 'html', 'text']);
 const languageMap = new Map([['ts', 'typescript']]);
 
 function runHighlighter(lang: string, code: string) {
-  let classLanguage = `language-${lang}`;
+	let classLanguage = `language-${lang}`;
 
-  if (lang == null) {
-    lang = 'plaintext';
-  }
+	if (lang == null) {
+		lang = 'plaintext';
+	}
 
-  const ensureLoaded = (lang: string) => {
-    if (lang && !Prism.languages[lang]) {
-      loadLanguages([lang]);
-    }
-  };
+	const ensureLoaded = (lang: string) => {
+		if (lang && !Prism.languages[lang]) {
+			loadLanguages([lang]);
+		}
+	};
 
-  if (languageMap.has(lang)) {
-    ensureLoaded(languageMap.get(lang)!);
-  } else if (lang === 'astro') {
-    ensureLoaded('typescript');
-    addAstro(Prism);
-  } else {
-    ensureLoaded('markup-templating'); // Prism expects this to exist for a number of other langs
-    ensureLoaded(lang);
-  }
+	if (languageMap.has(lang)) {
+		ensureLoaded(languageMap.get(lang)!);
+	} else if (lang === 'astro') {
+		ensureLoaded('typescript');
+		addAstro(Prism);
+	} else {
+		ensureLoaded('markup-templating'); // Prism expects this to exist for a number of other langs
+		ensureLoaded(lang);
+	}
 
-  if (lang && !Prism.languages[lang]) {
-    console.warn(`Unable to load the language: ${lang}`);
-  }
+	if (lang && !Prism.languages[lang]) {
+		console.warn(`Unable to load the language: ${lang}`);
+	}
 
-  const grammar = Prism.languages[lang];
-  let html = code;
-  if (grammar) {
-    html = Prism.highlight(code, grammar, lang);
-  }
+	const grammar = Prism.languages[lang];
+	let html = code;
+	if (grammar) {
+		html = Prism.highlight(code, grammar, lang);
+	}
 
-  return { classLanguage, html };
+	return { classLanguage, html };
 }
 
 type MaybeString = string | null | undefined;
 
 /**  */
 function transformer(className: MaybeString) {
-  return function (tree: any) {
-    const visitor = (node: any) => {
-      let { lang, value } = node;
-      node.type = 'html';
+	return function (tree: any) {
+		const visitor = (node: any) => {
+			let { lang, value } = node;
+			node.type = 'html';
 
-      let { html, classLanguage } = runHighlighter(lang, value);
-      let classes = [classLanguage];
-      if (className) {
-        classes.push(className);
-      }
-      node.value = `<pre class="${classes.join(' ')}"><code data-astro-raw class="${classLanguage}">${html}</code></pre>`;
-      return node;
-    };
-    return visit(tree, 'code', visitor);
-  };
+			let { html, classLanguage } = runHighlighter(lang, value);
+			let classes = [classLanguage];
+			if (className) {
+				classes.push(className);
+			}
+			node.value = `<pre class="${classes.join(' ')}"><code data-astro-raw class="${classLanguage}">${html}</code></pre>`;
+			return node;
+		};
+		return visit(tree, 'code', visitor);
+	};
 }
 
 function plugin(className: MaybeString) {
-  return transformer.bind(null, className);
+	return transformer.bind(null, className);
 }
 
 export default plugin;

package/src/remark-scoped-styles.ts

@@ -3,16 +3,16 @@ const noVisit = new Set(['root', 'html', 'text']);
 
 /**  */
 export default function scopedStyles(className: string) {
-  const visitor = (node: any) => {
-    if (noVisit.has(node.type)) return;
+	const visitor = (node: any) => {
+		if (noVisit.has(node.type)) return;
 
-    const { data } = node;
-    let currentClassName = data?.hProperties?.class ?? '';
-    node.data = node.data || {};
-    node.data.hProperties = node.data.hProperties || {};
-    node.data.hProperties.class = `${className} ${currentClassName}`.trim();
+		const { data } = node;
+		let currentClassName = data?.hProperties?.class ?? '';
+		node.data = node.data || {};
+		node.data.hProperties = node.data.hProperties || {};
+		node.data.hProperties.class = `${className} ${currentClassName}`.trim();
 
-    return node;
-  };
-  return () => (tree: any) => visit(tree, visitor);
+		return node;
+	};
+	return () => (tree: any) => visit(tree, visitor);
 }

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/remark-slug.ts

@@ -15,18 +15,18 @@ const slugs = new BananaSlug();
  * @type {import('unified').Plugin<void[], Root>}
  */
 export default function remarkSlug() {
-  return (tree: any) => {
-    slugs.reset();
-    visit(tree, (node) => {
-      console.log(node);
-    });
-    visit(tree, 'heading', (node) => {
-      const data = node.data || (node.data = {});
-      const props = /** @type {Properties} */ data.hProperties || (data.hProperties = {});
-      let id = props.id;
-      id = id ? slugs.slug(String(id), true) : slugs.slug(toString(node));
-      data.id = id;
-      props.id = id;
-    });
-  };
+	return (tree: any) => {
+		slugs.reset();
+		visit(tree, (node) => {
+			console.log(node);
+		});
+		visit(tree, 'heading', (node) => {
+			const data = node.data || (node.data = {});
+			const props = /** @type {Properties} */ data.hProperties || (data.hProperties = {});
+			let id = props.id;
+			id = id ? slugs.slug(String(id), true) : slugs.slug(toString(node));
+			data.id = id;
+			props.id = id;
+		});
+	};
 }

package/src/remark-unwrap.ts

@@ -1,34 +1,38 @@
-import { visit, SKIP } from 'unist-util-visit';
+import { visit as _visit, SKIP } from 'unist-util-visit';
+
+// This is a workaround.
+// It fixes a compatibility issue between different, incompatible ASTs given by plugins to Unist
+const visit = _visit as (node: any, type: string, callback?: (node: any, index: number, parent: any) => any) => any;
 
 // Remove the wrapping paragraph for <astro-root> islands
 export default function remarkUnwrap() {
-  const astroRootNodes = new Set();
-  let insideAstroRoot = false;
+	const astroRootNodes = new Set();
+	let insideAstroRoot = false;
 
-  return (tree: any) => {
-    // reset state
-    insideAstroRoot = false;
-    astroRootNodes.clear();
+	return (tree: any) => {
+		// reset state
+		insideAstroRoot = false;
+		astroRootNodes.clear();
 
-    visit(tree, 'html', (node) => {
-      if (node.value.indexOf('<astro-root') > -1 && !insideAstroRoot) {
-        insideAstroRoot = true;
-      }
-      if (node.value.indexOf('</astro-root') > -1 && insideAstroRoot) {
-        insideAstroRoot = false;
-      }
-      astroRootNodes.add(node);
-    });
+		visit(tree, 'html', (node) => {
+			if (node.value.indexOf('<astro-root') > -1 && !insideAstroRoot) {
+				insideAstroRoot = true;
+			}
+			if (node.value.indexOf('</astro-root') > -1 && insideAstroRoot) {
+				insideAstroRoot = false;
+			}
+			astroRootNodes.add(node);
+		});
 
-    visit(tree, 'paragraph', (node, index, parent) => {
-      if (parent && typeof index === 'number' && containsAstroRootNode(node)) {
-        parent.children.splice(index, 1, ...node.children);
-        return [SKIP, index];
-      }
-    });
-  };
+		visit(tree, 'paragraph', (node, index, parent) => {
+			if (parent && typeof index === 'number' && containsAstroRootNode(node)) {
+				parent.children.splice(index, 1, ...node.children);
+				return [SKIP, index];
+			}
+		});
+	};
 
-  function containsAstroRootNode(node: any) {
-    return node.children.map((child: any) => astroRootNodes.has(child)).reduce((all: boolean, v: boolean) => (all ? all : v), false);
-  }
+	function containsAstroRootNode(node: any) {
+		return node.children.map((child: any) => astroRootNodes.has(child)).reduce((all: boolean, v: boolean) => (all ? all : v), false);
+	}
 }

package/src/types.ts

@@ -1,17 +1,19 @@
-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';
-  remarkPlugins?: Plugin[];
-  rehypePlugins?: Plugin[];
+	mode?: 'md' | 'mdx';
+	syntaxHighlight?: 'prism' | 'shiki' | false;
+	shikiConfig?: ShikiConfig;
+	remarkPlugins?: Plugin[];
+	rehypePlugins?: Plugin[];
 }
 
 export interface MarkdownRenderingOptions extends Partial<AstroMarkdownOptions> {
-  /** @internal */
-  $?: {
-    scopedClassName: string | null;
-  };
+	/** @internal */
+	$?: {
+		scopedClassName: string | null;
+	};
 }

package/tsconfig.json

@@ -3,7 +3,7 @@
   "include": ["src"],
   "compilerOptions": {
     "allowJs": true,
-    "target": "ES2019",
+    "target": "ES2020",
     "module": "ES2020",
     "outDir": "./dist"
   }