Permalink
Browse files

Syntax highlight code using prismjs.

 * Copy over static files to destination
 * Include prism JS / CSS
 * Other minor CSS-tweaks.
  • Loading branch information...
1 parent 22eee85 commit d8f73eae37580c1a45ee0dcd2e9773e83ef8add1 @msiebuhr msiebuhr committed Aug 16, 2012
Showing with 133 additions and 6 deletions.
  1. +12 −0 onedox.js
  2. +100 −0 static/prism.css
  3. +6 −0 static/prism.js
  4. +15 −6 templates/index.html
View
@@ -77,4 +77,16 @@ mkdirp(staticDir, function () {
}));
console.log("✓ Wrote", index, "(no index.js to use as entry point)");
}
+
+ /*
+ * Copy static files
+ */
+ ['prism.css', 'prism.js'].forEach(function (file) {
+ var source = path.join(__dirname, 'static', file),
+ target = path.join(staticDir, file);
+
+ fs.createReadStream(source)
+ .on('end', function() { console.log("✓ Wrote", target); })
+ .pipe(fs.createWriteStream(target))
+ });
});
View
@@ -0,0 +1,100 @@
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+ color: black;
+ text-shadow: 0 1px white;
+ font-family: Consolas, Monaco, 'Andale Mono', monospace;
+ direction: ltr;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ padding: 1em;
+ margin: .5em 0;
+ overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+ background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+ padding: .1em;
+ border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: slategray;
+}
+
+.token.punctuation {
+ color: #999;
+}
+
+.namespace {
+ opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number {
+ color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string {
+ color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+ color: #a67f59;
+ background: hsla(0,0%,100%,.5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+ color: #07a;
+}
+
+
+.token.regex,
+.token.important {
+ color: #e90;
+}
+
+.token.important {
+ font-weight: bold;
+}
+
+.token.entity {
+ cursor: help;
+}
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -1,7 +1,9 @@
<html>
<head>
<title>{{ title }}</title>
-
+ <meta charset="utf-8">
+ <link href="static/prism.css" rel="stylesheet" />
+ <script src="static/prism.js"></script>
<style>
body {
font-family: helvetica, sans-serif;
@@ -14,21 +16,28 @@
background: darkred;
}
td.docs {
+ min-width: 200px;
vertical-align: top;
width: 100%;
- padding: 10px 25px 1px 10px;
+ padding: 1em;
overflow-x: hidden;
vertical-align: top;
text-align: left;
}
+ td.docs p {
+ margin: 8px 0px;
+ }
+
+ td.docs tt, td.docs code {
+ background: #F5F2F0;
+ }
+
td.code {
vertical-align: top;
- padding: 14px 15px 16px 10px;
width: 100%;
vertical-align: top;
- background: #F5F5FF;
- border-left: 1px solid #E5E5EE;
+ background: #F5F2F0;
}
menu {
@@ -51,7 +60,7 @@
{% for d in docs %}
<tr>
<td class="docs">{{ d.description.full }}</td>
- <td class="code"><pre>{{ d.code }}</pre></td>
+ <td class="code"><pre><code class="language-javascript">{{ d.code }}</code></pre></td>
</tr>
{% endfor %}
</table>

0 comments on commit d8f73ea

Please sign in to comment.