How to Improve SyntaxHighlighter

SyntaxHighlighter is a javascript library that I use on this blog to colorize and display my code snippets. SyntaxHighlighter is a great tool and the author deserves a lot of respect, but the default "select all" and "copy and paste" functionality can be somewhat frustrating. For the last few days I've been troubleshooting various issues with the "select all" and "copy and paste" functionality. Depending on the configuration and the browser, sometimes it copies the text with non-breaking spaces which causes errors in certain IDEs. Other times it copies the text with the wrong indentation or with no line breaks at all.

Even the fact that you can quickly select all of the text is not immediately apparent; SyntaxHighlighter contains a "hidden" feature that allows double clicking the text to select all of it (of course the average user would never know this functionality existed). Finally, when it does select all of the text it copies it from its native, colorized form into a simple, monochrome textarea control that is created dynamically using some javascript magic. The performance can be a little slow, it may cause the view to randomly jump or scroll in Internet Explorer, and the transition just looks a little tacky.

Below is a script you can embed in the header section of your website or blog that will correct some of these problems. It changes the the default behavior of the "select all" operation and it also adds a button to the top-right corner that is clearly labelled "Select All" (you can still double click the text too).

If you use this script for Blogger, be sure to replace any ampersands with & and any less than signs with < and any greater than signs with >. If you don't do this you will get a cryptic error when you try to upload the html. Blogger requires these characters to be escaped since it uses XML.

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<!-- Syntax Highlighter Additions START -->
<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/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>

<style>
.syntaxwrapper
{
 position: relative;
}

.syntaxwrapper .toolbar
{
 position: absolute;
 z-index: 10;
 right: -7px;
 top: -17px;
 width: 65px;
 height: 20px;
 line-height: 20px;
 text-align: center; 
 color: #777;
 font-family: arial;
 font-size: 12px;
 cursor: pointer;
}
</style>

<script language='javascript' type='text/javascript'>

 function selectAll(element)
 {
     if (window.getSelection && document.createRange)
     {
         var selection = window.getSelection();
         var range = document.createRange();
         range.selectNodeContents(element);
         selection.removeAllRanges();
         selection.addRange(range);
     }
     else if (document.body.createTextRange)
     {
         var range = document.body.createTextRange();
         range.moveToElementText(element);
         range.select();
     }
 }

 function customizeSyntaxHighlighter()
 {
     var syntax = $('.syntaxhighlighter');
     if (syntax.length == 0)
     {
         setTimeout(function() { customizeSyntaxHighlighter(); }, 100);
         return;
     }

     syntax.each(function(index)
     {
         var selector = $(this);
         var wrapper = $(document.createElement('div')).addClass('syntaxwrapper');
         var toolbar = $(document.createElement('div')).addClass('toolbar').html('Select All');
         var code = selector.find('.code').first();

         selector.wrap(wrapper).before(toolbar);

         toolbar.get(0).onclick = code.get(0).ondblclick =
         function()
         {
             selectAll(code.get(0));
             syntax.scrollLeft(0);
             return false;
         };

         code.find('.line').each(
         function(index)
         {
             //this hack seems to fix all versions of IE
             this.appendChild(document.createTextNode('\r'));
         });
     });
 }

 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.defaults.toolbar = false;
 SyntaxHighlighter.defaults['quick-code'] = false;
 SyntaxHighlighter.all();
 customizeSyntaxHighlighter();
 
</script>
<!-- Syntax Highlighter Additions END -->

Here is the SyntaxHighlighter website:

http://alexgorbatchev.com/SyntaxHighlighter/