The minimal amount of CSS to replicate the GitHub Markdown style

Sindre Sorhus 9981e77689 2.6.0 4 years ago
.editorconfig 8f10b458e8 tweaks 7 years ago
.gitattributes 4c84b3ca10 init 7 years ago
.gitignore 4c84b3ca10 init 7 years ago
bower.json fe4922b3fe extract CSS generation into a separate module 6 years ago
github-markdown.css f7cd505bfa Regenerate GitHub CSS 4 years ago
index.html 029b30908f Close #22 PR: Fix octicons issue & More comprehensive demo page. 5 years ago
license 4c84b3ca10 init 7 years ago
package.json 9981e77689 2.6.0 4 years ago
readme.md b99cdc49a3 change generation command name 5 years ago

readme.md

github-markdown-css

The minimal amount of CSS to replicate the GitHub Markdown style

Demo

Install

Download manually or with npm:

$ npm install --save github-markdown-css

Usage

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.

<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;
	}
</style>
<article class="markdown-body">
	<h1>Unicorns</h1>
	<p>All the things</p>
</article>

How

See generate-github-markdown-css for how it's generated and ability to generate your own.

Dev

Run npm run make to update the CSS.

License

MIT © Sindre Sorhus