remarkable-react


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...

`js
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!']
* },
* }
* ]
*/
}
`

$3

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

`js
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:
blockquote: Component, // Default:

br: Component, // Default:

code: Component, // Default:
del: Component, // Default:
em: Component, // Default:
h1: Component, // Default:

h2: Component, // Default:

h3: Component, // Default:

h4: Component, // Default:

h5: Component, // Default:

h6: Component, // Default:

html: Component, // Default:

img: Component, // Default:
ins: Component, // Default:
li: Component, // Default:

mark: Component, // Default:
ol: Component, // Default:

p: Component, // Default:


pre: Component, // Default:

    strong: Component,      // Default: 
    sub: Component,         // Default: 
    sup: Component,         // Default: 
    table: Component,       // Default: 
    tbody: Component,       // Default: 
    td: Component,          // Default: 
    tr: Component,          // Default: 
    ul: Component,          // Default: 
    /**
     * 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: () => ↩,
  },
});
`
$3
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...

`jsx
import SyntaxHighlighter from 'library';

const renderer = new RemarkableReactRenderer({
  components: {
    pre: ({ content, params: language }) => (
      
        SyntaxHighlighter.highlight(content, language),
      } } />
    ),
  }
});
``
Show more

    th: Component,          // Default: 

    thead: Component,       // Default: