react-markings
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-markings package

    1.3.0 • Public • Published

    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
      `;
    }

    Keywords

    none

    Install

    npm i react-markings

    DownloadsWeekly Downloads

    1,839

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    6.02 kB

    Total Files

    4

    Last publish

    Collaborators

    • padmaia
    • thejameskyle