Overview

A compiler compiles the document into output usable by rendering programs. You can override the default compiler with custom compilers.

Default compiler

The default compiler, if not specified, compiles the content into stringified HTML.

Live Code Editor

// import Doc from 'unified-doc';

function() {
  const doc = Doc({
    content: '> **some** markdown content',
    filename: 'doc.md',
  });
  return <pre>{doc.compile().contents}</pre>;
}

// import Doc from 'unified-doc';
function() {
  const doc = Doc({
    content: '> **some** markdown content',
    filename: 'doc.md',
  });
  return <pre>{doc.compile().contents}</pre>;
}

Preview

<blockquote>
<p><strong>some</strong> markdown content</p>
</blockquote>

Compile to `react`

Use the rehype-react compiler to compile to react.

Live Code Editor

// import { createElement } from 'react';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';

function() {
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: '> **some** markdown content',
    filename: 'doc.md',
  });
  return <div>{doc.compile().result}</div>;
}

// import { createElement } from 'react';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';
function() {
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: '> **some** markdown content',
    filename: 'doc.md',
  });
  return <div>{doc.compile().result}</div>;
}

Preview

some markdown content

Custom compiler + options

A custom compiler can be applied using the PluggableList interface e.g. [compiler] or [[compiler, compilerOptions]]. The following example demonstrates a custom compiler that returns the hast tree in JSON format, overriding the default HTML string compiler.

Live Code Editor

// import Doc from 'unified-doc';

function() {
  function jsonHast(options) {
    this.Compiler = function compiler(tree) {
      return JSON.stringify(tree, null, options.space)
    }
  }

  const doc = Doc({
    compiler: [[jsonHast, { space: 2 }]],
    content: '> **some** markdown content',
    filename: 'doc.md',
  });

  return <pre>{doc.compile().contents}</pre>;
}

// import Doc from 'unified-doc';
function() {
  function jsonHast(options) {
    this.Compiler = function compiler(tree) {
      return JSON.stringify(tree, null, options.space)
    }
  }
  const doc = Doc({
    compiler: [[jsonHast, { space: 2 }]],
    content: '> **some** markdown content',
    filename: 'doc.md',
  });
  return <pre>{doc.compile().contents}</pre>;
}

Preview

{
  "type": "root",
  "children": [
    {
      "type": "element",
      "tagName": "blockquote",
      "properties": {},
      "children": [
        {
          "type": "text",
          "value": "\n"
        },
        {
          "type": "element",
          "tagName": "p",
          "properties": {},
          "children": [
            {
              "type": "element",
              "tagName": "strong",
              "properties": {},
              "children": [
                {
                  "type": "text",
                  "value": "some",
                  "position": {
                    "start": {
                      "line": 1,
                      "column": 5,
                      "offset": 4
                    },
                    "end": {
                      "line": 1,
                      "column": 9,
                      "offset": 8
                    }
                  }
                }
              ],
              "position": {
                "start": {
                  "line": 1,
                  "column": 3,
                  "offset": 2
                },
                "end": {
                  "line": 1,
                  "column": 11,
                  "offset": 10
                }
              }
            },
            {
              "type": "text",
              "value": " markdown content",
              "position": {
                "start": {
                  "line": 1,
                  "column": 11,
                  "offset": 10
                },
                "end": {
                  "line": 1,
                  "column": 28,
                  "offset": 27
                }
              }
            }
          ],
          "position": {
            "start": {
              "line": 1,
              "column": 3,
              "offset": 2
            },
            "end": {
              "line": 1,
              "column": 28,
              "offset": 27
            }
          }
        },
        {
          "type": "text",
          "value": "\n"
        }
      ],
      "position": {
        "start": {
          "line": 1,
          "column": 1,
          "offset": 0
        },
        "end": {
          "line": 1,
          "column": 28,
          "offset": 27
        }
      }
    }
  ],
  "position": {
    "start": {
      "line": 1,
      "column": 1,
      "offset": 0
    },
    "end": {
      "line": 1,
      "column": 28,
      "offset": 27
    }
  }
}

Overview

Default compiler

Compile to react

Custom compiler + options

Compile to `react`