remarkable-react

    1.4.3 • Public • Published

    remarkable-react

    Build Status npm version Code Climate

    A configurable React component renderer for Remarkable.

    Install

    $ yarn add remarkable-react
    

    Usage

    Simply instantiate a new RemarkableReactRenderer and replace the standard Remarkable renderer. Like so...

    import Remarkable from 'remarkable';
    import RemarkableReactRenderer from 'remarkable-react';
     
    const md = new Remarkable();
    md.renderer = new RemarkableReactRenderer();
     
    console.log(md.render('# Remarkable rulezz!'));
     
    /*
     * => [
     *  ReactComponent {
     *    type: 'h1',
     *    key: 0,
     *    props: {
     *      children: ['Remarkable ruleszz!']
     *    },
     *  }
     * ]
     */
    }

    Options

    See the configuration options below that can be passed to RemarkableReactRenderer.

    new RemarkableReactRenderer({
     
      // Key generator function used to generate the need React keys
      // Default: return `index`
      keyGen: (token, index) => 'A Key',
     
      // This enables you to configure the properties that gets passed to
      // the React component. The value can either be a Function, String or Boolean.
      //
      // > Boolean: `true` will pass it through as it is, `false` will not pass it.
      // > String: Used to remap the prop and pass through under the new name.
      // > Function(value, type): Returns an object with new `key` and/or `value`.
      //
      remarkableProps: {
        align: '',    // Default: Function that remaps to style. (For tables)
        alt: '',      // Default: true (for images)
        block: '',    // Default: false
        content: '',  // Default: Function that returns `dangerouslySetInnerHTML` when HTML is enabled.
        hLevel:'',    // Default: false
        href:'',      // Default: true (for links)
        id: '',       // Default: Function that returns href for footnote anchors and id for footnote refs
        level: '',    // Default: false
        lines: '',    // Default: false
        order: '',    // Default: false
        params:'',    // Default: false
        src: '',      // Default: true (for images)
        subId: '',    // Default: false,
        tight: '',    // Default: false
        title: '',    // Default: true (for images and links)
        type:'',      // Default: false
      },
     
      // Pass in your own React components!
      //
      // Note: At the moment the following are not implemented.
      // * abbreviations
      // * definition lists
      //
      components: {
        a: Component,           // Default: <a />
        blockquote: Component,  // Default: <blockquote />
        br: Component,          // Default: <br />
        code: Component,        // Default: <code />
        del: Component,         // Default: <del />
        em: Component,          // Default: <em />
        h1: Component,          // Default: <h1 />
        h2: Component,          // Default: <h2 />
        h3: Component,          // Default: <h3 />
        h4: Component,          // Default: <h4 />
        h5: Component,          // Default: <h5 />
        h6: Component,          // Default: <h6 />
        html: Component,        // Default: <div />
        img: Component,         // Default: <img />
        ins: Component,         // Default: <ins />
        li: Component,          // Default: <li />
        mark: Component,        // Default: <mark />
        ol: Component,          // Default: <ol />
        p: Component,           // Default: <p />
        pre: Component,         // Default: <pre />
        strong: Component,      // Default: <strong />
        sub: Component,         // Default: <sub />
        sup: Component,         // Default: <sup />
        table: Component,       // Default: <table />
        tbody: Component,       // Default: <tbody />
        td: Component,          // Default: <td />
        th: Component,          // Default: <th />
        thead: Component,       // Default: <thead />
        tr: Component,          // Default: <tr />
        ul: Component,          // Default: <ul />
     
        /**
         * Custom components that are defined in the tokens
         * section below.
         */
        custom_component: Component
      },
     
      // This enables you to configure the mapping of remarkable tokens to component (above).
      // The value can either be a Function, String or Array.
      //
      // > Array[String]: Will nest components from parent down.
      // > String: Used to map directly to a single component.
      // > Function(tokenObject, remarkableOptions): Return a string or Component.
      //
      tokens: {
     
        // Use this to also handle your custom remarkable tokens!
        custom_token: 'custom_component',
      },
     
      // This enables you to quickly configure how children are rendered for tokens.
      // By default the `content` of a token is mapped to `children`.
      children: {
        footnote_anchor: () => ``,
      },
    });

    Syntax Highlighting

    I've tried to keep this renderer unopinionated and impartial to any one highlighting library, but it is still possible to get this working with a set up like...

    import SyntaxHighlighter from 'library';
     
     
    const renderer = new RemarkableReactRenderer({
      components: {
        pre: ({ content, params: language }) => (
          <div dangerouslySetInnerHTML={ { __html:
            SyntaxHighlighter.highlight(content, language),
          } } />
        ),
      }
    });

    Install

    npm i remarkable-react

    DownloadsWeekly Downloads

    1,318

    Version

    1.4.3

    License

    MIT

    Unpacked Size

    30.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • hhogg