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 toremarkcorrectnewlines—flag to toggle newline transformation.normalize—auto-normalize magic blocks before processing.disableTokenizers—disable internalblockorinlinetokenizers.
<GlossaryContext/>and<VariablesContext/>
React provider and consumer wrappers for user data injection.
Updated 5 months ago
