threepointone / Markdown In Js
inline markdown for react/jsx
Stars: ✭ 781
Programming Languages
javascript
184084 projects - #8 most used programming language
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.
${ <span> interpolate more <Content/> </span> }
you can <i>inline *html*</i> or even <OtherComponents/>, wow
<div style=${{ fontWeight: 'bold' }}
className=${'some more styles'}
onClick=${handler}>
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 = () => md({ h1: MyHeading, a: MyLink })`
# 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!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].