换为marked

dashboard/src/pages/library/course/course.tsx

@@ -1,62 +1,68 @@
 //课程详情页面
 import { Link } from "react-router-dom";
 import { useParams } from "react-router-dom";
-import { Layout, Col, Row,Divider } from "antd";
+import { Layout, Col, Row, Divider } from "antd";
 import CourseShow from "../../../components/library/course/CourseShow";
 import CourseIntro from "../../../components/library/course/CourseIntro";
 import TocTree from "../../../components/article/TocTree";
 import { ListNodeData } from "../../../components/article/EditableTree";
-import ReactMarkdown from 'react-markdown'
-import rehypeRaw from 'rehype-raw'
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import { marked } from "marked";
 const { Content, Header } = Layout;
 
 let arrTocTree: ListNodeData[] = [];
-let  i = 0;
+let i = 0;
 do {
-  ++i
+  ++i;
   arrTocTree.push({
     key: i.toString(),
     title: `课程 ${i}`,
     level: 1,
   });
-   }while(i<10)  // 在循环的尾部检查条件
+} while (i < 10); // 在循环的尾部检查条件
 
-
-   let markdown='# 这是标题\n' +
-   '[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n' +
-   '> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已... \n\n' +
-  '**这是加粗的文字**\n\n' +
-   '*这是倾斜的文字*`\n\n' +
-   '***这是斜体加粗的文字***\n\n' +
-   '~~这是加删除线的文字~~ \n\n'+
-   '\`console.log(Hello World)\` \n\n'+
-   '```const a=2; ```'
+let markdown =
+  "# 这是标题\n" +
+  "[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n" +
+  "> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已... \n\n" +
+  "**这是加粗的文字**\n\n" +
+  "*这是倾斜的文字*`\n\n" +
+  "***这是斜体加粗的文字***\n\n" +
+  "~~这是加删除线的文字~~ \n\n" +
+  "\n\n" +
+  "|表格头1|表格头2|表格头3| \n\n" +
+  "|------|------|------| \n\n" +
+  "| 文本 | 文本 | 文本 |\n\n" +
+  "\n\n" +
+  "```const a=2; ```";
 
 const Widget = () => {
   // TODO
   const { courseid } = useParams(); //url 参数
-  
+
   return (
     <Layout>
-
-
-    <Content>
-      <Row>
+      <Content>
+        <Row>
           <Col flex="auto"></Col>
           <Col flex="1760px">
-    <div>
-      <div>
-      <CourseShow />
-      <Divider />   
-      <ReactMarkdown rehypePlugins={[rehypeRaw]} children={markdown} />
-      <CourseIntro />
-      <Divider />   
-      <TocTree treeData={arrTocTree} />
-        </div>
-
-    </div>
-    </Col>
-    </Row>
+            <div>
+              <div>
+                <CourseShow />
+                <Divider />
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: marked.parse(markdown),
+                  }}
+                ></div>
+                <CourseIntro />
+                <Divider />
+                <TocTree treeData={arrTocTree} />
+              </div>
+            </div>
+          </Col>
+        </Row>
       </Content>
     </Layout>
   );
@@ -64,7 +70,6 @@ const Widget = () => {
 
 export default Widget;
 
-
 /*
   return (
     <div>

dashboard/src/pages/library/course/lesson.tsx

@@ -1,65 +1,68 @@
 //讲页面
 import { Link } from "react-router-dom";
 import { useParams } from "react-router-dom";
-import { Layout, Col, Row,Divider } from "antd";
+import { Layout, Col, Row, Divider } from "antd";
 import CourseShow from "../../../components/library/course/CourseShow";
 import CourseIntro from "../../../components/library/course/CourseIntro";
 import TocTree from "../../../components/article/TocTree";
 import { ListNodeData } from "../../../components/article/EditableTree";
-import ReactMarkdown from 'react-markdown'
-import rehypeRaw from 'rehype-raw'
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import { marked } from "marked";
 const { Content, Header } = Layout;
 
 let arrTocTree: ListNodeData[] = [];
-let  i = 0;
+let i = 0;
 do {
-  ++i
+  ++i;
   arrTocTree.push({
     key: i.toString(),
     title: `课程 ${i}`,
     level: 1,
   });
-   }while(i<10)  // 在循环的尾部检查条件
+} while (i < 10); // 在循环的尾部检查条件
 
-   let markdown='# 这是标题\n' +
-   '[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n' +
-   '> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已... \n\n' +
-  '**这是加粗的文字**\n\n' +
-   '*这是倾斜的文字*`\n\n' +
-   '***这是斜体加粗的文字***\n\n' +
-   '~~这是加删除线的文字~~ \n\n'+
-   '\n\n'+
-   '|表格头1|表格头2|表格头3| \n\n'+
-   '|------|------|------| \n\n'+
-   '| 文本 | 文本 | 文本 |\n\n'+
-   '\n\n'+
-   '```const a=2; ```'
+let markdown =
+  "# 这是标题\n" +
+  "[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n" +
+  "> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已... \n\n" +
+  "**这是加粗的文字**\n\n" +
+  "*这是倾斜的文字*`\n\n" +
+  "***这是斜体加粗的文字***\n\n" +
+  "~~这是加删除线的文字~~ \n\n" +
+  "\n\n" +
+  "|表格头1|表格头2|表格头3| \n\n" +
+  "|------|------|------| \n\n" +
+  "| 文本 | 文本 | 文本 |\n\n" +
+  "\n\n" +
+  "```const a=2; ```";
 
 const Widget = () => {
   // TODO
   const { courseid } = useParams(); //url 参数
-  
+
   return (
     <Layout>
-
-
-    <Content>
-      <Row>
+      <Content>
+        <Row>
           <Col flex="auto"></Col>
           <Col flex="1760px">
-    <div>
-      <div>
-        <h1 style={{ "fontWeight": 'bold', "fontSize": 30}}>课程7</h1>
-      <Divider />   
-      <ReactMarkdown rehypePlugins={[rehypeRaw]} children={markdown} />
-      <Divider /> 
+            <div>
+              <div>
+                <h1 style={{ fontWeight: "bold", fontSize: 30 }}>课程7</h1>
+                <Divider />
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: marked.parse(markdown),
+                  }}
+                ></div>
+                <Divider />
 
-      <TocTree treeData={arrTocTree} />
-        </div>
-
-    </div>
-    </Col>
-    </Row>
+                <TocTree treeData={arrTocTree} />
+              </div>
+            </div>
+          </Col>
+        </Row>
       </Content>
     </Layout>
   );