GitHub - sindresorhus/github-markdown-css: The minimal amount of CSS to replicate the GitHub Markdown style

GitHub

The minimal amount of CSS to replicate the GitHub Markdown style

The CSS is generated. Contributions should go to

this repo

Demo

Install

Download

manually

, from

CDNJS

, or with npm:

npm install github-markdown-cssUsage

Import the github-markdown.css file and add a markdown-body class to the container of your rendered Markdown and set a width for it. GitHub uses 980px width and 45px padding, and 15px padding for mobile.

<metaname="viewport" content="width=device-width, initial-scale=1"><linkrel="stylesheet" href="github-markdown.css"><style> .markdown-body { box-sizing: border-box; min-width:200px; max-width:980px; margin:0 auto; padding:45px; } @media (max-width:767px) { .markdown-body { padding:15px; } } @media (prefers-color-scheme: dark) { body { background-color:#0d1117; } } </style><articleclass="markdown-body"><h1>Unicorns</h1><p>All the things</p></article>You can use

GitHub's /markdown API

to turn Markdown into the HTML that GitHub generates, which works well with the CSS in this repo. Other Markdown parsers will mostly work with these styles too. To mimic how GitHub highlights code, you can use

starry-night

with your Markdown parser of choice.

There are 7 themes provided in this package:

github-markdown.css: (default) Automatically switches between light and dark through

@media (prefers-color-scheme)

github-markdown-light.css: Light-only.

github-markdown-dark.css: Dark-only.

github-markdown-dark-dimmed.css: Dark dimmed.

github-markdown-dark-high-contrast.css: Dark high contrast.

github-markdown-dark-colorblind.css: Dark Protanopia & Deuteranopia.

github-markdown-light-colorblind.css: Light Protanopia & Deuteranopia.

How