React Webapp to edit and preview markdown. React.js Examples Ui. React Native 59. WYSIWYG Markdown Editor. For the past two months I've been working on a React Native app called Uni. We're trying to make the easiest way to share funds as a. Markdown renderer for react-native, with CommonMark spec support + adds syntax extensions & sugar (URL autolinking, typographer). React Native Markdown Renderer. Is a 100% compatible CommonMark renderer, a react-native markdown renderer done right. This is not a web-view markdown renderer but a renderer that uses native components for all its.

MDX in React-native. GitHub Gist: instantly share code, notes, and snippets.

Markdown renderer for react-native, with CommonMark spec support + adds syntax extensions & sugar (URL autolinking, typographer).

React Native Markdown Renderer

Is a 100% compatible CommonMark renderer, a react-native markdown renderer done right. This is nota web-view markdown renderer but a renderer that uses native components for all its elements. These components can be overwritten when needed as seen in the examples.

Quick links

Syntax Support

To give a summary of the supported syntax react-native-markdown-renderer supports.

• Tables
• Heading 1 > 6
• Horizontal Rules
• Typographic replacements
• Emphasis ( bold, italic, strikethrough )
• Blockquotes
• Lists
  • Ordered
  1. Unordered
  2. foo
  3. bar
• Code Blocks
• Syntax highlighting
• Links
• Images
• Plugins for extra syntax support, see plugins. Because this markdown-renderer uses markdown-it as its base it also supports all its plugins and subsequent extra language support.

Tested on:

[]	react	react-native	version
v	16.2	0.50.4	3.0.0
v	16.0.0-alpha.12	0.45.1	2.0.5
v	16.0.0-alpha.6	0.44.0	2.0.5
x	15.x	^0.46.4	2.0.5

Todo

• add styleSheet support
• add plugin support
• add support for seperate rules

How to:

npm

yarn

See WIKI for examples and documentation

Syntax Support

Advertisement :)

• pica - high quality and fast imageresize in browser.
• babelfish - developer friendlyi18n with plurals support and easy syntax.

You will like those projects!

h1 Heading 8-)

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

Horizontal Rules

Typographic replacements

Enable typographer option to see result.

(c) (C) (r) (R) (tm) (TM) (p) (P) +-

test.. test... test..... test?..... test!....

!!!!!! ???? , -- ---

'Smartypants, double quotes' and 'single quotes'

Emphasis

This is bold text

This is bold text

This is italic text

This is italic text

Strikethrough

Blockquotes

Blockquotes can also be nested...

...by using additional greater-than signs right next to each other...

...or with spaces between arrows.

Lists

Unordered

• Create a list by starting a line with +, -, or *
• Sub-lists are made by indenting 2 spaces:
  • Marker character change forces new list start:
    • Ac tristique libero volutpat at
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
• Very easy!

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

1. You can use sequential numbers...
2. ...or keep all the numbers as 1.

Start numbering with offset:

1. foo
2. bar

Code

Inline code

Indented code

Block code 'fences'

Syntax highlighting

Tables

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Right aligned columns

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Links

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)

Images

React Native Markdown Display

Like links, Images also have a footnote style syntax

With a reference later in the document defining the URL location:

HomePage

Repository

git+https://github.com/nvthai/react-native-markdown-renderer.git

React Native Markdown Package is a library for implementing markdown syntax in React Native.

Getting started

To install this library, you can easily run this command from your project folder.

npm i react-native-markdown-package --save

Check this simple app for implementation example Example app

How to use

What you need to do is import the react-native-markdown-package module and then use the<Markdown/> tag.

How to use?

Here we are, take a look at this simple implementation:

Properties

styles

Default style properties will be applied to the markdown. You could replace it with your preference by adding styles property like the example above.

onLink

This prop will accept a function. This is a callback function for any link inside markdown syntax, so you could costumize the handler for onClick event from the link.

onLinkCallback should be a function that returns a promise.

NOTE :Email link (mailto) could be tested on real device only, it won't be able to test on Simulator as discuss in this StackOverflow

React-native-markdown-package

Thanks To

I'm very thankful to the contributors who help me to make this libary better:

Reactjs Markdown

This project was actually forked from lwansbrough , with some enhancements below :

React Native Markdown Editor

1. Styling method.

   Now you can easily add styling on each syntax, e.g. add different color either in strong, header, or another md syntax. All default styles in this package is also already moved to new file styles.js.

2. Refactoring some codes to adopt ES6 style.

   Refactor index.js using ES6. :)

3. Support Sublist.

   In the previous library, you couldn't add sublist. It was not supported. But now, this feature already added here. Please follow the instruction above...

4. Latest release:

   • add Proptypes Support, (1.0.1)

   • Fix deprecated View.proptypes and update Readme (1.0.3)

   • Upgrade dependency, lodash, avoid vulnerabilities (1.1.0)

   • Fix performance issue, import only necessarry function from lodash (1.1.1)

   • Finalize Blockquote feature (1.2.0)

   • Update Docs (1.2.1)

   • Allow user to include plain text from variable using back tick (1.3.3)

   • New feature, codeblock (1.4.0)

   • New feature, on link handler (1.4.3)

   • Bug fix, Strike through issue (1.4.4)

   • Default Style for outer View, remove deprecated ComponentWillMount (1.5.0)

   • Allow user to replace default rules, update default font family for codeBlock on android (v1.6.0)

   • Update to use latest simple-markdown (v1.7.0)

   • Update to use latest simple-markdown (v1.8.0)

Happy Coding... ;)