Recommendation: Use MDX, it's the same thing, but better

(Although this library may be easier for you to integrate while MDX tools get built)

---

react-markings

Markdown in components, components in markdown

• Allows you to write markdown using commonmark.js
• Renders markdown as React elements using commonmark-react-renderer
• Embed React components inside your markdown (in any paragraph position) like this:

import*asReactfrom'react';importmdfrom'react-markings';functionExample(){return(<pre><code>...</code></pre>);}exportdefaultfunctionReadMe(){returnmd` # react-markings > Markdown in components, components in markdown - Allows you to write markdown using [commonmark.js](https://github.com/commonmark/commonmark.js) - Renders markdown as React elements using [commonmark-react-renderer](https://github.com/rexxars/commonmark-react-renderer) - Embed React components inside your markdown (in any paragraph position) like this:${<Example/>} `;}

If you want to customize rendering further, you can use customize to pass your own renderers.

import*asReactfrom'react';importmdfrom'react-markings';letcustomMd=md.customize({renderers: {// customize heading with classheading: props=>React.createElement('h'+props.level,{className: 'fancy-heading'},props.children),},});exportdefaultfunctionCustomHeading(){returncustomMd` # Fancy Heading `;}