diff options
Diffstat (limited to 'frontend/src/components/renderers')
| -rw-r--r-- | frontend/src/components/renderers/Markdown.js | 19 | ||||
| -rw-r--r-- | frontend/src/components/renderers/RenderDispatch.js | 15 |
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 |