**Markdown** in <Components/>, <Components/> in **Markdown**
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
flow-typed/npm Init commit Aug 22, 2017
.flowconfig Init commit Aug 22, 2017
.gitignore
.travis.yml Removing node 4 from travis.yml Apr 25, 2018
LICENSE Init commit Aug 22, 2017
README.md
index.js fix flow type Apr 26, 2018
package.json
test.js
yarn.lock Updating package.json and deps Apr 25, 2018

README.md

Recommendation: Use MDX, it's the same thing, but better

(Although this library may be easier for you to integrate while MDX tools get built)


react-markings

Markdown in components, components in markdown

  • Allows you to write markdown using commonmark.js
  • Renders markdown as React elements using commonmark-react-renderer
  • Embed React components inside your markdown (in any paragraph position) like this:
import * as React from 'react';
import md from 'react-markings';

function Example() {
  return (
    <pre>
      <code>...</code>
    </pre>
  );
}

export default function ReadMe() {
  return md`
    # react-markings

    > Markdown in components, components in markdown

    - Allows you to write markdown using [commonmark.js](https://github.com/commonmark/commonmark.js)
    - Renders markdown as React elements using [commonmark-react-renderer](https://github.com/rexxars/commonmark-react-renderer)
    - Embed React components inside your markdown (in any paragraph position) like this:

    ${<Example/>}
  `;
}

If you want to customize rendering further, you can use customize to pass your own renderers.

import * as React from 'react';
import md from 'react-markings';

let customMd = md.customize({
  renderers: {
    // customize heading with class
    heading: props => React.createElement('h' + props.level, { className: 'fancy-heading' }, props.children),
  },
});

export default function CustomHeading() {
  return customMd`
    # Fancy Heading
  `;
}