Browse Source

:memo: add markdown viewer by remarked

Jeremy Zheng 3 years ago
parent
commit
f8bee39e06

+ 1 - 1
dashboard/src/components/nut/Home.tsx

@@ -7,7 +7,7 @@ const Widget = () => {
     <div>
       <h1>Home</h1>
       <br />
-      <MarkdownShow />
+      <MarkdownShow body="- Hello, **《mint》**!" />
       <br />
       <h3>Form</h3>
       <MarkdownForm />

+ 17 - 1
dashboard/src/components/nut/MarkdownShow.tsx

@@ -1,5 +1,21 @@
 import MDEditor from "@uiw/react-md-editor";
+import ReactMarkdown from "react-markdown";
+import { Card } from "antd";
 
-const Widget = () => <MDEditor.Markdown source="- Hello, **mint**!" />;
+interface IProps {
+  body: string;
+}
+
+const Widget = ({ body }: IProps) => (
+  <>
+    <Card title="Markdown Viewer 1">
+      <MDEditor.Markdown source={body} />
+    </Card>
+
+    <Card title="Markdown Viewer 2">
+      <ReactMarkdown>{body}</ReactMarkdown>
+    </Card>
+  </>
+);
 
 export default Widget;

BIN
documents/development/frontend/demo/md-view.png