8

Rm

Remarkable React (2016)

A React renderer for the remarkable markdown parsing library. [https://github.com/HHogg/remarkable-react]

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut dolor risus. Pellentesque luctus, elit vitae molestie molestie, felis massa varius tortor, ac pellentesque odio sapien ac enim.

Lorem ipsum dolor sit amet

Phasellus gravida ante eu lectus rutrum, faucibus laoreet nunc sagittis. Pellentesque ac cursus lorem, non ullamcorper mi. Donec luctus tellus vitae mattis blandit. Sed molestie augue non velit ornare facilisis. Curabitur consectetur dolor ac nisi varius accumsan.
Lorem ipsum dolor sit amet
Sed pharetra sollicitudin magna id laoreet. Nam dui ligula, vulputate eu posuere ut, vulputate interdum justo. Aliquam erat volutpat. Phasellus vestibulum porta urna, vel commodo dolor lacinia et.
Header Cell 1Header Cell 2Header Cell 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 1Row 2 Cell 2Row 2 Cell 3
Ordered List
  1. List Item 1
  2. List Item 2
  3. List Item 3
Unordered List
  • List Item 1
  • List Item 2
  • List Item 3
Highlighted Code
import React, { Component } from 'react';

export default class Lorem extends Component {
  render() {
    return (
      <p>Hello</p>
    );
  }
}
README.md

remarkable-react

Build Statusnpm versionCode Climate
A configurable React component renderer for Remarkable. [Not a simple dangerouslySetInnerHTML!

Install

npm install remarkable-react --save

# OR

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: function(token, index) {
    return '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: () => `↩`,
  },
});

Contributing

:heart: contribution, but please try to add any needed additional tests, make sure previous tests pass and linting is all groovy.
yarn test
yarn lint

License