Monday 29 April 2013

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.