# react-native-markdown-syntax

> A markdown component for react-native

Latest version **0.1.0** (published 2016-10-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-markdown-syntax
pnpm add react-native-markdown-syntax
yarn add react-native-markdown-syntax
bun add react-native-markdown-syntax
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2016-10-26 |
| First published | 2016-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Maintainers | liroo |
| Keywords | markdown, text processing, ast, react native |

## Links

- npm: https://www.npmjs.com/package/react-native-markdown-syntax
- Repository: https://github.com/Liroo/react-native-markdown-syntax
- Homepage: https://github.com/Liroo/react-native-markdown-syntax#readme
- Issues: https://github.com/Liroo/react-native-markdown-syntax/issues
- npm.io page: https://npm.io/package/react-native-markdown-syntax

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) ^4.16.4

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2016-10-26

## README

# react-native-markdown-syntax
***
This component is based on the parser [markdown-js](https://github.com/evilstreak/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:

---
_Source: https://npm.io/package/react-native-markdown-syntax · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._