Tag Archives: blogger

Integrating SyntaxHighlighter into this blog (line wrapping enabled)

Finally integrated current version of SyntaxHighlighter into this blog.
Had to include following into the head section of the blogger template:


<!-- Include required JS files -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>

<!--
At least one brush, here we choose JS. You need to include a brush for every
language you want to highlight
-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJscript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

<!-- Include *at least* the core style and default theme -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<style type='text/css'>
/* syntaxhighlighter */
.syntaxhighlighter .line {
white-space: pre-wrap !important; /* make code wrap */
}
</style>
<style type='text/css'>
/* syntaxhighlighter */
.syntaxhighlighter {
overflow-y: hidden !important;
}
</style>

<script src='http://code.jquery.com/jquery-1.5.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
// Line wrap back
var shLineWrap = function(){
$('.syntaxhighlighter').each(function(){
// Fetch
var $sh = $(this),
$gutter = $sh.find('td.gutter'),
$code = $sh.find('td.code');
// Cycle through lines
$gutter.children('.line').each(function(i){
// Fetch
var $gutterLine = $(this),
$codeLine = $code.find('.line:nth-child('+(i+1)+')');
// Fetch height
var height = $codeLine.height()||0;
if ( !height ) {
height = 'auto';
}
else {
height = height += 'px';
}
// Copy height over
$gutterLine.height(height+' !important');
console.debug($gutterLine.height(), height, $gutterLine.text(), $codeLine);
});
});
};

// Line wrap back when syntax highlighter has done it's stuff
var shLineWrapWhenReady = function(){
if ( $('.syntaxhighlighter').length === 0 ) {
setTimeout(shLineWrapWhenReady,800);
}
else {
shLineWrap();
}
};

// Fire
shLineWrapWhenReady();
});
//]]></script>
<script type='text/javascript'>
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Done it with a great help from My Tech Notes and Undume Press.
Had to turn gutter off, cause line wrapping malforms line numbering.
More to do: add visual sign of line wrapping, conditional wrapping, etc.