feat: add github-markdown-css

package.json

@@ -51,7 +51,6 @@
     "nino-cli": "^1.1.4",
     "puppeteer-core": "^1.19.0",
     "react-lazyload": "^2.6.2",
-    "react-markdown": "^4.2.0",
     "typescript": "^3.5.3"
   },
   "devDependencies": {
@@ -61,6 +60,7 @@
     "@types/koa-bodyparser": "^4.3.0",
     "@types/koa-router": "^7.0.42",
     "@types/koa-static": "^4.0.1",
+    "@types/marked": "^0.6.5",
     "@types/prettier": "^1.18.2",
     "@types/puppeteer-core": "^1.9.0",
     "@types/react": "^16.9.2",
@@ -77,10 +77,12 @@
     "date-fns": "^2.0.0-beta.2",
     "fs-extra": "^8.1.0",
     "gh-pages": "^2.1.1",
+    "github-markdown-css": "^3.0.1",
     "koa-bodyparser": "^4.2.1",
     "koa-router": "^7.4.0",
     "koa-static": "^5.0.0",
     "lint-staged": "^9.2.3",
+    "marked": "^0.7.0",
     "mockdate": "^2.0.5",
     "npm-run-all": "^4.1.5",
     "post-compile-webpack-plugin": "^0.1.2",

src/pages/MarkdownDetail.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
-import Markdown from 'react-markdown/with-html';
+import marked from 'marked';
 import './css/MarkdownDetail.css';
+import 'github-markdown-css/github-markdown.css';
 
 export interface MarkdownDetailProps {
   dataSource: string;
 }
 
 export default (props: MarkdownDetailProps) => (
-  <div className="MarkdownDetail">
+  <div className="MarkdownDetail markdown-body">
     <div className="wrapper">
-      <div className="content">
-        <Markdown source={props.dataSource} escapeHtml={false} />
-      </div>
+      <div
+        className="content"
+        dangerouslySetInnerHTML={{ __html: marked(props.dataSource || '') }}
+      ></div>
     </div>
   </div>
 );

src/pages/__tests__/__snapshots__/MarkdownDetail.test.js.snap

@@ -5,59 +5,22 @@ exports[`MarkdownDetail render correctly 1`] = `
   dataSource="- test"
 >
   <div
-    className="MarkdownDetail"
+    className="MarkdownDetail markdown-body"
   >
     <div
       className="wrapper"
     >
       <div
         className="content"
-      >
-        <ReactMarkdownWithHtml
-          astPlugins={Array []}
-          escapeHtml={false}
-          parserOptions={Object {}}
-          plugins={Array []}
-          rawSourcePos={false}
-          renderers={Object {}}
-          skipHtml={false}
-          source="- test"
-          sourcePos={false}
-          transformLinkUri={[Function]}
-        >
-          <Root
-            key="root-1-1-0"
-          >
-            <List
-              depth={0}
-              key="list-1-1-0"
-              ordered={false}
-              start={null}
-              tight={true}
-            >
-              <ul>
-                <ListItem
-                  checked={null}
-                  index={0}
-                  key="listItem-1-1-0"
-                  ordered={false}
-                  tight={true}
-                >
-                  <li>
-                    <TextRenderer
-                      key="text-1-3-0"
-                      nodeKey="text-1-3-0"
-                      value="test"
-                    >
-                      test
-                    </TextRenderer>
-                  </li>
-                </ListItem>
-              </ul>
-            </List>
-          </Root>
-        </ReactMarkdownWithHtml>
-      </div>
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "<ul>
+<li>test</li>
+</ul>
+",
+          }
+        }
+      />
     </div>
   </div>
 </Component>

src/pages/__tests__/__snapshots__/MarkdownEditor.test.js.snap

@@ -92,30 +92,19 @@ exports[`MarkdownEditor render correctly 1`] = `
         >
           <Component>
             <div
-              className="MarkdownDetail"
+              className="MarkdownDetail markdown-body"
             >
               <div
                 className="wrapper"
               >
                 <div
                   className="content"
-                >
-                  <ReactMarkdownWithHtml
-                    astPlugins={Array []}
-                    escapeHtml={false}
-                    parserOptions={Object {}}
-                    plugins={Array []}
-                    rawSourcePos={false}
-                    renderers={Object {}}
-                    skipHtml={false}
-                    sourcePos={false}
-                    transformLinkUri={[Function]}
-                  >
-                    <Root
-                      key="root-1-1-0"
-                    />
-                  </ReactMarkdownWithHtml>
-                </div>
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "",
+                    }
+                  }
+                />
               </div>
             </div>
           </Component>