Skip to content

Commit d36048a

Browse files
Add architecture section to readme
Closes GH-578. Reviewed-by: Titus Wormer <tituswormer@gmail.com>
1 parent a2b611b commit d36048a

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

readme.md

+30
Original file line numberDiff line numberDiff line change
@@ -331,6 +331,36 @@ render(
331331

332332
</details>
333333

334+
## Architecture
335+
336+
```txt
337+
react-markdown
338+
+-------------------------------------------------------------------------------------------------------------------------------------------+
339+
| |
340+
| +----------+ +----------------+ +---------------+ +----------------+ +------------+ |
341+
| | | | | | | | | | | |
342+
| -markdown->+ remark +-mdast->+ remark plugins +-mdast->+ remark-rehype +-hast->+ rehype plugins +-hast->+ components +-react elements-> |
343+
| | | | | | | | | | | |
344+
| +----------+ +----------------+ +---------------+ +----------------+ +------------+ |
345+
| |
346+
+-------------------------------------------------------------------------------------------------------------------------------------------+
347+
```
348+
349+
relevant links: [markdown](https://commonmark.org), [remark](https://github.com/remarkjs/remark), [mdast](https://github.com/syntax-tree/mdast), [remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md), [remark-rehype](https://github.com/remarkjs/remark-rehype), [hast](https://github.com/syntax-tree/hast), [rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md), [components](#appendix-b-components)
350+
351+
To understand what this project does, it’s very important to first understand
352+
what unified does: please read through the [`unifiedjs/unified`](https://github.com/unifiedjs/unified)
353+
readme (the part until you hit the API section is required reading).
354+
355+
react-markdown is a unified pipeline — wrapped so that most folks don’t need to
356+
directly interact with unified. The processor goes through these steps:
357+
358+
* Parse Markdown to mdast (markdown syntax tree)
359+
* Transform through remark (markdown ecosystem)
360+
* Transform mdast to hast (HTML syntax tree)
361+
* Transform through rehype (HTML ecosystem)
362+
* Render hast to react with components
363+
334364
## Appendix A: HTML in markdown
335365

336366
`react-markdown` typically escapes HTML (or ignores it, with `skipHtml`)

0 commit comments

Comments
 (0)