Skip to content
**Markdown** in <Components/>, <Components/> in **Markdown**
Branch: master
Clone or download
Latest commit 3d01306 Aug 28, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
flow-typed/npm Init commit Aug 22, 2017
.flowconfig Init commit Aug 22, 2017
.gitignore Init commit Aug 22, 2017
.travis.yml Removing node 4 from travis.yml Apr 25, 2018
LICENSE Init commit Aug 22, 2017
README.md Update README.md Aug 28, 2018
index.js fix flow type Apr 26, 2018
package.json 1.3.0 Apr 26, 2018
test.js withRenderers -> customize Feb 27, 2018
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
  `;
}
You can’t perform that action at this time.