8000 GitHub - MaxMys/cnblogs-markdown-css at 8f10b458e81657169aa963e1666b408a35bf0f23
[go: up one dir, main page]

Skip to content

MaxMys/cnblogs-markdown-css

Repository files navigation

github-markdown-css Build Status

The minimal amount of CSS to replicate the GitHub Markdown style

How

First a rendered Markdown with all possible syntax is fetched from GitHub. Then the GitHub.com CSS is fetched and both are run through UnCSS 7879 , which extracts only the used styles, and then through a custom cleanup.

Install

Download manually or with a package-manager.

$ npm install --save github-markdown-css
$ bower 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 790px width and 30px padding.

<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>
</article>

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.

var githubMarkdownCss = require('github-markdown-css');

githubMarkdownCss(function (err, css) {
	if (err) {
		throw err;
	}

	console.log(css);
	//=> .markdown-body { ...
});

CLI

$ npm install --global github-markdown-css
$ github-markdown-css --help

Usage
  $ github-markdown-css > <filename>

License

MIT © Sindre Sorhus

About

博客园Markdown格式文章的优化CSS

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 100.0%
0