https://github.com/moox/markdown-to-json
Transform markdown content as a JSON for easy rendering for front-end with React, React Native & similar
https://github.com/moox/markdown-to-json
html json markdown react react-native rehype remark unified
Last synced: about 1 year ago
JSON representation
Transform markdown content as a JSON for easy rendering for front-end with React, React Native & similar
- Host: GitHub
- URL: https://github.com/moox/markdown-to-json
- Owner: MoOx
- License: mit
- Created: 2019-06-07T20:27:48.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T16:16:54.000Z (over 3 years ago)
- Last Synced: 2024-10-19T19:31:44.736Z (over 1 year ago)
- Topics: html, json, markdown, react, react-native, rehype, remark, unified
- Language: JavaScript
- Homepage:
- Size: 1.22 MB
- Stars: 24
- Watchers: 3
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @moox/markdown-to-json
[](https://github.com/MoOx/markdown-to-json/actions)
[](https://www.npmjs.com/package/@moox/markdown-to-json)
> Transform markdown content as a JSON
This package is a minimal markdown preprocessor to make it easy to render
markdown in a JS environement like React, React Native etc.
It is meant to be used before runtime:
1. You transform your markdown files as JSON
2. You consume the JSON files from the JS without any runtime transformation
required
## Installation
```console
npm install @moox/markdown-to-json
```
or
```console
yarn add @moox/markdown-to-json
```
## Usage
### CLI
```console
npx markdown-to-json "docs/**/*.md" [optional output-folder]
```
or
```console
yarn markdown-to-json "docs/**/*.md" [optional output-folder]
```
⚠️ Be sure to put globs between quotes.
### Node.js
```js
const mdjs = require("@moox/markdown-to-json");
const output = mdjs.markdownAsJsTree("# markdown string");
```
By default, it handles:
- front-matter (via gray-matter)
- auto slug for headings (with anchors)
- code highlight (via highlight.js)
- table of contents (via [remark-toc](https://www.npmjs.com/package/remark-toc))
The idea is to get a markdown like this
````markdown
---
test: a
test2: b
---
## Test
[link](href)
```js
console.log(window);
```
````
like
```js
{
"test": "a",
"test2": "b",
"headings": [
{
"id": "test",
"level": 2,
"text": "Test"
}
],
"body": {
"tag": "div",
"children": [
{
"tag": "h2",
"props": {
"id": "test"
},
"children": [
//...
]
}
]
}
}
```
### Options
In addition to the markdown string, 2 arguments are accepted that are functions
that should returns an array of plugin with there options:
- [remark](https://github.com/remarkjs/remark) plugins
- [rehype](https://github.com/rehypejs/rehype) plugins
The first example is equivalent to
```js
const mdjs = require("@moox/markdown-to-json");
const output = mdjs.markdownAsJsTree(
"# markdown string",
mdjs.defaultRemarkPlugins
mdjs.defaultRehypePlugins
);
```
By default sending arguments will override [default plugins](./index.js). You
can get the default one by doing something like this
```js
const mdjs = require("@moox/markdown-to-json");
const output = mdjs.markdownAsJsTree(
"# markdown string",
() => ([
[require("remark-whatever"), {optionForWhatever: true}],
...mdjs.defaultRemarkPlugins()
]),
() => ([
[require("rehype-hispterpackage"), {/* no options */}}],
[require("rehype-anotherhispterpackage"), {powerUserOption: "super argument"}}],
...mdjs.defaultRehypePlugins()
]);
);
```
Thanks [unified](https://unifiedjs.com/) to make this possible!
[Check out input](__tests__/index.js) &
[output](__tests__/__snapshots__/index.js.snap) to get an idea of what to expect
from this package.
---
[LICENSE](LICENSE)