feat(doc-core): support code title space (#3744)

* fix: sidebar link i18n

* feat: add icon lark

* feat: support space in code title

Author: sanyuan0704

.changeset/poor-seas-talk.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/doc-core': patch
+---
+
+feat(doc-core): support space in code title
+
+feat(doc-core): 代码块标题支持空格

packages/cli/doc-core/package.json

@@ -59,7 +59,7 @@
     "@mdx-js/react": "2.2.1",
     "@modern-js/builder": "workspace:*",
     "@modern-js/builder-rspack-provider": "workspace:*",
-    "@modern-js/mdx-rs-binding": "^0.1.8",
+    "@modern-js/mdx-rs-binding": "^0.2.0",
     "@modern-js/remark-container": "workspace:*",
     "@modern-js/doc-plugin-medium-zoom": "workspace:*",
     "@modern-js/utils": "workspace:*",

packages/cli/doc-core/src/node/mdx/index.ts

@@ -9,7 +9,7 @@ import remarkPluginMDXFrontMatter from 'remark-mdx-frontmatter';
 import rehypePluginExternalLinks from 'rehype-external-links';
 import { remarkPluginContainer } from '@modern-js/remark-container';
 import { remarkPluginToc } from './remarkPlugins/toc';
-import { rehypePluginPreWrapper } from './rehypePlugins/preWrapper';
+import { rehypePluginCodeMeta } from './rehypePlugins/codeMeta';
 import { remarkPluginNormalizeLink } from './remarkPlugins/normalizeLink';
 import { remarkCheckDeadLinks } from './remarkPlugins/checkDeadLink';
 
@@ -71,7 +71,7 @@ export async function createMDXOptions(
           },
         },
       ],
-      rehypePluginPreWrapper,
+      rehypePluginCodeMeta,
       [
         rehypePluginExternalLinks,
         {

packages/cli/doc-core/src/node/mdx/rehypePlugins/codeMeta.ts

@@ -0,0 +1,22 @@
+import type { Plugin } from 'unified';
+import { visit } from 'unist-util-visit';
+import type { Root } from 'hast';
+
+export const rehypePluginCodeMeta: Plugin<[], Root> = () => {
+  return tree => {
+    visit(tree, 'element', node => {
+      // <pre><code>...</code></pre>
+      // 1. Find pre element
+      if (
+        node.tagName === 'pre' &&
+        node.children[0]?.type === 'element' &&
+        node.children[0].tagName === 'code'
+      ) {
+        const codeNode = node.children[0];
+        // language-xxx
+        const meta = (codeNode.data?.meta as string) || '';
+        codeNode.properties.meta = meta;
+      }
+    });
+  };
+};

packages/cli/doc-core/src/node/mdx/rehypePlugins/preWrapper.ts

@@ -20,6 +20,12 @@ import { usePageData } from '@/runtime';
 let registered = false;
 const timeoutIdMap: Map<HTMLElement, NodeJS.Timeout> = new Map();
 
+export interface CodeProps {
+  children: string;
+  className: string;
+  meta?: string;
+}
+
 function registerLanguages() {
   SyntaxHighlighter.registerLanguage('jsx', jsx);
   SyntaxHighlighter.registerLanguage('jsx', tsx);
@@ -38,11 +44,7 @@ function registerLanguages() {
   registered = true;
 }
 
-export function Code(props: {
-  children: string;
-  className: string;
-  meta?: string;
-}) {
+export function Code(props: CodeProps) {
   const copyButtonRef = useRef<HTMLButtonElement>(null);
   const { siteData } = usePageData();
   const { showLineNumbers } = siteData.markdown;
@@ -101,6 +103,7 @@ export function Code(props: {
         language={language}
         style={style}
         wrapLines={true}
+        className="code"
         // Notice: if the highlight line is specified, the line number must be displayed
         showLineNumbers={showLineNumbers || highlightLines.length > 0}
         lineProps={lineNumber => {

packages/cli/doc-core/src/theme-default/layout/DocLayout/docComponents/code.tsx

@@ -5,6 +5,7 @@ import { Hr } from './hr';
 import { A } from './link';
 import { P, Strong, Blockquote } from './paragraph';
 import { Code } from './code';
+import { Pre } from './pre';
 
 export function getCustomMDXComponent() {
   return {
@@ -27,5 +28,6 @@ export function getCustomMDXComponent() {
     strong: Strong,
     a: A,
     code: Code,
+    pre: Pre,
   };
 }

packages/cli/doc-core/src/theme-default/layout/DocLayout/docComponents/index.tsx

@@ -0,0 +1,37 @@
+import { CodeProps } from './code';
+
+const DEFAULT_LANGUAGE_CLASS = 'language-bash';
+
+export function parseTitleFromMeta(meta: string): string {
+  if (!meta) {
+    return '';
+  }
+  let result = meta;
+  const highlightReg = /{[\d,-]*}/i;
+  const highlightMeta = highlightReg.exec(meta)?.[0];
+  if (highlightMeta) {
+    result = meta.replace(highlightReg, '').trim();
+  }
+  result = result.split('=')[1] ?? '';
+  return result?.replace(/["'`]/g, '');
+}
+
+export function Pre({
+  children,
+}: {
+  children: React.ReactElement[] | React.ReactElement;
+}) {
+  if (Array.isArray(children)) {
+    return <pre>{children}</pre>;
+  }
+
+  const { className, meta } = children.props as CodeProps;
+
+  const codeTitle = parseTitleFromMeta(meta);
+  return (
+    <div className={className || DEFAULT_LANGUAGE_CLASS}>
+      {codeTitle && <div className="modern-code-title">{codeTitle}</div>}
+      <div className="modern-code-content">{children}</div>
+    </div>
+  );
+}

packages/cli/doc-core/src/theme-default/layout/DocLayout/docComponents/pre.tsx

@@ -166,3 +166,7 @@
   right: 0;
   padding-left: 20px;
 }
+
+.modern-doc [class*='language-'] .modern-code-content > code {
+  padding: 16px 20px;
+}

packages/cli/doc-core/src/theme-default/styles/doc/code.css

@@ -9,7 +9,7 @@ export default defineConfig({
   plugins: [docTools({})],
   doc: {
     markdown: {
-      // experimentalMdxRs: true,
+      experimentalMdxRs: true,
       checkDeadLinks: true,
     },
     root: path.join(__dirname, 'docs'),