The minimal amount of CSS to replicate the GitHub Markdown style
The CSS is generated. Contributions should go to this repo.
Download manually, from CDNJS, or with npm:
$ npm install github-markdown-css
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.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="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;
}
}
</style>
<article class="markdown-body">
<h1>Unicorns</h1>
<p>All the things</p>
</article>If you want code syntax highlighted, use GitHub Flavored Markdown rendered from GitHub's /markdown API.
There are 3 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.
You may know that now GitHub supports more than 2 themes including dark_dimmed, dark_high_contrast and colorblind variants. If you want to try these themes, you can generate them on your own! See next section.
See generate-github-markdown-css for how it's generated and ability to generate your own.
Run npm run make to update the CSS.