Last active
November 1, 2019 20:39
-
-
Save jordanell/495586901e6b3704da25c5f6109bd867 to your computer and use it in GitHub Desktop.
Markdown to React page layout - Basic
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import marked from "marked"; | |
import PropTypes from "prop-types"; | |
import React from "react"; | |
const renderer = new marked.Renderer(); | |
const markedOptions = { | |
gfm: true, | |
tables: true, | |
breaks: false, | |
pedantic: false, | |
sanitize: false, | |
smartLists: true, | |
smartypants: false, | |
renderer | |
}; | |
class MarkdownElement extends React.Component { | |
static propTypes = { | |
text: PropTypes.string | |
}; | |
render() { | |
const { text } = this.props; | |
return ( | |
<div dangerouslySetInnerHTML={{ __html: marked(text, markedOptions) }} /> | |
); | |
} | |
} | |
export default MarkdownElement; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import PropTypes from "prop-types"; | |
import React from "react"; | |
import MarkdownElement from "MarkdownElement"; | |
class MarkdownPage extends React.Component { | |
static propTypes = { | |
req: PropTypes.func.isRequired | |
}; | |
getSections(markdown) { | |
return markdown | |
.filter(section => !/^\s*$/.test(section)); // Remove empty lines | |
} | |
render() { | |
const { req } = this.props; | |
let markdown; | |
req.keys().forEach(filename => { | |
if (filename.indexOf(".md") !== -1) { | |
markdown = req(filename).default; | |
} | |
}); | |
const sections = getSections(markdown); | |
return ( | |
<div> | |
<div className="content"> | |
{sections.map((section, index) => { | |
return <MarkdownElement key={index} text={section} />; | |
})} | |
</div> | |
</div> | |
); | |
} | |
} | |
export default MarkdownPage; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment