Saturday, October 03, 2009

Migration to SyntaxHighlighter 2.0

This will be coming soon. For the moment a little note to myself, expanding from my first how-to for version 1.5:

<link href='.../SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='.../shCore.js' type='text/javascript'/>
<script src='.../shBrushPython.js' type='text/javascript'/>
<script src='.../shBrushRuby.js' type='text/javascript'/>
...
<script type='text/javascript'>//<![CDATA[
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = ".../clipboard.swf";
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll("code",true,false,false,1,false);
}
//]]></script>
view raw gistfile1.html hosted with ❤ by GitHub

becomes

<link type='text/css' rel='stylesheet' href='.../shCore.css'/>
<link type='text/css' rel='stylesheet' href='.../shThemeDefault.css'/>
<script type='text/javascript' src='.../shCore.js'/>
<script type='text/javascript' src='.../shLegacy.js'/>
<script type='text/javascript' src='.../shBrushXml.js'/>
...
<script type='text/javascript'>//<![CDATA[
SyntaxHighlighter.config.clipboardSwf = '.../clipboard.swf';
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
window.onload = function () {
dp.SyntaxHighlighter.HighlightAll("code");
// any more onload behaviour
}
//]]></script>
view raw gistfile1.html hosted with ❤ by GitHub

To get the legacy mode to work, I had to put the initialization into the onload function.

I'm not rolling this out until I can get the rewritten F# and Erlang brushes to work and not throw _a2.regex is undefined messages.

Later: There are a lot of initial-letter capitalization changes (in both directions) required in this port : the "_a2.regex is undefined" messages came from more of them than at first met the eye. I still can't find the equivalent mechanism to injecting CSS styles, though.

Later yet: There doesn't seem to be a programmatic injection of CSS values any more, so I hacked the values from the 1.5 brushed into the default CSS file.

Even later: To allow legacy and non-legacy highlight styles, the legacy part of the operation must be in the onload, the 2.0 initialization must not.

Yet more: A possible bug in the CSS as supplied -- I needed to add the following

.syntaxhighlighter .toolbar .item.copyToClipboard
{
text-indent: 0 !important;
background: none !important;
background-image: url(page_white_copy.png) !important;
overflow: visible !important;
}
view raw gistfile1.css hosted with ❤ by GitHub

to shCore.css to get the copy-to-clipboard icon to show in the toolbar.

1 comment :

Tony Garcia said...

Thanks a lot for the tip about calling the legacy stuff within onLoad(). I couldn't figure out why it wasn't working!