React Native Github Markdown

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

npm i react-native-github-markdown

or

yarn add react-native-github-markdown

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

Usage

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

<MarkdownWebView
  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.