React Native Markdown



  1. React-native-markdown-display Npm
  2. Markdown To Jsx
  3. React Native Markdown View
  4. React Native Markdown Viewer
  5. React Native Markdown Editor

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

  • React Native Markdown Display It 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 elements. These components can be overwritten and styled as needed.
  • React-native-markdown-package Node Module Package for implementing markdown syntax in React Native. I knew this is not a perfect library, so your contribution, Pull Request, or anything else from you guys will be really appreciated.
  • Currently, react-markdown allows users to define element types (i.e., tag names such as 'br', a functional component, a class, etc) for markdown constructs (link, delete, break, etc).
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

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 elements. These components can be overwritten when needed as seen in the examples.

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:

[]reactreact-nativeversion
v16.20.50.43.0.0
v16.0.0-alpha.120.45.12.0.5
v16.0.0-alpha.60.44.02.0.5
x15.x^0.46.42.0.5
React native markdown editor

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:

React-native-markdown-display Npm

  1. foo
  2. bar

Code

Inline code

Indented code

Block code 'fences'

Syntax highlighting

Tables

OptionDescription
datapath to data files to supply the data that will be passed into templates.
engineengine to be used for processing templates. Handlebars is the default.
extextension to be used for dest files.

Right aligned columns

OptionDescription
datapath to data files to supply the data that will be passed into templates.
engineengine to be used for processing templates. Handlebars is the default.
extextension to be used for dest files.

Links

Mass effect 3 multiplayer console commands. Autoconverted link https://github.com/nodeca/pica (enable linkify to see)

Images

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

Markdown To Jsx

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

Knives out french. 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.

React Native Markdown View

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

Thanks To

React Native Markdown Viewer

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

React Native Markdown Editor

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

  1. Styling method. Geo orbital wheel.

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