@moox/markdown-to-json

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

npm install @moox/markdown-to-json

or

yarn add @moox/markdown-to-json

Usage

CLI

npx markdown-to-json "docs/**/*.md" [optional output-folder]

or

yarn markdown-to-json "docs/**/*.md" [optional output-folder]

⚠️ Be sure to put globs between quotes.

Node.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)

The idea is to get a markdown like this

---
test: a
test2: b
---

## Test

[link](href)

```js
console.log(window);
```

like

{
  "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 plugins
• rehype plugins

The first example is equivalent to

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. You can get the default one by doing something like this

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 to make this possible!

Check out input & output to get an idea of what to expect from this package.

---

LICENSE