mirror of
https://github.com/sindresorhus/github-markdown-css.git
synced 2024-03-22 13:10:53 +08:00
extract CSS generation into a separate module
https://github.com/sindresorhus/generate-github-markdown-css
This commit is contained in:
Sindre Sorhus
parent
78f4140103
commit
fe4922b3fe
13
.jshintrc
13
.jshintrc
|
|
@ -1,13 +0,0 @@
|
||||||
{
|
|
||||||
"node": true,
|
|
||||||
"esnext": true,
|
|
||||||
"bitwise": true,
|
|
||||||
"camelcase": true,
|
|
||||||
"curly": true,
|
|
||||||
"immed": true,
|
|
||||||
"newcap": true,
|
|
||||||
"noarg": true,
|
|
||||||
"undef": true,
|
|
||||||
"unused": "vars",
|
|
||||||
"strict": true
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
language: node_js
|
|
||||||
node_js:
|
|
||||||
- '0.10'
|
|
||||||
branches:
|
|
||||||
only:
|
|
||||||
- gh-pages
|
|
||||||
|
|
@ -13,13 +13,7 @@
|
||||||
],
|
],
|
||||||
"ignore": [
|
"ignore": [
|
||||||
"**/.*",
|
"**/.*",
|
||||||
"component.json",
|
|
||||||
"package.json",
|
"package.json",
|
||||||
"test.js",
|
"index.html"
|
||||||
"index.js",
|
|
||||||
"cli.js",
|
|
||||||
"index.html",
|
|
||||||
"screenshot.png",
|
|
||||||
"fixture.md"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
33
cli.js
33
cli.js
|
|
@ -1,33 +0,0 @@
|
||||||
#!/usr/bin/env node
|
|
||||||
'use strict';
|
|
||||||
var pkg = require('./package.json');
|
|
||||||
var githubMarkdownCss = require('./');
|
|
||||||
var argv = process.argv.slice(2);
|
|
||||||
|
|
||||||
function help() {
|
|
||||||
console.log([
|
|
||||||
'',
|
|
||||||
' ' + pkg.description,
|
|
||||||
'',
|
|
||||||
' Usage',
|
|
||||||
' github-markdown-css > <filename>'
|
|
||||||
].join('\n'));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (argv.indexOf('--help') !== -1) {
|
|
||||||
help();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (argv.indexOf('--version') !== -1) {
|
|
||||||
console.log(pkg.version);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
githubMarkdownCss(function (err, css) {
|
|
||||||
if (err) {
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(css);
|
|
||||||
});
|
|
||||||
1700
fixture.md
1700
fixture.md
File diff suppressed because it is too large
Load Diff
157
index.js
157
index.js
|
|
@ -1,157 +0,0 @@
|
||||||
'use strict';
|
|
||||||
var got = require('got');
|
|
||||||
var cheerio = require('cheerio');
|
|
||||||
var uncss = require('uncss');
|
|
||||||
|
|
||||||
function getCss(cb) {
|
|
||||||
got('https://github.com', function (err, data) {
|
|
||||||
if (err) {
|
|
||||||
cb(err);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var ret = [];
|
|
||||||
var $ = cheerio.load(data);
|
|
||||||
|
|
||||||
$('link[href*="assets/github"]').each(function (i, el) {
|
|
||||||
ret.push(el.attribs.href);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (ret.length === 0) {
|
|
||||||
cb(new Error('Could not find GitHub stylesheets'));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
cb(null, ret);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function getRenderedFixture(cb) {
|
|
||||||
var url = 'https://github.com/sindresorhus/github-markdown-css/blob/gh-pages/fixture.md';
|
|
||||||
|
|
||||||
got(url, function (err, data) {
|
|
||||||
if (err) {
|
|
||||||
cb(err);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var $ = cheerio.load(data);
|
|
||||||
var html = $('.markdown-body').parent().html();
|
|
||||||
|
|
||||||
cb(null, html);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function cleanupCss(str) {
|
|
||||||
var css = require('css');
|
|
||||||
var style = css.parse(str);
|
|
||||||
var mdBodyProps = [];
|
|
||||||
|
|
||||||
style.stylesheet.rules = style.stylesheet.rules.filter(function (el) {
|
|
||||||
if (el.type === 'keyframes' || el.type === 'comment' || el.type === 'font-face') {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (el.type ==='rule') {
|
|
||||||
if (/::-webkit-validation|:-moz-placeholder|^\.integrations-slide-content|^\.prose-diff|@font-face|^button::|^article$/.test(el.selectors[0])) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// work around GitHub Markdown API inconsistency #10
|
|
||||||
if (el.selectors[0] === '.task-list-item-checkbox') {
|
|
||||||
el.selectors[0] = '.task-list-item input';
|
|
||||||
}
|
|
||||||
|
|
||||||
// remove `body` from `body, input {}`
|
|
||||||
if (el.selectors[0] === 'body' && el.selectors[1] === 'input') {
|
|
||||||
el.selectors.shift();
|
|
||||||
}
|
|
||||||
|
|
||||||
// rename the .octoicons font
|
|
||||||
if (el.selectors[0] === '.octicon') {
|
|
||||||
el.declarations = el.declarations.map(function (el) {
|
|
||||||
if (el.property === 'font') {
|
|
||||||
el.value += '-anchor';
|
|
||||||
}
|
|
||||||
|
|
||||||
return el;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (el.selectors.length === 1 && /^(?:html|body)$/.test(el.selectors[0])) {
|
|
||||||
el.declarations = el.declarations.filter(function (declaration) {
|
|
||||||
// remove everything from body/html other than these
|
|
||||||
if (/^(?:line-height|color)$|text-size-adjust$/.test(declaration.property)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
el.selectors = el.selectors.map(function (selector) {
|
|
||||||
if (/^(?:body|html)$/.test(selector)) {
|
|
||||||
selector = '.markdown-body';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!/\.markdown-body/.test(selector)) {
|
|
||||||
selector = '.markdown-body ' + selector;
|
|
||||||
}
|
|
||||||
|
|
||||||
return selector;
|
|
||||||
});
|
|
||||||
|
|
||||||
// collect `.markdown-body` rules
|
|
||||||
if (el.selectors.length === 1 && el.selectors[0] === '.markdown-body') {
|
|
||||||
[].push.apply(mdBodyProps, el.declarations);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (el.declarations.length === 0) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
|
|
||||||
// merge `.markdown-body` rules
|
|
||||||
style.stylesheet.rules.unshift({
|
|
||||||
type: 'rule',
|
|
||||||
selectors: ['.markdown-body'],
|
|
||||||
declarations: mdBodyProps
|
|
||||||
});
|
|
||||||
|
|
||||||
var ret = css.stringify(style);
|
|
||||||
|
|
||||||
ret = '@font-face {\n font-family: octicons-anchor;\n src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAYcAA0AAAAACjQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABwAAAAca8vGTk9TLzIAAAFMAAAARAAAAFZG1VHVY21hcAAAAZAAAAA+AAABQgAP9AdjdnQgAAAB0AAAAAQAAAAEACICiGdhc3AAAAHUAAAACAAAAAj//wADZ2x5ZgAAAdwAAADRAAABEKyikaNoZWFkAAACsAAAAC0AAAA2AtXoA2hoZWEAAALgAAAAHAAAACQHngNFaG10eAAAAvwAAAAQAAAAEAwAACJsb2NhAAADDAAAAAoAAAAKALIAVG1heHAAAAMYAAAAHwAAACABEAB2bmFtZQAAAzgAAALBAAAFu3I9x/Nwb3N0AAAF/AAAAB0AAAAvaoFvbwAAAAEAAAAAzBdyYwAAAADP2IQvAAAAAM/bz7t4nGNgZGFgnMDAysDB1Ml0hoGBoR9CM75mMGLkYGBgYmBlZsAKAtJcUxgcPsR8iGF2+O/AEMPsznAYKMwIkgMA5REMOXicY2BgYGaAYBkGRgYQsAHyGMF8FgYFIM0ChED+h5j//yEk/3KoSgZGNgYYk4GRCUgwMaACRoZhDwCs7QgGAAAAIgKIAAAAAf//AAJ4nHWMMQrCQBBF/0zWrCCIKUQsTDCL2EXMohYGSSmorScInsRGL2DOYJe0Ntp7BK+gJ1BxF1stZvjz/v8DRghQzEc4kIgKwiAppcA9LtzKLSkdNhKFY3HF4lK69ExKslx7Xa+vPRVS43G98vG1DnkDMIBUgFN0MDXflU8tbaZOUkXUH0+U27RoRpOIyCKjbMCVejwypzJJG4jIwb43rfl6wbwanocrJm9XFYfskuVC5K/TPyczNU7b84CXcbxks1Un6H6tLH9vf2LRnn8Ax7A5WQAAAHicY2BkYGAA4teL1+yI57f5ysDNwgAC529f0kOmWRiYVgEpDgYmEA8AUzEKsQAAAHicY2BkYGB2+O/AEMPCAAJAkpEBFbAAADgKAe0EAAAiAAAAAAQAAAAEAAAAAAAAKgAqACoAiAAAeJxjYGRgYGBhsGFgYgABEMkFhAwM/xn0QAIAD6YBhwB4nI1Ty07cMBS9QwKlQapQW3VXySvEqDCZGbGaHULiIQ1FKgjWMxknMfLEke2A+IJu+wntrt/QbVf9gG75jK577Lg8K1qQPCfnnnt8fX1NRC/pmjrk/zprC+8D7tBy9DHgBXoWfQ44Av8t4Bj4Z8CLtBL9CniJluPXASf0Lm4CXqFX8Q84dOLnMB17N4c7tBo1AS/Qi+hTwBH4rwHHwN8DXqQ30XXAS7QaLwSc0Gn8NuAVWou/gFmnjLrEaEh9GmDdDGgL3B4JsrRPDU2hTOiMSuJUIdKQQayiAth69r6akSSFqIJuA19TrzCIaY8sIoxyrNIrL//pw7A2iMygkX5vDj+G+kuoLdX4GlGK/8Lnlz6/h9MpmoO9rafrz7ILXEHHaAx95s9lsI7AHNMBWEZHULnfAXwG9/ZqdzLI08iuwRloXE8kfhXYAvE23+23DU3t626rbs8/8adv+9DWknsHp3E17oCf+Z48rvEQNZ78paYM38qfk3v/u3l3u3GXN2Dmvmvpf1Srwk3pB/VSsp512bA/GG5i2WJ7wu430yQ5K3nFGiOqgtmSB5pJVSizwaacmUZzZhXLlZTq8qGGFY2YcSkqbth6aW1tRmlaCFs2016m5qn36SbJrqosG4uMV4aP2PHBmB3tjtmgN2izkGQyLWprekbIntJFing32a5rKWCN/SdSoga45EJykyQ7asZvHQ8PTm6cslIpwyeyjbVltNikc2HTR7YKh9LBl9DADC0U/jLcBZDKrMhUBfQBvXRzLtFtjU9eNHKin0x5InTqb8lNpfKv1s1xHzTXRqgKzek/mb7nB8RZTCDhGEX3kK/8Q75AmUM/eLkfA+0Hi908Kx4eNsMgudg5GLdRD7a84npi+YxNr5i5KIbW5izXas7cHXIMAau1OueZhfj+cOcP3P8MNIWLyYOBuxL6DRylJ4cAAAB4nGNgYoAALjDJyIAOWMCiTIxMLDmZedkABtIBygAAAA==) format(\'woff\');\n}\n\n' + ret;
|
|
||||||
|
|
||||||
return ret;
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = function (cb) {
|
|
||||||
getRenderedFixture(function (err, html) {
|
|
||||||
if (err) {
|
|
||||||
cb(err);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
getCss(function (err, stylesheets) {
|
|
||||||
if (err) {
|
|
||||||
cb(err);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
uncss(html, {
|
|
||||||
stylesheets: stylesheets,
|
|
||||||
ignore: [/^\.highlight/]
|
|
||||||
}, function (err, css) {
|
|
||||||
if (err) {
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
|
|
||||||
cb(null, cleanupCss(css));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
26
package.json
26
package.json
|
|
@ -9,31 +9,17 @@
|
||||||
"email": "sindresorhus@gmail.com",
|
"email": "sindresorhus@gmail.com",
|
||||||
"url": "http://sindresorhus.com"
|
"url": "http://sindresorhus.com"
|
||||||
},
|
},
|
||||||
"bin": {
|
|
||||||
"github-markdown-css": "cli.js"
|
|
||||||
},
|
|
||||||
"contributors": [
|
|
||||||
{
|
|
||||||
"name": "Benjamin Tan",
|
|
||||||
"email": "demoneaux@gmail.com",
|
|
||||||
"url": "http://d10.github.io/"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "mocha",
|
"generate": "github-markdown-css !> github-markdown-css"
|
||||||
"generate": "node cli.js !> github-markdown.css"
|
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"index.js",
|
|
||||||
"cli.js",
|
|
||||||
"github-markdown.css"
|
"github-markdown.css"
|
||||||
],
|
],
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"cli",
|
"browser",
|
||||||
"bin",
|
|
||||||
"github",
|
"github",
|
||||||
"markdown",
|
"markdown",
|
||||||
"md",
|
"md",
|
||||||
|
|
@ -41,13 +27,7 @@
|
||||||
"style",
|
"style",
|
||||||
"stylesheet"
|
"stylesheet"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
|
||||||
"cheerio": "^0.18.0",
|
|
||||||
"css": "^2.0.0",
|
|
||||||
"got": "^1.0.0",
|
|
||||||
"uncss": "^0.9.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"mocha": "*"
|
"generate-github-markdown-css": "^1.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
39
readme.md
39
readme.md
|
|
@ -1,17 +1,12 @@
|
||||||
# github-markdown-css [](https://travis-ci.org/sindresorhus/github-markdown-css)
|
# github-markdown-css
|
||||||
|
|
||||||
> The minimal amount of CSS to replicate the GitHub Markdown style
|
> The minimal amount of CSS to replicate the GitHub Markdown style
|
||||||
|
|
||||||
[<img src="screenshot.png" width="400">](http://sindresorhus.com/github-markdown-css)
|
[<img src="https://cloud.githubusercontent.com/assets/170270/5218365/8932b220-767e-11e4-854e-d5878f5c6d87.png" width="400">](http://sindresorhus.com/github-markdown-css)
|
||||||
|
|
||||||
## [Demo](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
|
## Install
|
||||||
|
|
||||||
Download [manually](https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css) or with a package-manager.
|
Download [manually](https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css) or with a package-manager.
|
||||||
|
|
@ -46,36 +41,14 @@ Import the `github-markdown.css` file and add a `markdown-body` class to the con
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## Programmatic usage
|
## How
|
||||||
|
|
||||||
I will try to keep it up to date, but you're free to fetch the CSS yourself either through the API or CLI.
|
See [`generate-github-markdown-css`](https://github.com/sindresorhus/generate-github-markdown-css) for how it's generated and ability to generate your own.
|
||||||
|
|
||||||
```js
|
|
||||||
var githubMarkdownCss = require('github-markdown-css');
|
|
||||||
|
|
||||||
githubMarkdownCss(function (err, css) {
|
|
||||||
if (err) {
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(css);
|
|
||||||
//=> .markdown-body { ...
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## CLI
|
## Dev
|
||||||
|
|
||||||
```sh
|
Run `npm run generate` to update the CSS.
|
||||||
$ npm install --global github-markdown-css
|
|
||||||
```
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ github-markdown-css --help
|
|
||||||
|
|
||||||
Usage
|
|
||||||
$ github-markdown-css > <filename>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
|
||||||
BIN
screenshot.png
BIN
screenshot.png
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB |
13
test.js
13
test.js
|
|
@ -1,13 +0,0 @@
|
||||||
'use strict';
|
|
||||||
var assert = require('assert');
|
|
||||||
var githubMarkdownCss = require('./');
|
|
||||||
|
|
||||||
it('should get the GitHub Markdown CSS', function (cb) {
|
|
||||||
this.timeout(20000);
|
|
||||||
|
|
||||||
githubMarkdownCss(function (err, css) {
|
|
||||||
assert(!err, err);
|
|
||||||
assert(/markdown-body/.test(css));
|
|
||||||
cb();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue
Block a user