Commit aeba2ad5 authored by Robert Ricci's avatar Robert Ricci

First cut of highlighting code samples

Defines a new style that you *must* include in the @title() element of a
page that causes the right javascript and CSS to get loaded

Uses a version of highlight.js that has been slightly hacked to:

1) Look for .code-sample instead of "pre code" to find code to highlight
2) Auto-initialize itself at the end

Bug: Need to figure out how to *add on to* not override the default
style
parent c5a52a63
......@@ -2,7 +2,7 @@
@(require racket/date)
@(require "defs.rkt")
@title[#:version apt-version
@title[#:version apt-version #:style main-style
#:date (date->string (current-date))]{The CloudLab Manual}
@author[
......
......@@ -3,6 +3,7 @@
(require scribble/core)
(require scribble/decode)
(require scribble/manual)
(require scribble/private/defaults)
(require scribble/html-properties)
(require scribble/latex-properties)
(require racket/class)
......@@ -14,6 +15,11 @@
(provide (all-defined-out))
(define main-style
(make-style "main"
(list (js-style-addition "highlight.pack.js")
(make-css-addition "highlight-default.css"))))
; Check to see if we are building Apt or CloudLab documentation
(define tb-mode
(if (vector-member "clab" (current-command-line-arguments))
......
......@@ -2,7 +2,7 @@
@(require "defs.rkt")
@title[#:tag "geni-lib" #:version apt-version]{Describing a profile with python and @tt{geni-lib}}
@title[#:tag "geni-lib" #:style main-style #:version apt-version]{Describing a profile with python and @tt{geni-lib}}
@tt{geni-lib} is a tool that allows users to generate @seclink["rspecs"]{RSpec} files from Python
code. @(tb) offers the ability to use @tt{geni-lib}
......
/*
Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #f0f0f0;
-webkit-text-size-adjust: none;
}
.hljs,
.hljs-subst,
.hljs-tag .hljs-title,
.nginx .hljs-title {
color: black;
}
.hljs-string,
.hljs-title,
.hljs-constant,
.hljs-parent,
.hljs-tag .hljs-value,
.hljs-rule .hljs-value,
.hljs-preprocessor,
.hljs-pragma,
.hljs-name,
.haml .hljs-symbol,
.ruby .hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.hljs-template_tag,
.django .hljs-variable,
.smalltalk .hljs-class,
.hljs-addition,
.hljs-flow,
.hljs-stream,
.bash .hljs-variable,
.pf .hljs-variable,
.apache .hljs-tag,
.apache .hljs-cbracket,
.tex .hljs-command,
.tex .hljs-special,
.erlang_repl .hljs-function_or_atom,
.asciidoc .hljs-header,
.markdown .hljs-header,
.coffeescript .hljs-attribute,
.tp .hljs-variable {
color: #800;
}
.smartquote,
.hljs-comment,
.hljs-annotation,
.diff .hljs-header,
.hljs-chunk,
.asciidoc .hljs-blockquote,
.markdown .hljs-blockquote {
color: #888;
}
.hljs-number,
.hljs-date,
.hljs-regexp,
.hljs-literal,
.hljs-hexcolor,
.smalltalk .hljs-symbol,
.smalltalk .hljs-char,
.go .hljs-constant,
.hljs-change,
.lasso .hljs-variable,
.makefile .hljs-variable,
.asciidoc .hljs-bullet,
.markdown .hljs-bullet,
.asciidoc .hljs-link_url,
.markdown .hljs-link_url {
color: #080;
}
.hljs-label,
.ruby .hljs-string,
.hljs-decorator,
.hljs-filter .hljs-argument,
.hljs-localvars,
.hljs-array,
.hljs-attr_selector,
.hljs-important,
.hljs-pseudo,
.hljs-pi,
.haml .hljs-bullet,
.hljs-doctype,
.hljs-deletion,
.hljs-envvar,
.hljs-shebang,
.apache .hljs-sqbracket,
.nginx .hljs-built_in,
.tex .hljs-formula,
.erlang_repl .hljs-reserved,
.hljs-prompt,
.asciidoc .hljs-link_label,
.markdown .hljs-link_label,
.vhdl .hljs-attribute,
.clojure .hljs-attribute,
.asciidoc .hljs-attribute,
.lasso .hljs-attribute,
.coffeescript .hljs-property,
.hljs-phony {
color: #88f;
}
.hljs-keyword,
.hljs-id,
.hljs-title,
.hljs-built_in,
.css .hljs-tag,
.hljs-doctag,
.smalltalk .hljs-class,
.hljs-winutils,
.bash .hljs-variable,
.pf .hljs-variable,
.apache .hljs-tag,
.hljs-type,
.hljs-typename,
.tex .hljs-command,
.asciidoc .hljs-strong,
.markdown .hljs-strong,
.hljs-request,
.hljs-status,
.tp .hljs-data,
.tp .hljs-io {
font-weight: bold;
}
.asciidoc .hljs-emphasis,
.markdown .hljs-emphasis,
.tp .hljs-units {
font-style: italic;
}
.nginx .hljs-built_in {
font-weight: normal;
}
.coffeescript .javascript,
.javascript .xml,
.lasso .markup,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
opacity: 0.5;
}
/*! highlight.js v8.9.1 | BSD3 License | git.io/hljslicense */
(function(factory) {
// Setup highlight.js for different environments. First is Node.js or
// CommonJS.
if(typeof exports !== 'undefined') {
factory(exports);
} else {
// Export hljs globally even when using AMD for cases when this script
// is loaded with others that may still expect a global hljs.
window.hljs = factory({});
// Finally register the global hljs with AMD.
if(typeof define === 'function' && define.amd) {
define('hljs', [], function() {
return window.hljs;
});
}
}
}(function(hljs) {
/* Utility functions */
function escape(value) {
return value.replace(/&/gm, '&amp;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;');
}
function tag(node) {
return node.nodeName.toLowerCase();
}
function testRe(re, lexeme) {
var match = re && re.exec(lexeme);
return match && match.index == 0;
}
function isNotHighlighted(language) {
return (/^(no-?highlight|plain|text)$/i).test(language);
}
function blockLanguage(block) {
var i, match, length,
classes = block.className + ' ';
classes += block.parentNode ? block.parentNode.className : '';
// language-* takes precedence over non-prefixed class names
match = (/\blang(?:uage)?-([\w-]+)\b/i).exec(classes);
if (match) {
return getLanguage(match[1]) ? match[1] : 'no-highlight';
}
classes = classes.split(/\s+/);
for (i = 0, length = classes.length; i < length; i++) {
if (getLanguage(classes[i]) || isNotHighlighted(classes[i])) {
return classes[i];
}
}
}
function inherit(parent, obj) {
var result = {}, key;
for (key in parent)
result[key] = parent[key];
if (obj)
for (key in obj)
result[key] = obj[key];
return result;
}
/* Stream merging */
function nodeStream(node) {
var result = [];
(function _nodeStream(node, offset) {
for (var child = node.firstChild; child; child = child.nextSibling) {
if (child.nodeType == 3)
offset += child.nodeValue.length;
else if (child.nodeType == 1) {
result.push({
event: 'start',
offset: offset,
node: child
});
offset = _nodeStream(child, offset);
// Prevent void elements from having an end tag that would actually
// double them in the output. There are more void elements in HTML
// but we list only those realistically expected in code display.
if (!tag(child).match(/br|hr|img|input/)) {
result.push({
event: 'stop',
offset: offset,
node: child
});
}
}
}
return offset;
})(node, 0);
return result;
}
function mergeStreams(original, highlighted, value) {
var processed = 0;
var result = '';
var nodeStack = [];
function selectStream() {
if (!original.length || !highlighted.length) {
return original.length ? original : highlighted;
}
if (original[0].offset != highlighted[0].offset) {
return (original[0].offset < highlighted[0].offset) ? original : highlighted;
}
/*
To avoid starting the stream just before it should stop the order is
ensured that original always starts first and closes last:
if (event1 == 'start' && event2 == 'start')
return original;
if (event1 == 'start' && event2 == 'stop')
return highlighted;
if (event1 == 'stop' && event2 == 'start')
return original;
if (event1 == 'stop' && event2 == 'stop')
return highlighted;
... which is collapsed to:
*/
return highlighted[0].event == 'start' ? original : highlighted;
}
function open(node) {
function attr_str(a) {return ' ' + a.nodeName + '="' + escape(a.value) + '"';}
result += '<' + tag(node) + Array.prototype.map.call(node.attributes, attr_str).join('') + '>';
}
function close(node) {
result += '</' + tag(node) + '>';
}
function render(event) {
(event.event == 'start' ? open : close)(event.node);
}
while (original.length || highlighted.length) {
var stream = selectStream();
result += escape(value.substr(processed, stream[0].offset - processed));
processed = stream[0].offset;
if (stream == original) {
/*
On any opening or closing tag of the original markup we first close
the entire highlighted node stack, then render the original tag along
with all the following original tags at the same offset and then
reopen all the tags on the highlighted stack.
*/
nodeStack.reverse().forEach(close);
do {
render(stream.splice(0, 1)[0]);
stream = selectStream();
} while (stream == original && stream.length && stream[0].offset == processed);
nodeStack.reverse().forEach(open);
} else {
if (stream[0].event == 'start') {
nodeStack.push(stream[0].node);
} else {
nodeStack.pop();
}
render(stream.splice(0, 1)[0]);
}
}
return result + escape(value.substr(processed));
}
/* Initialization */
function compileLanguage(language) {
function reStr(re) {
return (re && re.source) || re;
}
function langRe(value, global) {
return new RegExp(
reStr(value),
'm' + (language.case_insensitive ? 'i' : '') + (global ? 'g' : '')
);
}
function compileMode(mode, parent) {
if (mode.compiled)
return;
mode.compiled = true;
mode.keywords = mode.keywords || mode.beginKeywords;
if (mode.keywords) {
var compiled_keywords = {};
var flatten = function(className, str) {
if (language.case_insensitive) {
str = str.toLowerCase();
}
str.split(' ').forEach(function(kw) {
var pair = kw.split('|');
compiled_keywords[pair[0]] = [className, pair[1] ? Number(pair[1]) : 1];
});
};
if (typeof mode.keywords == 'string') { // string
flatten('keyword', mode.keywords);
} else {
Object.keys(mode.keywords).forEach(function (className) {
flatten(className, mode.keywords[className]);
});
}
mode.keywords = compiled_keywords;
}
mode.lexemesRe = langRe(mode.lexemes || /\b\w+\b/, true);
if (parent) {
if (mode.beginKeywords) {
mode.begin = '\\b(' + mode.beginKeywords.split(' ').join('|') + ')\\b';
}
if (!mode.begin)
mode.begin = /\B|\b/;
mode.beginRe = langRe(mode.begin);
if (!mode.end && !mode.endsWithParent)
mode.end = /\B|\b/;
if (mode.end)
mode.endRe = langRe(mode.end);
mode.terminator_end = reStr(mode.end) || '';
if (mode.endsWithParent && parent.terminator_end)
mode.terminator_end += (mode.end ? '|' : '') + parent.terminator_end;
}
if (mode.illegal)
mode.illegalRe = langRe(mode.illegal);
if (mode.relevance === undefined)
mode.relevance = 1;
if (!mode.contains) {
mode.contains = [];
}
var expanded_contains = [];
mode.contains.forEach(function(c) {
if (c.variants) {
c.variants.forEach(function(v) {expanded_contains.push(inherit(c, v));});
} else {
expanded_contains.push(c == 'self' ? mode : c);
}
});
mode.contains = expanded_contains;
mode.contains.forEach(function(c) {compileMode(c, mode);});
if (mode.starts) {
compileMode(mode.starts, parent);
}
var terminators =
mode.contains.map(function(c) {
return c.beginKeywords ? '\\.?(' + c.begin + ')\\.?' : c.begin;
})
.concat([mode.terminator_end, mode.illegal])
.map(reStr)
.filter(Boolean);
mode.terminators = terminators.length ? langRe(terminators.join('|'), true) : {exec: function(/*s*/) {return null;}};
}
compileMode(language);
}
/*
Core highlighting function. Accepts a language name, or an alias, and a
string with the code to highlight. Returns an object with the following
properties:
- relevance (int)
- value (an HTML string with highlighting markup)
*/
function highlight(name, value, ignore_illegals, continuation) {
function subMode(lexeme, mode) {
for (var i = 0; i < mode.contains.length; i++) {
if (testRe(mode.contains[i].beginRe, lexeme)) {
return mode.contains[i];
}
}
}
function endOfMode(mode, lexeme) {
if (testRe(mode.endRe, lexeme)) {
while (mode.endsParent && mode.parent) {
mode = mode.parent;
}
return mode;
}
if (mode.endsWithParent) {
return endOfMode(mode.parent, lexeme);
}
}
function isIllegal(lexeme, mode) {
return !ignore_illegals && testRe(mode.illegalRe, lexeme);
}
function keywordMatch(mode, match) {
var match_str = language.case_insensitive ? match[0].toLowerCase() : match[0];
return mode.keywords.hasOwnProperty(match_str) && mode.keywords[match_str];
}
function buildSpan(classname, insideSpan, leaveOpen, noPrefix) {
var classPrefix = noPrefix ? '' : options.classPrefix,
openSpan = '<span class="' + classPrefix,
closeSpan = leaveOpen ? '' : '</span>';
openSpan += classname + '">';
return openSpan + insideSpan + closeSpan;
}
function processKeywords() {
if (!top.keywords)
return escape(mode_buffer);
var result = '';
var last_index = 0;
top.lexemesRe.lastIndex = 0;
var match = top.lexemesRe.exec(mode_buffer);
while (match) {
result += escape(mode_buffer.substr(last_index, match.index - last_index));
var keyword_match = keywordMatch(top, match);
if (keyword_match) {
relevance += keyword_match[1];
result += buildSpan(keyword_match[0], escape(match[0]));
} else {
result += escape(match[0]);
}
last_index = top.lexemesRe.lastIndex;
match = top.lexemesRe.exec(mode_buffer);
}
return result + escape(mode_buffer.substr(last_index));
}
function processSubLanguage() {
var explicit = typeof top.subLanguage == 'string';
if (explicit && !languages[top.subLanguage]) {
return escape(mode_buffer);
}
var result = explicit ?
highlight(top.subLanguage, mode_buffer, true, continuations[top.subLanguage]) :
highlightAuto(mode_buffer, top.subLanguage.length ? top.subLanguage : undefined);
// Counting embedded language score towards the host language may be disabled
// with zeroing the containing mode relevance. Usecase in point is Markdown that
// allows XML everywhere and makes every XML snippet to have a much larger Markdown
// score.
if (top.relevance > 0) {
relevance += result.relevance;
}
if (explicit) {
continuations[top.subLanguage] = result.top;
}
return buildSpan(result.language, result.value, false, true);
}
function processBuffer() {
return top.subLanguage !== undefined ? processSubLanguage() : processKeywords();
}
function startNewMode(mode, lexeme) {
var markup = mode.className? buildSpan(mode.className, '', true): '';
if (mode.returnBegin) {
result += markup;
mode_buffer = '';
} else if (mode.excludeBegin) {
result += escape(lexeme) + markup;
mode_buffer = '';
} else {
result += markup;
mode_buffer = lexeme;
}
top = Object.create(mode, {parent: {value: top}});
}
function processLexeme(buffer, lexeme) {
mode_buffer += buffer;
if (lexeme === undefined) {
result += processBuffer();
return 0;
}
var new_mode = subMode(lexeme, top);
if (new_mode) {
result += processBuffer();
startNewMode(new_mode, lexeme);
return new_mode.returnBegin ? 0 : lexeme.length;
}
var end_mode = endOfMode(top, lexeme);
if (end_mode) {
var origin = top;
if (!(origin.returnEnd || origin.excludeEnd)) {
mode_buffer += lexeme;
}
result += processBuffer();
do {
if (top.className) {
result += '</span>';
}
relevance += top.relevance;
top = top.parent;
} while (top != end_mode.parent);
if (origin.excludeEnd) {
result += escape(lexeme);
}
mode_buffer = '';
if (end_mode.starts) {
startNewMode(end_mode.starts, '');
}
retu