Export everything + expose options for client to use

Author: ricardonunez-io

packages/mdx/src/client/rsc.tsx

@@ -5,20 +5,22 @@ import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import remarkSmartypants from 'remark-smartypants';
 
-import { rehypeSyntaxHighlighting } from '../plugins/index.js';
+import { rehypeSyntaxHighlighting, RehypeSyntaxHighlightingOptions } from '../plugins/index.js';
 
 export async function MDXRemote({
   source,
   mdxOptions,
   scope,
   components,
   parseFrontmatter,
+  syntaxHighlightingOptions,
 }: {
   source: string;
   mdxOptions?: SerializeOptions['mdxOptions'];
   scope?: SerializeOptions['scope'];
   components?: MDXComponents;
   parseFrontmatter?: SerializeOptions['parseFrontmatter'];
+  syntaxHighlightingOptions?: RehypeSyntaxHighlightingOptions;
 }) {
   return (
     // @ts-expect-error Server Component
@@ -36,7 +38,7 @@ export async function MDXRemote({
           ],
           rehypePlugins: [
             rehypeKatex,
-            [rehypeSyntaxHighlighting, { ignoreMissing: true }],
+            [rehypeSyntaxHighlighting, syntaxHighlightingOptions],
             ...(mdxOptions?.rehypePlugins || []),
           ],
           format: mdxOptions?.format || 'mdx',

packages/mdx/src/index.ts

@@ -1,3 +1,4 @@
 export * from './client/index.js';
 export * from './server/index.js';
 export * from './types/index.js';
+export * from './plugins/index.js';

packages/mdx/src/plugins/rehype/rehypeSyntaxHighlighting.ts

@@ -10,12 +10,7 @@ import {
 import type { Plugin } from 'unified';
 import { visit } from 'unist-util-visit';
 
-import {
-  BASE_LANGUAGES,
-  DEFAULT_LANG_ALIASES,
-  UNIQUE_LANGS,
-  type ShikiLang,
-} from './shiki-constants.js';
+import { DEFAULT_LANG_ALIASES, UNIQUE_LANGS, type ShikiLang } from './shiki-constants.js';
 
 const shikiColorReplacements: Partial<Record<BundledTheme, string | Record<string, string>>> = {
   'dark-plus': {
@@ -31,8 +26,6 @@ const shikiColorReplacements: Partial<Record<BundledTheme, string | Record<strin
 };
 
 export type RehypeSyntaxHighlightingOptions = {
-  ignoreMissing?: boolean;
-  alias?: Record<string, ShikiLang>;
   theme?: BuiltinTheme;
   themes?: Record<'light' | 'dark', BuiltinTheme>;
   codeStyling?: 'dark' | 'system';
@@ -61,10 +54,17 @@ async function getHighlighter(): Promise<Highlighter> {
 export const rehypeSyntaxHighlighting: Plugin<[RehypeSyntaxHighlightingOptions?], Root, Root> = (
   options = {}
 ) => {
-  const languageAliases = { ...options.alias, ...DEFAULT_LANG_ALIASES };
-
   return async (tree) => {
     const highlighter = await getHighlighter();
+    if (options.theme) {
+      await highlighter.loadTheme(options.theme);
+    }
+    if (options.themes) {
+      await Promise.all([
+        highlighter.loadTheme(options.themes.dark),
+        highlighter.loadTheme(options.themes.light),
+      ]);
+    }
 
     visit(tree, 'element', (node, index, parent) => {
       const child = node.children[0];
@@ -90,9 +90,11 @@ export const rehypeSyntaxHighlighting: Plugin<[RehypeSyntaxHighlightingOptions?]
       }
 
       let lang =
-        getLanguage(node, languageAliases) ?? getLanguage(child, languageAliases) ?? 'text';
+        getLanguage(node, DEFAULT_LANG_ALIASES) ??
+        getLanguage(child, DEFAULT_LANG_ALIASES) ??
+        'text';
 
-      if (!BASE_LANGUAGES.includes(lang)) {
+      if (!UNIQUE_LANGS.includes(lang)) {
         highlighter.loadLanguage(lang as BundledLanguage);
       }
 
@@ -104,8 +106,11 @@ export const rehypeSyntaxHighlighting: Plugin<[RehypeSyntaxHighlightingOptions?]
         const hast = highlighter.codeToHast(code, {
           lang: lang ?? 'text',
           themes: {
-            light: 'github-light-default',
-            dark: 'dark-plus',
+            light:
+              options.themes?.light ??
+              options.theme ??
+              (options.codeStyling === 'dark' ? 'dark-plus' : 'github-light-default'),
+            dark: options.themes?.dark ?? options.theme ?? 'dark-plus',
           },
           colorReplacements: shikiColorReplacements,
           tabindex: false,
@@ -154,7 +159,7 @@ export const rehypeSyntaxHighlighting: Plugin<[RehypeSyntaxHighlightingOptions?]
         }
         parent.children.splice(index, 1, codeElement);
       } catch (err) {
-        if (options.ignoreMissing && /Unknown language/.test((err as Error).message)) {
+        if (err instanceof Error && /Unknown language/.test(err.message)) {
           return;
         }
         throw err;
@@ -208,3 +213,5 @@ function getLinesToHighlight(node: Element, maxLines: number): number[] {
 
   return Array.from(lineNumbers).sort((a, b) => a - b);
 }
+
+export { UNIQUE_LANGS, ShikiLang, DEFAULT_LANG_ALIASES };

packages/mdx/src/plugins/rehype/shiki-constants.ts

@@ -318,37 +318,3 @@ export const DEFAULT_LANG_ALIASES: Record<string, ShikiLang> = {
 };
 
 export const UNIQUE_LANGS = Array.from(new Set(Object.values(DEFAULT_LANG_ALIASES)));
-
-export const BASE_LANGUAGES = [
-  'bash',
-  'blade',
-  'c',
-  'css',
-  'c#',
-  'c++',
-  'dart',
-  'diff',
-  'go',
-  'html',
-  'java',
-  'javascript',
-  'jsx',
-  'json',
-  'kotlin',
-  'log',
-  'lua',
-  'markdown',
-  'mdx',
-  'php',
-  'powershell',
-  'python',
-  'ruby',
-  'rust',
-  'solidity',
-  'swift',
-  'terraform',
-  'text',
-  'typescript',
-  'tsx',
-  'yaml',
-];

packages/mdx/src/server/index.ts

@@ -5,19 +5,21 @@ import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import remarkSmartypants from 'remark-smartypants';
 
-import { rehypeSyntaxHighlighting } from '../plugins/index.js';
+import { rehypeSyntaxHighlighting, RehypeSyntaxHighlightingOptions } from '../plugins/index.js';
 import type { SerializeOptions } from '../types/index.js';
 
 export const serialize = async ({
   source,
   mdxOptions,
   scope,
   parseFrontmatter = true,
+  syntaxHighlightingOptions,
 }: {
   source: string;
   mdxOptions?: SerializeOptions['mdxOptions'];
   scope?: SerializeOptions['scope'];
   parseFrontmatter?: SerializeOptions['parseFrontmatter'];
+  syntaxHighlightingOptions?: RehypeSyntaxHighlightingOptions;
 }) => {
   try {
     return await baseSerialize({
@@ -33,12 +35,7 @@ export const serialize = async ({
           ],
           rehypePlugins: [
             rehypeKatex,
-            [
-              rehypeSyntaxHighlighting,
-              {
-                ignoreMissing: true,
-              },
-            ],
+            [rehypeSyntaxHighlighting, syntaxHighlightingOptions],
             ...(mdxOptions?.rehypePlugins || []),
           ],
           format: mdxOptions?.format || 'mdx',
@@ -59,11 +56,13 @@ export const rscSerialize = async ({
   mdxOptions,
   scope,
   parseFrontmatter = true,
+  syntaxHighlightingOptions,
 }: {
   source: string;
   mdxOptions?: SerializeOptions['mdxOptions'];
   scope?: SerializeOptions['scope'];
   parseFrontmatter?: SerializeOptions['parseFrontmatter'];
+  syntaxHighlightingOptions?: RehypeSyntaxHighlightingOptions;
 }) => {
   try {
     return await evaluate({
@@ -79,12 +78,7 @@ export const rscSerialize = async ({
           ],
           rehypePlugins: [
             rehypeKatex,
-            [
-              rehypeSyntaxHighlighting,
-              {
-                ignoreMissing: true,
-              },
-            ],
+            [rehypeSyntaxHighlighting, syntaxHighlightingOptions],
             ...(mdxOptions?.rehypePlugins || []),
           ],
           format: mdxOptions?.format || 'mdx',