react-native-markdown-syntax

react-native-markdown-syntax

This component is based on the parser markdown-js.

Installation

npm install react-native-markdown-syntax

Usage

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';
import Markdown from 'react-native-markdown-syntax';

export default class example extends Component {
  render() {
    return (
      <Markdown style={{flex: 1, marginTop: 20,}}>
        {'\n\n'}
        Emphasis, aka italics, with *asterisks* or _underscores_.{'\n'}
        Strong emphasis, aka bold, with **asterisks** or __underscores__.{'\n'}
        Combined emphasis with **asterisks and _underscores_**.{'\n'}
        Inline code uses one `. `Scratch this.`{'\n'}

        Here comes codeblock{'\n'}
        > Hello
         __em__
         `inline Code` az{'\n'}{'\n'}
        - ul{'\n\n​\n\n'}
        1. ol1{'\n'}
        2. ol2{'\n'}
        3. ol3{'\n\n\nHere a new list\n\n'}
        - ulnew{'\n'}
        - [ ] checkbox not supported yet :/{'\n'}
      </Markdown>
    );
  }
}
AppRegistry.registerComponent('example', () => example);

Based on a html parser, react-native-markdown-syntax support many markdown syntax, but not fully feature is implemented in react-native, here is the supported tag from web to react-native:

HTML Tag	Desc	Markdown syntax example
h {1-6}	Header	# Hello
strong	Bold	Hello
em	Italics	Hello
p	Paragraph	Hello
code	Code	Hello
pre	Inline Code	Hello
blockquote	Quote	> Hello
ul	Unordered List	- Hello {'\n'} - Hello
ol	Ordered List	1. Hello {'\n'} - Hello
li	List Item
br	Line Break	\n

You can pass style for each tag as mdStyle props:

<Markdown mdStyle={mdStyle}...

const mdStyle = {
  h: {
    fontWeight: '200',
  },
  h1: {
    fontSize: 32,
  },
    ...
  p: {
    marginTop: 10,
    marginBottom: 10,
    flexWrap: 'wrap',
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
  },
}

but there is already a default style, don't worry ! :guitar:

### TODO

There is much things to do and PR is appreciated ! :rocket: