markdown-in-js
zero-overhead markdown in your react components
usage
add 'markdown-in-js/babel'
to the plugins
field of your babel config
import markdown from 'markdown-in-js' const App = markdown`## This is some content.You can write _markdown_ as you'd like. you can <i>inline *html*</i> or even <OtherComponents/>, wow <div style= className= onClick=> interpolate attributes as expected</div>`
- gets compiled to react elements via a babel plugin
- preserves interpolations
- built with commonmark
- optionally add prismjs for syntax highlighting of code blocks
custom components
You can use custom components for markdown primitives like so -
import md from 'markdown-in-js'import MyHeading MyLink from './path/to/components' const App = `# this will be a custom header[custom link component](/url/to/link)`
todo
- optionally no-wrap paragraphs
- optionally return array of elements
- instructions for in-editor syntax highlighting
- add gotchas to docs
- precompile code blocks
- commonmark options
- tests!