Merge pull request #43 from jackyzha0/markdown

Markdown

2 files changed, 29 insertions, 5 deletions

diff --git a/frontend/src/components/renderers/Markdown.js b/frontend/src/components/renderers/Markdown.js
new file mode 100644
index 0000000..b1d7905
--- /dev/null
+++ b/frontend/src/components/renderers/Markdown.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import marked from 'marked';
+import styled from 'styled-components'
+
+const Content = styled.div`
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    img {
+        max-width: 100%;
+    }
+`
+const Markdown = (props) => {
+    const dangerousHtml = {
+        __html: marked(props.content)
+    }
+    return <Content dangerouslySetInnerHTML={dangerousHtml} />;
+}
+
+export default Markdown
\ No newline at end of file
diff --git a/frontend/src/components/renderers/RenderDispatch.js b/frontend/src/components/renderers/RenderDispatch.js
index 892c649..35fdc54 100644
--- a/frontend/src/components/renderers/RenderDispatch.js
+++ b/frontend/src/components/renderers/RenderDispatch.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import styled from 'styled-components'
 import Latex from './Latex'
+import Markdown from './Markdown'
 import CodeRenderer from './Code'
 
-const LatexWrapper = styled.div`
+const RenderWrapper = styled.div`
     padding: 2em;
 `
 
@@ -11,10 +12,14 @@ const RenderDispatch = React.forwardRef((props, ref) => {
     switch (props.language) {
         case 'latex':
             return (
-                <LatexWrapper ref={ref}>
-                    <Latex
-                        content={props.content} />
-                </LatexWrapper>)
+                <RenderWrapper ref={ref}>
+                    <Latex content={props.content} />
+                </RenderWrapper>)
+        case 'markdown':
+            return (
+                <RenderWrapper>
+                    <Markdown content={props.content} />
+                </RenderWrapper>)
         default:
             return (
                 <CodeRenderer