修改预览页面

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kne/modules-dev",
-  "version": "2.1.18",
+  "version": "2.1.19",
   "description": "用于辅助在项目内启动一个规范化组件开发的环境",
   "publishConfig": {
     "access": "public",

src/ExamplePage.js

@@ -5,17 +5,17 @@ import {Space} from "antd";
 import style from "./example.module.scss";
 import classnames from "classnames";
 import ExampleDriver from "@kne/example-driver";
-import {HashRouter} from "react-router-dom";
+import {MemoryRouter} from "react-router-dom";
 import {createWithRemoteLoader} from '@kne/remote-loader';
 import Highlight from './Highlight';
 
 const ExampleDriverContext = createWithRemoteLoader({
     modules: ["components-core:Global@GlobalProvider"]
 })(({remoteModules, children, ...props}) => {
     const [GlobalProvider] = remoteModules;
-    return <HashRouter>
+    return <MemoryRouter>
         <GlobalProvider {...props}>{children}</GlobalProvider>
-    </HashRouter>
+    </MemoryRouter>
 });
 
 export const ExampleContent = createWithRemoteLoader({
@@ -64,8 +64,10 @@ export const ExampleContent = createWithRemoteLoader({
                                list={data.example.list}/>
             </div>
         </>}
-        <h2 className={style['part-title']}>API</h2>
-        <Highlight className="mark-down-html" html={data.api}/>
+        {data.api && <>
+            <h2 className={style['part-title']}>API</h2>
+            <Highlight className="mark-down-html" html={data.api}/>
+        </>}
     </Space>
 });
 

src/Highlight.js

@@ -11,8 +11,24 @@ const Highlight = ({html, ...props}) => {
         ref.current.querySelectorAll('pre code').forEach((el) => {
             hljs.highlightElement(el);
         });
+
     }, [html]);
-    return <div {...props} ref={ref} dangerouslySetInnerHTML={{__html: html}}/>
+
+    // 给所有 table 元素外面包裹一层 div
+    const wrapTableElements = (htmlString) => {
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = htmlString;
+        const tables = tempDiv.querySelectorAll('table');
+        tables.forEach(table => {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'table-content';
+            table.parentNode.insertBefore(wrapper, table);
+            wrapper.appendChild(table);
+        });
+        return tempDiv.innerHTML;
+    };
+
+    return <div {...props} ref={ref} dangerouslySetInnerHTML={{__html: wrapTableElements(html)}}/>
 };
 
 export default Highlight;

src/example.module.scss

@@ -1,7 +1,16 @@
 .main {
   :global(.mark-down-html) {
+    overflow-x: auto;
+    width: 100%;
+
+    :global(.table-content) {
+      overflow-x: auto;
+      width: 100%;
+    }
+
     table {
       width: 100%;
+      min-width: 600px;
       margin: 8px 0 16px;
       empty-cells: show;
       border: 1px solid #ebedf0;