Upon my initial activation of the “Google Syntax Highlighter for Wordpress” plugin, there was a noticable slowdown.  It is understandable to have a cutback in performance as a sacrafice for much needed functionality.  However, there is something that can be done to minimize that juggernaut of a plugin.

When I researched my syntax highlighter concerns, I ran into this article: Optimizing The “Google Syntax Highlighter” WP Plugin.  In this article, Fire G demonstrates 2 fixes for the google syntax highlighter wp plugin.  Fix 1 being the idea of only running the plugin on post pages.  Fix 2 is the concatination of all the language files into one.

In the header function, we now only link to the stylsheet if we are on a post page.

function insert_header() {
  $current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
  if(is_single()){  ?>
    <link href="<?php echo $current_path; ?>Styles/SyntaxHighlighter.css" type="text/css" rel="stylesheet" />
  <?php
  }
}

In the footer function, I have combined all the syntax highlighter language files into shBrushAll.js.  I have also specified that I only want to use this code if we are on a post page.  I also have an added line for changing all pre tags with a title equal to code to pre tags with name equals code.  I do this for validation reasons, because name is not a valid attribute for a pre tag.

function insert_footer(){
  $current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
  if(is_single()){
  ?>
    <script class="javascript" src="<?php echo $current_path; ?>Scripts/shCore.js"></script>
    <script class="javascript" src="<?php echo $current_path; ?>Scripts/shBrushAll.js"></script>
    <script class="javascript">
      jQuery("pre[title=code]").attr("name", "code");
      dp.SyntaxHighlighter.ClipboardSwf = '<?php echo $current_path; ?>Scripts/clipboard.swf';
      dp.SyntaxHighlighter.HighlightAll('code');
    </script>
    <?php
  }
}

In addition, I have added two lines to the SytanxHighlighter.css.  This is merely a preference and has no effect on performance.  I don’t like having my code wrap unexpectedly, especially for css definitions.

.dp-highlighter ol li, .dp-highlighter .columns div {white-space: nowrap;}
.dp-highlighter {overflow: hidden; overflow-x: auto;}