fix: code highlight in preview plugin (#1188)

web-infra-dev · Jun 17, 2024 · 2ba236f · 2ba236f
1 parent 91c754e
commit 2ba236f
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git a/packages/core/src/node/runtimeModule/siteData/index.ts b/packages/core/src/node/runtimeModule/siteData/index.ts
@@ -139,6 +139,13 @@ export async function siteDataVMPlugin(context: FactoryContext) {
   };
 
   const { highlightLanguages: defaultLanguages = [] } = config.markdown || {};
+
+  if (siteData.pages[0]?.extraHighlightLanguages?.length) {
+    siteData.pages[0].extraHighlightLanguages.forEach(lang =>
+      highlightLanguages.add(lang),
+    );
+  }
+
   const aliases = handleHighlightLanguages(
     highlightLanguages,
     defaultLanguages,

diff --git a/packages/core/tests/__snapshots__/prismLanguages.test.ts.snap b/packages/core/tests/__snapshots__/prismLanguages.test.ts.snap
@@ -7,6 +7,9 @@ exports[`automatic import of prism languages > prism languages aliases should be
   ],
   \\"objectivec\\": [
     \\"oc\\"
+  ],
+  \\"tsx\\": [
+    \\"jsx\\"
   ]
 };
     export const languages = {
@@ -16,6 +19,8 @@ exports[`automatic import of prism languages > prism languages aliases should be
           \\"react-syntax-highlighter/dist/cjs/languages/prism/objectivec\\"
         ).default,\\"rust\\": require(
           \\"react-syntax-highlighter/dist/cjs/languages/prism/rust\\"
+        ).default,\\"tsx\\": require(
+          \\"react-syntax-highlighter/dist/cjs/languages/prism/tsx\\"
         ).default,\\"typescript\\": require(
           \\"react-syntax-highlighter/dist/cjs/languages/prism/typescript\\"
         ).default

diff --git a/packages/core/tests/prismLanguages.test.ts b/packages/core/tests/prismLanguages.test.ts
@@ -26,7 +26,9 @@ describe('automatic import of prism languages', () => {
       },
     },
     pluginDriver: {
-      async extendPageData(_pageData: any) {},
+      async extendPageData(pageData: any) {
+        pageData.extraHighlightLanguages = ['jsx', 'tsx'];
+      },
       async modifySearchIndexData(_pages: any) {},
     },
   };

diff --git a/packages/plugin-preview/src/index.ts b/packages/plugin-preview/src/index.ts
@@ -193,6 +193,8 @@ export function pluginPreview(options?: Options): RspressPlugin {
       if (!isProd) {
         pageData.devPort = port;
       }
+      // highlightLanguages analysis is built-in in mdx-rs, we need to add extraHighlightLanguages in preview plugin which using mdx-js to perform code block
+      pageData.extraHighlightLanguages = previewLanguages;
     },
     markdown: {
       remarkPlugins: [