haru 4869cfc433
Fix "Fork me on Github" image (#83)
Co-authored-by: Sindre Sorhus <sindresorhus@gmail.com>
2021-08-08 11:55:05 +02:00
2017-10-15 13:55:26 +07:00
2019-01-31 23:39:10 +07:00
2017-10-15 13:55:26 +07:00
2017-10-15 13:55:26 +07:00
2020-02-22 18:16:26 +07:00
2021-08-08 11:55:05 +02:00
2020-02-22 18:16:26 +07:00
2020-02-22 18:41:22 +07:00
2020-10-20 14:24:11 +02:00

github-markdown-css

The minimal amount of CSS to replicate the GitHub Markdown style

Demo

Install

Download manually, from CDNJS, or with npm:

$ npm install 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, 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.

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.

Description
The minimal amount of CSS to replicate the GitHub Markdown style
Readme 651 KiB
Languages
CSS 53.1%
HTML 46.9%