React Native Github Markdown

!npm version
!npm download

Generate GitHub Flavored Markdown (with syntax highlight) using React Native WebView.

Screenshot 📱 👇

Features

- Render GitHub Flavored Markdown on your React Native WebView.

- Auto-height WebView adjusted to the document.

- Code syntax highlighting.

- Dark mode!

Install

``shell
npm i react-native-github-markdown
`

or

`shell
yarn add react-native-github-markdown
`

Your React Native configuration should support react-native-webview.

Usage

`jsx
import MarkdownWebView from 'react-native-github-markdown';

style={{marginTop: 10}}
content={'# React Native Github Markdown\n\nHello world!'}
highlight
darkMode
/>;
`

Props

- defaultHeight: default height when the actual height has not been computed.
- content: raw markdown content to render.
- highlight: whether to use highlight.js for syntax highlighting.
- darkMode: whether to set rendered results in dark mode.

---

- WebViewProps: same as react-native-webview's.

Caveats

- I haven't found any working HTML sanitizer for React Native, so you should always treat unknown input source carefully. Do proper sanitization yourself if possible.
- Code syntax highlighting seems odd for long code snippets. It's a problem with highlight.js. You can choose to disable it using the highlight prop.

Behind the Scene

- Markdown generated by marked and use DOMPurify for sanitizing.

- Syntax highlighted by highlight.js.

- CSS from GitHub's Primer and highlight.js`.

- Dark mode applied by darkreader.