Syntax Highlighter Optimization for Wordpress

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;}

Syntax Highlighter Optimization for Wordpress

Others are also reading...

Comments