github-markdown-css/readme.md
2014-05-07 23:00:37 +02:00

88 lines
1.9 KiB
Markdown

# github-markdown-css [![Build Status](https://travis-ci.org/sindresorhus/github-markdown-css.svg?branch=gh-pages)](https://travis-ci.org/sindresorhus/github-markdown-css)
> The minimal amount of CSS to replicate the GitHub Markdown style
[<img src="screenshot.png" width="400">](http://sindresorhus.com/github-markdown-css)
## [Demo](http://sindresorhus.com/github-markdown-css)
## How
First a [rendered Markdown](fixture.md) with all possible syntax is fetched from GitHub. Then the GitHub.com CSS is fetched and both are run through [UnCSS](https://github.com/giakki/uncss), which extracts only the used styles, and then through a custom cleanup.
## Install
Download [manually](https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css) or with a package-manager.
```sh
$ npm install --save github-markdown-css
```
```sh
$ bower install --save github-markdown-css
```
```sh
$ component install sindresorhus/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 `790px` width and `30px` padding.
```html
<link rel="stylesheet" href="github-markdown.css">
<style>
.markdown-body {
min-width: 200px;
max-width: 790px;
margin: 0 auto;
padding: 30px;
}
</style>
<article class="markdown-body">
<h1>Unicorns</h1>
<p>All the things</p>
</div>
```
## Programmatic usage
I will try to keep it up to date, but you're free to fetch the CSS yourself either through the API or CLI.
```js
var githubMarkdownCss = require('github-markdown-css');
githubMarkdownCss(function (err, css) {
if (err) {
throw err;
}
console.log(css);
//=> article { display: block; } ...
});
```
## CLI
```sh
$ npm install --global github-markdown-css
```
```sh
$ github-markdown-css --help
Usage
$ github-markdown-css > <filename>
```
## License
MIT © [Sindre Sorhus](http://sindresorhus.com)