react-markdown-github-renderers

A set of react-markdown renderers that implement the visual appearance of GitHub's Markdown renderers. It uses highlight to provide syntax highlighting for supported every language.

Support Me

If you're using Robin Frischmann's work, please consider supporting his Open Source Projects on Patreon.

Installation

# yarn
yarn add react-markdown-github-renderers

# npm
npm i --save react-markdown-github-renderers

Caveats

In order to make the renderers work without any additional setup, this package imports the full highlight library in order to highlight code syntax. It also includes some CSS snippets for every code, blockquote, link and list rendered in order to enable special styles without including a CSS in JS library or third-party CSS file.

Note: We might change that behaviour soon. The first release was only to make it work.

Example

# Hello Word

## Heading 2
### Heading 3

> **Warning**: Blockquotes work as well

* List Item 1
* List Item 2
  * List Item 2.1
  * List Item 2.2
* List Item 3

[Readme](README.md)

Even `code`:

```javascript
function greet(name) {
  console.log("Hello " + name)
}

import { Markdown } from 'react-markdown'
import * as renderers from 'react-github-markdown-renderers'

const markdown = /* consider the above markdown */

ReactDOM.render(
  <Markdown source={markdown} />, 
  document.body
)

License

react-markdown-github-renderers is licensed under the MIT License. Documentation is licensed under Creative Common License. Created with ♥ by @rofrischmann.