2014-11-27 22:54:24 +08:00
# github-markdown-css
2014-05-08 02:02:46 +08:00
> The minimal amount of CSS to replicate the GitHub Markdown style
2014-11-27 23:20:18 +08:00
[<img src="https://cloud.githubusercontent.com/assets/170270/5219062/f22a978c-7685-11e4-8316-af25b6c89bc0.png" width="300"> ](http://sindresorhus.com/github-markdown-css )
2014-05-08 02:02:46 +08:00
## [Demo](http://sindresorhus.com/github-markdown-css)
## Install
2017-08-18 10:17:17 +08:00
Download [manually ](https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css ), from [CDNJS ](https://cdnjs.com/libraries/github-markdown-css ), or with npm:
2014-05-08 02:02:46 +08:00
```
2017-10-15 14:55:26 +08:00
$ npm install github-markdown-css
2014-05-08 02:02:46 +08:00
```
## Usage
2017-06-15 18:43:33 +08:00
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.
2014-05-08 02:02:46 +08:00
```html
2017-06-15 18:43:33 +08:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2014-05-08 02:02:46 +08:00
< link rel = "stylesheet" href = "github-markdown.css" >
< style >
.markdown-body {
2015-12-07 02:56:04 +08:00
box-sizing: border-box;
2014-05-08 03:17:18 +08:00
min-width: 200px;
2015-12-07 02:56:04 +08:00
max-width: 980px;
2014-05-08 03:17:18 +08:00
margin: 0 auto;
2015-12-07 02:56:04 +08:00
padding: 45px;
2014-05-08 02:02:46 +08:00
}
2017-06-15 18:45:30 +08:00
2017-06-15 18:43:33 +08:00
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
2014-05-08 02:02:46 +08:00
< / style >
< article class = "markdown-body" >
< h1 > Unicorns< / h1 >
< p > All the things< / p >
2014-07-30 15:19:12 +08:00
< / article >
2014-05-08 02:02:46 +08:00
```
2014-11-27 22:54:24 +08:00
## How
2014-05-08 02:02:46 +08:00
2014-11-27 22:54:24 +08:00
See [`generate-github-markdown-css` ](https://github.com/sindresorhus/generate-github-markdown-css ) for how it's generated and ability to generate your own.
2014-05-08 02:02:46 +08:00
2014-11-27 22:54:24 +08:00
## Dev
2014-05-08 02:02:46 +08:00
2016-01-23 20:15:24 +08:00
Run `npm run make` to update the CSS.
2014-05-08 02:02:46 +08:00
## License
2017-10-15 14:55:26 +08:00
MIT © [Sindre Sorhus ](https://sindresorhus.com )