Getting Started
ReadMe's Markdown engine, with notes of GitHub, modern styles, and a hint of magic.
A remark-based Markdown engine for parsing and rendering ReadMe docs. (In fact, you're looking at it right now, since we've used it to render every doc in this project!)
npm install --save @readme/markdown
🧙‍ Backwards Compatible
Our old engine was based on a format we call "magic blocks". This was our custom, JSON-based syntax for writing rich components alongside plain-text Markdown. To provide seamless backwards-compatibility, the engine ships with a built-in parser for the older format so we can transpile it directly to our new ReadMe-flavored syntax.
Usage
By default, the Markdown library exports a function which takes a string of ReadMe-flavored markdown and returns a tree of React components:
import React from 'react';
import rdmd from '@readme/markdown';
export default ({ body }) => (
<div className="markdown-body">
{rdmd(body)}
</div>
);
Exports
Transformers
In addition to the default React processor, the package exports a few other methods for parsing and rendering ReadMe-flavored markdown:
import * as rdmd from '@readme/markdown';
This gives you various methods and utilities:
Export | Description | Arguments |
---|---|---|
react | default; returns a VDOM React tree | text , options |
html | transform markdown in to HTML | text , options |
ast | transform markdown to an mdast object | text , options |
md | transform mdast in to ReadMe-flavored markdown | ast , options |
Utilities
The utils
export gives you access to various tools and configuration settings:
options
a hash of default settings accepted by the rdmd engine.markdownOptions
—configuration object passed toremark
correctnewlines
—flag to toggle newline transformation.normalize
—auto-normalize magic blocks before processing.disableTokenizers
—disable internalblock
orinline
tokenizers.
<GlossaryContext/>
and<VariablesContext/>
React provider and consumer wrappers for user data injection.
Updated 9 months ago