@@ -2,7 +2,7 @@ import MarkdownPreview from '@uiw/react-markdown-preview';
2
2
import PreView from '../../components/CodeLayout' ;
3
3
import useMdData from './../../components/useMdData' ;
4
4
import { Loader } from 'uiw' ;
5
-
5
+ import styles from './../index.module.less' ;
6
6
const getMetaData = ( meta : string ) => {
7
7
if ( meta ) {
8
8
const [ metaItem ] = / m d x : ( .[ \w | : ] + ) / i. exec ( meta ) || [ ] ;
@@ -19,39 +19,42 @@ export function ExamplePage() {
19
19
const { mdData, loading } = useMdData ( ( path ) => import ( `./App${ path } .md` ) ) ;
20
20
return (
21
21
< Loader style = { { width : '100%' } } loading = { loading } tip = "loading..." >
22
- < MarkdownPreview
23
- source = { mdData . source }
24
- components = { {
25
- code : ( { inline, node, ...props } ) => {
26
- const {
27
- 'data-meta' : meta ,
28
- noPreview,
29
- noScroll,
30
- bgWhite,
31
- noCode,
32
- codePen,
33
- codeSandboxOption,
34
- codeSandbox,
35
- ...rest
36
- } = props as any ;
37
- if ( inline ) {
38
- return < code { ...props } /> ;
39
- }
40
- const line = node . position ?. start . line ;
41
- const funName = getMetaData ( meta || '' ) || line ;
42
- const Child = mdData . components [ funName || '' ] ;
43
- if ( funName && typeof Child === 'function' ) {
44
- const copyNodes = mdData . codeBlock [ funName ] || '' ;
45
- return (
46
- < PreView code = { < code { ...rest } /> } copyNodes = { copyNodes } >
47
- < Child />
48
- </ PreView >
49
- ) ;
50
- }
51
- return < code { ...rest } /> ;
52
- } ,
53
- } }
54
- />
22
+ < div >
23
+ < MarkdownPreview
24
+ source = { mdData . source }
25
+ className = { styles . markdown }
26
+ components = { {
27
+ code : ( { inline, node, ...props } ) => {
28
+ const {
29
+ 'data-meta' : meta ,
30
+ noPreview,
31
+ noScroll,
32
+ bgWhite,
33
+ noCode,
34
+ codePen,
35
+ codeSandboxOption,
36
+ codeSandbox,
37
+ ...rest
38
+ } = props as any ;
39
+ if ( inline ) {
40
+ return < code { ...props } /> ;
41
+ }
42
+ const line = node . position ?. start . line ;
43
+ const funName = getMetaData ( meta || '' ) || line ;
44
+ const Child = mdData . components [ funName || '' ] ;
45
+ if ( funName && typeof Child === 'function' ) {
46
+ const copyNodes = mdData . codeBlock [ funName ] || '' ;
47
+ return (
48
+ < PreView code = { < code { ...rest } /> } copyNodes = { copyNodes } >
49
+ < Child />
50
+ </ PreView >
51
+ ) ;
52
+ }
53
+ return < code { ...rest } /> ;
54
+ } ,
55
+ } }
56
+ />
57
+ </ div >
55
58
</ Loader >
56
59
) ;
57
60
}
0 commit comments