A syntax highlighter extension for Deck.js

· Read in about 2 min · (425 words) ·

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 ($) {
    '<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"
    rel="stylesheet" type="text/css" />'
    rel="stylesheet" type="text/css" />'
function setupSyntaxHighlighterAutoloads() {
    console.log("calling SyntaxHighlighter");
        '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'
$.getScript("http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js", function () {


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>

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

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.