So for the past few hours, have been playing with Deck.js. I like the idea of a web based presentation format rather than a blob like powerpoint. At the same time, I’m a bit circumspect too - given the state of the tools. At least for my use, there’s really no burning need that powerpoint can’t solve (though I get the shivers everytime I have to do a presentation). All the web based/HTML5 seem raw at the moment on some much needed features (slide notes, slide prints, scaling issues etc).
Anyway, after a few minutes on Google and StackOverflow, decided to give Deck.js a spin. Deck.js is really nice and you should take a tour if you haven’t done so. So finally, after giving the online presentation and the introduction a try, downloaded the latest to give it a more thorough spin. As usual, one of the first things was embedding code snippets and I thought it would be nice to integrate Alex Gorbatchev’s SyntaxHighlighter into this. Turned out really simple to do (I’m sure there are other syntax highlighter extensions to deck.js out there) - but since I got something working pretty easily, here it is:
Create a file called deck.syntaxhighlighter.js with code below:
(function ($) {
$("head").append(
'<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"
rel="stylesheet" type="text/css" />'
).append(
'<link
href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"
rel="stylesheet" type="text/css" />'
);
function setupSyntaxHighlighterAutoloads() {
console.log("calling SyntaxHighlighter");
SyntaxHighlighter.autoloader(
'applescript http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js',
'actionscript3 as3 http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js',
'bash shell http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js',
'coldfusion cf http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js',
'cpp c http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js',
'c# c-sharp csharp http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js',
'css http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js',
'delphi pascal http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js',
'diff patch pas http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js',
'erl erlang http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js',
'groovy http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js',
'java http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js',
'jfx javafx http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js',
'js jscript javascript http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js',
'perl pl http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js',
'php http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js',
'text plain http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js',
'py python http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js',
'ruby rails ror rb http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js',
'sass scss http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSass.js',
'scala http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js',
'sql http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js',
'vb vbnet http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js',
'xml xhtml xslt html http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'
);
SyntaxHighlighter.all();
}
$.getScript("http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js", function () {
$.getScript("http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js",setupSyntaxHighlighterAutoloads);
});
})(jQuery);Throw that in your deck.js/extensions folder. IN the slide deck you want to use this extension, include a script line before the end of the body tag:
<script src="../extensions/deck.syntaxhighlighter.js"></script>
</body>
</html>And you’re done. Now to include any code snippets in your deck, just use either of the methods specified in the SyntaxHighlighter page (snippet for the script tag below)
<script type="syntaxhighlighter" class="brush: js">
$(document).ready(function () \{
//this is the function body
});
</script>That’s all there is to it. Code above can do with some improvements (conditionally load local copies if the remote loading fails etc) - but this is just a quickie script - so feel free to modify this to your heart’s content.
