[#5] Added syntax highlighting to HTML documentation

Makefile

@@ -18,9 +18,6 @@ path_doc_output_html=${path_doc_output}/manual
 path_doc_output_html1=${path_doc_output}/manual.html
 path_doc_css=${path_doc}/manual.css
 path_doc_img=${path_doc}/img
-path_doc_interactive_src=$(path_doc)/interactive.js
-path_doc_interactive_dest=$(path_doc_output)/interactive.js \
-	$(path_doc_output_html)/interactive.js
 path_manual_texi=${path_doc}/manual.texi
 
 path_info_install := /usr/local/share/info
@@ -32,6 +29,7 @@ doc_imgs := $(patsubst %.dia, %.png, $(wildcard $(path_doc_img)/*.dia))
 doc_imgs_txt := $(patsubst %.dia, %.png, $(wildcard $(path_doc_img)/*.txt))
 
 doc_replace := s/<\/body>/<script type="text\/javascript" \
+	src="highlight.pack.js"><\/script><script type="text\/javascript" \
 	src="interactive.js"><\/script><\/body>/
 
 combine=${path_tools}/combine
@@ -100,14 +98,15 @@ $(path_doc_output_plain): $(doc_imgs_txt) | mkbuild-doc
 # doc html (multiple pages)
 $(path_doc_output_html)/index.html: $(doc_src) $(path_doc_css) \
 | $(path_doc_output_html)/img $(path_doc_output_html)/interactive.js \
-mkbuild-doc doc-img
+$(path_doc_output_html)/highlight.pack.js mkbuild-doc doc-img
 	makeinfo --html --css-include="${path_doc_css}" \
 		-I "$(path_doc)" -o "${path_doc_output_html}" "${path_manual_texi}"
 	sed -i '$(doc_replace)' $(path_doc_output_html)/*.htm?
 
 # doc html (single page)
 $(path_doc_output_html1): $(doc_src) $(path_doc_css) \
-| $(path_doc_output)/img $(path_doc_output)/interactive.js mkbuild-doc doc-img
+| $(path_doc_output)/img $(path_doc_output)/interactive.js \
+$(path_doc_output)/highlight.pack.js mkbuild-doc doc-img
 	makeinfo --no-split --html --css-include="${path_doc_css}" \
 		-I "$(path_doc)" -o - "${path_manual_texi}" \
 		| sed '$(doc_replace)' \
@@ -122,7 +121,9 @@ $(path_doc_output_html)/img: $(path_doc_output)/img
 	ln -s ../img $@
 
 # interactive html doc (js)
-$(path_doc_interactive_dest): $(path_doc_interactive_src)
+$(path_doc_output_html)/%.js: $(path_doc)/%.js
+	cp $< $@
+$(path_doc_output)/%.js: $(path_doc)/%.js
 	cp $< $@
 
 doc-img: $(doc_imgs)

doc/integration.texi

@@ -154,10 +154,13 @@ Let's assume that you have installed ease.js somewhere that is accessible to
 @code{require.paths}. If you used a tool such as @command{npm}, this should have
 been done for you.
 
-@example
+@float Figure, f:inc-serverside
+@verbatim
 /** example-include.js **/
 var easejs = require( 'easejs' );
-@end example
+@end verbatim
+@caption{Including ease.js via require()}
+@end float
 
 It's important to understand what exactly the above command is doing. We are
 including the @file{easejs/} directory (adjust your path as needed). Inside that
@@ -177,13 +180,16 @@ In order for ease.js to operate within the client, you must either download
 @file{ease.js} or @ref{Building, build it yourself}. Let's assume that you have
 placed @file{ease.js} within the @file{scripts/} directory of your web root.
 
-@example
+@float Figure, f:inc-clientside
-  <!-- to simply use ease.js -->
+@verbatim
-  <script type="text/javascript" src="/scripts/ease.js"></script>
+<!-- to simply use ease.js -->
+<script type="text/javascript" src="/scripts/ease.js"></script>
 
-  <!-- to include both the framework and the unit tests -->
+<!-- to include both the framework and the unit tests -->
-  <script type="text/javascript" src="/scripts/ease-full.js"></script>
+<script type="text/javascript" src="/scripts/ease-full.js"></script>
-@end example
+@end verbatim
+@caption{Including ease.js client-side}
+@end float
 
 Likely, you only want the first one. The unit tests can more easily be run by
 loading @file{build/browser-test.html} in your web browser (@pxref{Building}).

doc/interactive.js

@@ -23,3 +23,32 @@ head.appendChild( sjquery );
 head.appendChild( sjquery_ui );
 head.appendChild( css );
 
+// will call callback when jQuery has been loaded
+function jqueryCheck( callback )
+{
+    if ( typeof $ === 'undefined' )
+    {
+        // check again in 50ms
+        setTimeout( function()
+        {
+            jqueryCheck( callback );
+        }, 50 );
+
+        return;
+    }
+
+    callback();
+}
+
+jqueryCheck( function()
+{
+    $( document ).ready( function()
+    {
+        // syntax highlighting for code samples
+        $( '.verbatim, .samp, .code, .example' ).each( function( i, element )
+        {
+            hljs.highlightBlock( element, '    ' );
+        } );
+    } );
+} );
+

doc/manual.css

@@ -70,3 +70,132 @@ var {
   line-height: 0.5em;
 }
 
+
+/*
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+*/
+
+pre code {
+  display: block; padding: 0.5em;
+  color: #000;
+  background: #f8f8ff
+}
+
+pre .comment,
+pre .template_comment,
+pre .diff .header,
+pre .javadoc {
+  color: #998;
+  font-style: italic
+}
+
+pre .keyword,
+pre .css .rule .keyword,
+pre .winutils,
+pre .javascript .title,
+pre .lisp .title,
+pre .subst {
+  color: #000;
+  font-weight: bold
+}
+
+pre .number,
+pre .hexcolor {
+  color: #40a070
+}
+
+pre .string,
+pre .tag .value,
+pre .phpdoc,
+pre .tex .formula {
+  color: #d14
+}
+
+pre .title,
+pre .id {
+  color: #900;
+  font-weight: bold
+}
+
+pre .javascript .title,
+pre .lisp .title,
+pre .subst {
+  font-weight: normal
+}
+
+pre .class .title,
+pre .haskell .label,
+pre .tex .command {
+  color: #458;
+  font-weight: bold
+}
+
+pre .tag,
+pre .tag .title,
+pre .rules .property,
+pre .django .tag .keyword {
+  color: #000080;
+  font-weight: normal
+}
+
+pre .attribute,
+pre .variable,
+pre .instancevar,
+pre .lisp .body {
+  color: #008080
+}
+
+pre .regexp {
+  color: #009926
+}
+
+pre .class {
+  color: #458;
+  font-weight: bold
+}
+
+pre .symbol,
+pre .ruby .symbol .string,
+pre .ruby .symbol .keyword,
+pre .ruby .symbol .keymethods,
+pre .lisp .keyword,
+pre .tex .special,
+pre .input_number {
+  color: #990073
+}
+
+pre .builtin,
+pre .built_in,
+pre .lisp .title {
+  color: #0086b3
+}
+
+pre .preprocessor,
+pre .pi,
+pre .doctype,
+pre .shebang,
+pre .cdata {
+  color: #999;
+  font-weight: bold
+}
+
+pre .deletion {
+  background: #fdd
+}
+
+pre .addition {
+  background: #dfd
+}
+
+pre .diff .change {
+  background: #0086b3
+}
+
+pre .chunk {
+  color: #aaa
+}
+
+pre .tex .formula {
+  opacity: 0.5;
+}
+