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. varValue (In fact, you're looking at it right now, since we've used it to render every doc in this project!) lorem bleegorgh

CX HELLO WORLD

• hi
• hello

hi

Installation

npm install --save @readme/markdown

ASP.NET

markdown-term

varValue

🧙

‍ 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:

Component

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:

JavaScript

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 to remark
  • correctnewlines—flag to toggle newline transformation.
  • normalize—auto-normalize magic blocks before processing.
  • disableTokenizers—disable internal block or inline tokenizers.
• <GlossaryContext/> and <VariablesContext/>
  React provider and consumer wrappers for user data injection.