Add highlight stream, hljs, style

This commit is contained in:
Tom MacWright 2015-03-30 23:11:59 -04:00
parent 76d4bbb27b
commit 4e2dbe022e
6 changed files with 154 additions and 2 deletions

View File

@ -5,6 +5,7 @@ var documentation = require('../'),
json = require('../streams/output/json.js'),
combine = require('stream-combiner'),
hierarchy = require('../streams/hierarchy.js'),
highlight = require('../streams/highlight.js'),
html = require('../streams/html.js'),
htmlOutput = require('../streams/output/html.js'),
fs = require('fs'),
@ -54,7 +55,7 @@ var formatter = {
md: markdown({
template: argv.mdtemplate
}),
html: combine([html(), hierarchy(), htmlOutput()])
html: combine([html(), highlight(), hierarchy(), htmlOutput()])
}[argv.f];
if (argv.f === 'html' && argv.o === 'stdout') {

View File

@ -27,6 +27,7 @@
"espree": "^1.12.2",
"extend": "^2.0.0",
"handlebars": "^3.0.0",
"highlight.js": "^8.4.0",
"module-deps": "^3.7.3",
"remarkable": "^1.6.0",
"stream-combiner": "^0.2.1",

View File

@ -155,6 +155,8 @@ pre {
margin-top: 0;
margin-bottom: 1rem;
overflow-x: scroll;
padding: 1rem;
background-color: rgba(0,0,0,.03125);
}
hr {

View File

@ -0,0 +1,124 @@
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #333;
background: #f8f8f8;
-webkit-text-size-adjust: none;
}
.hljs-comment,
.diff .hljs-header,
.hljs-javadoc {
color: #998;
font-style: italic;
}
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
color: #333;
font-weight: bold;
}
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
color: #008080;
}
.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.hljs-dartdoc,
.tex .hljs-formula {
color: #d14;
}
.hljs-title,
.hljs-id,
.scss .hljs-preprocessor {
color: #900;
font-weight: bold;
}
.hljs-list .hljs-keyword,
.hljs-subst {
font-weight: normal;
}
.hljs-class .hljs-title,
.hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
color: #458;
font-weight: bold;
}
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
color: #000080;
font-weight: normal;
}
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
color: #008080;
}
.hljs-regexp {
color: #009926;
}
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.clojure .hljs-keyword,
.scheme .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
color: #990073;
}
.hljs-built_in {
color: #0086b3;
}
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
color: #999;
font-weight: bold;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.diff .hljs-change {
background: #0086b3;
}
.hljs-chunk {
color: #aaa;
}

View File

@ -3,6 +3,7 @@
<title>Documentation</title>
<link href='assets/bass.css' type='text/css' rel='stylesheet' />
<link href='assets/style.css' type='text/css' rel='stylesheet' />
<link href='assets/github.css' type='text/css' rel='stylesheet' />
</head>
<body>
<div class='px2'>
@ -41,7 +42,7 @@
{{#if examples}}
<h4>Examples</h4>
{{#each examples}}
<pre>{{.}}</pre>
<pre>{{{.}}}</pre>
{{/each}}
{{/if}}
</div>

23
streams/highlight.js Normal file
View File

@ -0,0 +1,23 @@
'use strict';
var through = require('through'),
hljs = require('highlight.js'),
extend = require('extend');
/**
* Create a transform stream that highlights the contents of the
* `example` tag.
*
* @name highlight
* @return {stream.Transform}
*/
module.exports = function () {
return through(function (comment) {
var highlighted = comment.examples ? {
examples: comment.examples.map(function (example) {
return hljs.highlight('js', example).value;
})
} : {};
this.push(extend({}, comment, highlighted));
});
};