Remark: Parse Markdown into JSX

Created on 18 Jun 2017 · 4Comments · Source: remarkjs/remark

I'm trying to parse a Markdown file into a JS module file exporting a React component. This would be done in a build step, so it doesn't have to run in the browser.

Being a bit overwhelmed by all the parts of the unified ecosystem I was hoping someone could point me in the direction of a straight forward solution.

For the lack of a better explanation, here is an example of what I'm trying to do.

Input: post.md

---
title: 'My Post'
---

This is a *simple* post.

Output: post.jsx

import P from 'my-custom-elements/p'
import Em from 'my-custom-elements/em'


export default () => <div>

  <P>This is a <Em>simple</Em> post.</P>

</div>

export const meta = {
  title: 'My Post'
}

I'm thinking this would look something like

post.md
1) -> mdast
2) -> hast
3.1)   - html tags -> jsx tags (e.g. <p> to <MyCustomP>)
3.2)   - html attributes -> jsx attributes (e.g. class="" to className="")
4) -> stringify
5) -> wrap in js module template.
6) -> post.jsx

Any pointers welcome. :octocat:

Source