https://github.com/robertying/react-native-github-markdown

Generate GitHub Flavored Markdown (with syntax highlight) using React Native WebView
https://github.com/robertying/react-native-github-markdown

github highlighting markdown react react-native webview

Last synced: 17 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/robertying/react-native-github-markdown
• Owner: robertying
• License: mit
• Archived: true
• Created: 2019-01-12T14:42:37.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-10-15T16:53:59.000Z (over 4 years ago)
• Last Synced: 2024-09-21T13:04:48.911Z (5 months ago)
• Topics: github, highlighting, markdown, react, react-native, webview
• Language: TypeScript
• Homepage:
• Size: 1.4 MB
• Stars: 11
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Native Github Markdown

![npm version](https://img.shields.io/npm/v/react-native-github-markdown)

![npm download](https://img.shields.io/npm/dm/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

```shell

npm i react-native-github-markdown

```

or

```shell

yarn add react-native-github-markdown

```

Your React Native configuration should [support](https://github.com/react-native-community/react-native-webview#platforms-supported) [`react-native-webview`](https://github.com/react-native-community/react-native-webview).

## Usage

```jsx

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

;

```

## 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](https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md).

## 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](https://github.com/markedjs/marked) and use [DOMPurify](https://github.com/cure53/DOMPurify) for sanitizing.

- Syntax highlighted by [highlight.js](https://github.com/highlightjs/highlight.js).

- CSS from GitHub's [Primer](https://github.com/primer/css) and `highlight.js`.

- Dark mode applied by [darkreader](https://github.com/darkreader/darkreader).