[#5] Added syntax highlighting to HTML documentation
Mike Gerwitz
parent
642acc72fb
commit
2d05445958
13
Makefile
13
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)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
<!-- to simply use ease.js -->
|
||||
<script type="text/javascript" src="/scripts/ease.js"></script>
|
||||
@float Figure, f:inc-clientside
|
||||
@verbatim
|
||||
<!-- to simply use ease.js -->
|
||||
<script type="text/javascript" src="/scripts/ease.js"></script>
|
||||
|
||||
<!-- to include both the framework and the unit tests -->
|
||||
<script type="text/javascript" src="/scripts/ease-full.js"></script>
|
||||
@end example
|
||||
<!-- to include both the framework and the unit tests -->
|
||||
<script type="text/javascript" src="/scripts/ease-full.js"></script>
|
||||
@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}).
|
||||
|
|
|
|||
|
|
@ -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, ' ' );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
||||
|
|
|
|||
129
doc/manual.css
129
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue