react-github-readme-md

Render the README.md file of a GitHub Repository in React

Storybook Demo

Features

• Render any Markdown file with GitHub styling
• Supports both light and dark modes
• Marked plugins add support for fuzzy links, heading anchors, and GFM alerts
• Works on both the client and server

Install

Using NPM:

$ npm install react-github-readme-md

Usage

import { GitHubReadme } from "react-github-readme-md";

// ...

<GitHubReadme username="lacymorrow" repo="react-github-readme-md" />

// or 
// <GitHubReadme src="path/to/my/file.md />

Notes

.markdown-body class has width: 100% by default to prevent <pre> elements from overflowing its container. You can override this by passing a className prop or setting the width in your own CSS.

API

props.username

The GitHub username.

Required (if src is not provided) Type: string

props.repo

The specified GitHub repository where the README.md is located.

Required (if src is not provided) Type: string

props.src

A path to a Markdown file. This can be a local path or a URL.

Required (if username and repo are not provided) Type: string

props.addHeadingIds

Uses marked-gfm-heading-id to add id attributes to headings in the markdown so that # Heading becomes `

Heading

and anchor links work.

optional
Type: boolean default: true

props.linkify

Uses marked-linkify-it to parse fuzzy links in the markdown like google.com and turn them into links.

optional
Type: boolean default: false

Plugins

Fuzzy Links

See the marked-linkify-it package for more information.

Heading Anchors

See the marked-gfm-heading-id package for more information.

GFM Alerts

You may need Tailwind CSS installed for the alerts to display correctly. See the marked-alerts package for more information.

Credit

Thanks to Sindresorhus for his generate-github-markdown-css repo, used to generate the styles!

Also

• marked
• marked-gfm-heading-id
• marked-linkify-it

License

MIT © Lacy Morrow