Bump major, clean up theme loading, and add CSS variables theme w defaults

Author: ricardonunez-io

packages/mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintlify/mdx",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Markdown parser from Mintlify",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

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

@@ -45,21 +45,24 @@ export const rehypeSyntaxHighlighting: Plugin<[RehypeSyntaxHighlightingOptions?]
   options = {}
 ) => {
   return async (tree) => {
-    const highlighter = await getHighlighter();
-    if (options.theme && !DEFAULT_THEMES.includes(options.theme)) {
-      await highlighter.loadTheme(options.theme);
-    }
+    const themesToLoad: ShikiTheme[] = [];
     if (options.themes) {
-      const promises: Promise<void>[] = [];
-      if (!DEFAULT_THEMES.includes(options.themes.dark)) {
-        promises.push(highlighter.loadTheme(options.themes.dark));
-      }
-      if (!DEFAULT_THEMES.includes(options.themes.light)) {
-        promises.push(highlighter.loadTheme(options.themes.light));
-      }
-      await Promise.all(promises);
+      themesToLoad.push(options.themes.dark);
+      themesToLoad.push(options.themes.light);
+    } else if (options.theme) {
+      themesToLoad.push(options.theme);
     }
 
+    const highlighter = await getHighlighter();
+    await Promise.all(
+      themesToLoad
+        .filter(
+          (theme): theme is Exclude<ShikiTheme, 'css-variables'> =>
+            !DEFAULT_THEMES.includes(theme) && theme !== 'css-variables'
+        )
+        .map(async (theme) => await highlighter.loadTheme(theme))
+    );
+
     visit(tree, 'element', (node, index, parent) => {
       const child = node.children[0];
       if (

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

@@ -1,14 +1,68 @@
-import type { BundledLanguage } from 'shiki/types';
+import { createCssVariablesTheme } from 'shiki/core';
+import type { BundledLanguage, ThemeRegistration } from 'shiki/types';
 
 export type ShikiLang = BundledLanguage | 'text';
 export type ShikiTheme = (typeof SHIKI_THEMES)[number];
 
+export const SHIKI_CSS_THEME = createCssVariablesTheme({
+  name: 'css-variables',
+  variablePrefix: '--mint-',
+  variableDefaults: {
+    'color-text': '#171717',
+    'color-background': 'transparent',
+    'token-constant': '#171717',
+    'token-string': '#297a3a',
+    'token-comment': '#666666',
+    'token-keyword': '#bd2864',
+    'token-parameter': '#a35200',
+    'token-function': '#0068d6',
+    'token-string-expression': '#297a3a',
+    'token-punctuation': '#171717',
+    'token-link': '#297a3a',
+
+    'ansi-black': '#000000',
+    'ansi-black-dim': '#00000080',
+    'ansi-red': '#bb0000',
+    'ansi-red-dim': '#bb000080',
+    'ansi-green': '#00bb00',
+    'ansi-green-dim': '#00bb0080',
+    'ansi-yellow': '#bbbb00',
+    'ansi-yellow-dim': '#bbbb0080',
+    'ansi-blue': '#0000bb',
+    'ansi-blue-dim': '#0000bb80',
+    'ansi-magenta': '#ff00ff',
+    'ansi-magenta-dim': '#ff00ff80',
+    'ansi-cyan': '#00bbbb',
+    'ansi-cyan-dim': '#00bbbb80',
+    'ansi-white': '#eeeeee',
+    'ansi-white-dim': '#eeeeee80',
+    'ansi-bright-black': '#555555',
+    'ansi-bright-black-dim': '#55555580',
+    'ansi-bright-red': '#ff5555',
+    'ansi-bright-red-dim': '#ff555580',
+    'ansi-bright-green': '#00ff00',
+    'ansi-bright-green-dim': '#00ff0080',
+    'ansi-bright-yellow': '#ffff55',
+    'ansi-bright-yellow-dim': '#ffff5580',
+    'ansi-bright-blue': '#5555ff',
+    'ansi-bright-blue-dim': '#5555ff80',
+    'ansi-bright-magenta': '#ff55ff',
+    'ansi-bright-magenta-dim': '#ff55ff80',
+    'ansi-bright-cyan': '#55ffff',
+    'ansi-bright-cyan-dim': '#55ffff80',
+    'ansi-bright-white': '#ffffff',
+    'ansi-bright-white-dim': '#ffffff80',
+  },
+  fontStyle: true,
+});
+
 export const DEFAULT_LANG = 'text' as const;
 export const DEFAULT_DARK_THEME: ShikiTheme = 'dark-plus' as const;
 export const DEFAULT_LIGHT_THEME: ShikiTheme = 'github-light-default' as const;
-export const DEFAULT_THEMES: [ShikiTheme, ShikiTheme] = [
+export const DEFAULT_THEMES: [ShikiTheme, ShikiTheme, ThemeRegistration] = [
   DEFAULT_LIGHT_THEME,
   DEFAULT_DARK_THEME,
+  SHIKI_CSS_THEME,
 ] as const;
 
 export const shikiColorReplacements: Partial<Record<ShikiTheme, string | Record<string, string>>> =
@@ -403,4 +457,6 @@ export const SHIKI_THEMES = [
   'vitesse-black',
   'vitesse-dark',
   'vitesse-light',
+
+  'css-variables', // for users who want to use custom CSS to style their code blocks
 ] as const;