website: update example.

Author: jaywcjlove

website/.kktrc.ts

@@ -8,6 +8,11 @@ export default (conf: Configuration, env: 'development' | 'production', options:
   conf = mdCodeModulesLoader(conf);
 
   conf.module!.exprContextCritical = false;
+  conf.ignoreWarnings = [
+    {
+      module: /node_modules[\\/]parse5[\\/]/,
+    },
+  ];
   if (env === 'production') {
     conf.output = { ...conf.output, publicPath: './' };
   }

website/src/pages/doc/index.tsx

@@ -1,42 +1,13 @@
 import data from 'react-code-preview-layout/README.md';
-import CodeLayout from 'react-code-preview-layout';
 import MarkdownPreview from '@uiw/react-markdown-preview';
-import { getMetaId, isMeta, getURLParameters } from 'markdown-react-code-preview-loader';
-
-const Preview = CodeLayout.Preview;
-const Code = CodeLayout.Code;
-const Toolbar = CodeLayout.Toolbar;
+import { CodePreview } from '../markdown-example';
 
 const Doc = () => (
   <MarkdownPreview
     disableCopy={true}
     source={data.source}
     components={{
-      code: ({ inline, node, ...props }) => {
-        const { 'data-meta': meta, ...rest } = props as any;
-        if (inline || !isMeta(meta)) {
-          return <code {...props} />;
-        }
-        const line = node.position?.start.line;
-        const metaId = getMetaId(meta) || String(line);
-        const Child = data.components[`${metaId}`];
-        if (metaId && typeof Child === 'function') {
-          const code = data.data[metaId].value || '';
-          const param = getURLParameters(meta);
-          return (
-            <CodeLayout>
-              <Preview>
-                <Child />
-              </Preview>
-              <Toolbar text={code}>{param.title || 'Code Example'}</Toolbar>
-              <Code>
-                <code {...rest} />
-              </Code>
-            </CodeLayout>
-          );
-        }
-        return <code {...rest} />;
-      },
+      pre: (rest) => <CodePreview {...rest} components={data.components} data={data.data} />,
     }}
   />
 );

website/src/pages/markdown-example/README.md

@@ -1,7 +1,7 @@
 Markdown Preview Example
 ===
 
-这里是一个示例
+这里是一个`示例`
 
 ### 基本用法
 

website/src/pages/markdown-example/index.tsx

@@ -1,44 +1,64 @@
+import type { FC } from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import CodeLayout from 'react-code-preview-layout';
-import { getCodeString } from 'rehype-rewrite';
-import { getMetaId, isMeta, getURLParameters } from 'markdown-react-code-preview-loader';
+import { getMetaId, isMeta, getURLParameters, type CodeBlockData } from 'markdown-react-code-preview-loader';
+import type { Element, RootContent } from 'hast';
 import data from './README.md';
 
 const Preview = CodeLayout.Preview;
 const Code = CodeLayout.Code;
 const Toolbar = CodeLayout.Toolbar;
 
+type CodePreviewProps = React.HTMLAttributes<HTMLPreElement> & {
+  node?: RootContent;
+  components: CodeBlockData['components'];
+  data: CodeBlockData['data'];
+};
+
+export const CodePreview: FC<CodePreviewProps> = ({ components, data, node, ...props }) => {
+  if (node && node.type === 'element' && node.tagName === 'pre') {
+    const child = node.children[0] as Element;
+    if (!child) return <pre {...props} />;
+    const meta = ((child.data as any)?.meta || child.properties?.dataMeta) as string;
+    if (!isMeta(meta)) {
+      return <pre {...props} />;
+    }
+    const line = node?.position?.start.line;
+    const metaId = getMetaId(meta) || String(line);
+    const Child = components[`${metaId}`];
+    if (metaId && typeof Child === 'function') {
+      const code = data[metaId].value || '';
+      const { title, boreder = 1, checkered = 1, code: codeNum = 1, toolbar = 1 } = getURLParameters(meta || '');
+      return (
+        <CodeLayout bordered={!!Number(boreder)} disableCheckered={!Number(checkered)} style={{ marginBottom: 16 }}>
+          <Preview>
+            <Child />
+          </Preview>
+          {!!Number(toolbar) && (
+            <Toolbar text={code} visibleButton={!!Number(codeNum)}>
+              {title || 'Code Example'}
+            </Toolbar>
+          )}
+
+          {!!Number(codeNum) && (
+            <Code tagName="pre" style={{ marginBottom: 0 }} className={props.className}>
+              {props.children}
+            </Code>
+          )}
+        </CodeLayout>
+      );
+    }
+  }
+  return <code {...props} />;
+};
+
 export default function MarkdownExample() {
   return (
     <MarkdownPreview
       disableCopy={true}
       source={data.source}
       components={{
-        code: ({ inline, node, ...props }) => {
-          const { 'data-meta': meta, ...rest } = props as any;
-          if (inline || !isMeta(meta)) {
-            return <code {...props} />;
-          }
-          const line = node.position?.start.line;
-          const metaId = getMetaId(meta) || String(line);
-          const Child = data.components[`${metaId}`];
-          if (metaId && typeof Child === 'function') {
-            const code = getCodeString(node.children);
-            const param = getURLParameters(meta);
-            return (
-              <CodeLayout>
-                <Preview>
-                  <Child />
-                </Preview>
-                <Toolbar text={code}>{param.title || 'Code Example'}</Toolbar>
-                <Code>
-                  <code {...rest} />
-                </Code>
-              </CodeLayout>
-            );
-          }
-          return <code {...rest} />;
-        },
+        pre: (rest) => <CodePreview {...rest} components={data.components} data={data.data} />,
       }}
     />
   );