https://github.com/tradle/rn-markdown

basic markdown renderer for react-native using the great https://github.com/chjj/marked parser
https://github.com/tradle/rn-markdown

component markdown marked react react-component react-native

Last synced: about 4 hours ago
JSON representation

basic markdown renderer for react-native using the great https://github.com/chjj/marked parser

• Host: GitHub
• URL: https://github.com/tradle/rn-markdown
• Owner: tradle
• License: mit
• Created: 2017-06-08T04:10:35.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-11T02:02:16.000Z (almost 2 years ago)
• Last Synced: 2024-04-13T22:05:32.307Z (7 months ago)
• Topics: component, markdown, marked, react, react-component, react-native
• Language: JavaScript
• Homepage: https://tradle.github.io/rn-markdown-playground/
• Size: 104 KB
• Stars: 22
• Watchers: 6
• Forks: 9
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rn-markdown

Markdown rendering component, using the parser from [marked](https://github.com/chjj/marked).

[play](https://tradle.github.io/rn-markdown-playground/) with the [react-native-web](https://github.com/necolas/react-native-web) version

## Install

```sh

npm install --save rn-markdown

# or

yarn add rn-markdown

```

## Usage

The example below, and the component styles were adapted from [react-native-simple-markdown](https://github.com/CharlesMangwa/react-native-simple-markdown).

```js

import React, { Component } from 'react'

import {

  AppRegistry,

  StyleSheet,

  Text,

  View,

  Alert,

  TouchableHighlight

} from 'react-native'

import createMarkdownRenderer from 'rn-markdown'

// pass in `marked` opts, e.g. gfm: true for Github Flavored Markdown

const Markdown = createMarkdownRenderer({ gfm: false })

// define a custom renderer for links

Markdown.renderer.link = props => {

  const { markdown, passThroughProps } = props

  const { href } = markdown

  return (

     Alert.alert('check out this hot href', href)}>

      

        {props.children}

      

    

  )

}

// example partially from react-native-simple-markdown

export default class MarkdownExample extends Component {

  render() {

    const text =

`

You can **emphasize**

You can even [**link your website**](http://carlito.ninja) or if you prefer: [email somebody](mailto:[email protected])

Spice it up with some GIFs 💃:

![Some GIF](https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif)

And even add a cool video 😎!

[![A cool video from YT](https://img.youtube.com/vi/dQw4w9WgXcQ/0.jpg)](http://www.youtube.com/watch?v=dQw4w9WgXcQ)

[![Another one from Vimeo](https://i.vimeocdn.com/video/399486266_640.jpg)](https://vimeo.com/57580368)

# heading 1

content 1

## heading 2

### heading 3

#### heading 4

uh oh...numbered list coming up

1. a

1. b

  - with an unnumbered list inside

  - blah

    - blah blah

more frakking lists

- blah

- blah1

- blah2

  - blah2.1

  - blah2.2

    - blah2.2.1

    - blah2.2.2

`

    return (

      

        {text}

      

    )

  }

}

const markdownStyles = {

  container: {

    paddingLeft: 10

  },

  heading1: {

    fontSize: 24,

    color: 'purple',

  },

  link: {

    color: 'pink',

  },

  mail_to: {

    color: 'orange',

  },

  text: {

    color: '#555555',

  },

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  }

})

AppRegistry.registerComponent('MarkdownExample', () => MarkdownExample)

```

## Contributing

This is a work in progress and contributions are welcome!