deck js 语法高亮

deckjs_syntax_highlight.markdown

A SYNTAX HIGHLIGHTER EXTENSION FOR DECK.JS

from: http://niftybits.wordpress.com/2012/01/09/a-syntax-highlighter-extension-for-deck-js/

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.