tradle/rn-markdown

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

rn-markdown

Markdown rendering component, using the parser from marked.

play with the react-native-web version

Install

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.

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 (
    <TouchableHighlight onPress={() => Alert.alert('check out this hot href', href)}>
      <View>
        {props.children}
      </View>
    </TouchableHighlight>
  )
}

// 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 (
      <Markdown contentContainerStyle={styles.container} markdownStyles={markdownStyles} passThroughProps={{ passMeThrough: 'to the child renderer components' }}>
        {text}
      </Markdown>
    )
  }
}

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!

rn-markdown's Issues

rn-web play example links not working

Hi there, I just tried the play example and the links don't seem active in the browser (I used Chrome).

Marked options

I was trying to use the parser from this project, but it seems to me that options like breaks: true, gem: true and smartypants; true aren’t supported.

react-native-web

How to make it work with react-native-web? Any example would be nice.

I tried the package but i always get this Error:

./node_modules/rn-markdown/markdown.js
SyntaxError: .../node_modules/rn-markdown/markdown.js: Unexpected token (116:6)

  114 | 
  115 |     return (
> 116 |       <El {...elProps}>
      |       ^
  117 |         {contents}
  118 |       </El>
  119 |     )

Whitespace is not a valid Property

whitespace is not valid property - list.js /styles line Number 35

Release parser as own module

Thanks a lot for the great work. I moved away from react-native-simple-markdown because of the shitty parser, that creates all kind of weird errors. But I prefer to just implement my own renderer as I have a very custom setup and there is more overhead in understanding another renderer than just writing a completely custom one.

On the search for a decent markdown parser that outputs an AST, I was surprised to not find anything until I stumbled on your package. I’m just importing the parser from here now, but it would probably be better to have a separate module for this great parser. Would also be nice if there was an option to turn off the parent links, as they prevent calling JSON.stringify on the parser output.

Issue with defaults for inline styles

With the current configuration every style used (e.g. bold, or Links) is rendered on a newline before and after that style.

It's already visible on https://tradle.github.io/rn-markdown-playground/.

Example Markdown:

Please see the following [link](https://www.google.com).

It is usually rendered like here on GH:

Please see the following link.

While using rn-markdown it renders like this:

Please see the following
link
.

This seems to be a bit off the default markdown style, doesn't it? I am wondering if this is coming from your component or marked..

how can support table?

how can support table?