How to load google-code-prettify syntax highlighting without plugins

If you run a WordPress blog where you display (parts of) source code, syntax highlighting is a must! It prettifies the code which makes it easier to read and it distinguishes code from text. However, most syntax highlighting is made available through plugins, and we all know too many plugins bring a lot of overhead to your blog.
Published on Wednesday, 23 April 2014
functions-php php plugin wordpress

So, conditional load in WordPress: Load javascript only on posts in WordPress.

Load google-code-prettify syntax highlighting in WordPress, without plugins

Conditional load in WordPress: Load javascript only on posts in WordPress.

Too many plugins and a code overhead results in a slow loading blog. We don't want a slow blog, so here is how you can fix that, partially.

google-code-prettify is a nifty javascript module and CSS file that allows syntax highlighting of source code snippets in an HTML page. For WordPress it is available through the plugin Pretty GC Syntax Highlighter.

The disadvantage of such a WordPress plugin is: javascript and CSS files are always loaded, even on pages and in posts that have no source code to highlight. A waste of resources! Particularly in a world where websites have to load as fast as possible, and be as small as possible for mobile devices and (Google) SEO.

For WordPress, it is very easy to use the google-code-prettify javascript module instead of Prettify GC Syntax Highlighter. This makes a smaller footprint for your website.

To make this happen, download google-code-prettify and set it up somewhere on your website, or use the on googlecode.com hosted variant.

Open up your Theme functions.php or site-specific plugin file and add:

function custom_gcp_js() {
  if( is_single() ) {
    echo '
      <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css" async>
      </script>
    ';
  }
}

// Add hook for front-end <head></head>
add_action( 'wp_head', 'custom_gcp_js' );

This code loads the javascript only in the HTML head, only on posts.

Yes, you do loose some of the automatically converting of HTML tags to HTML-entities, but you can do that yourself easily.

Enqueue SyntaxHighlighter by Alex Gorbatchev in functions.php

If you wish to use Alex Gorbatchev's SyntaxHighlighter, without a plugin like SyntaxHighlighter Evolved, then you can add the following code to your WordPress functions.php file:

function saotn_enqueueSyntaxHighlighter() {
  if ( is_singular() ) {
    wp_enqueue_style( 'sh-core', '//www.example.org/wp-content/themes/[theme name]/syntaxhighlighter/styles/shCore.css', array(), '3.0.83', 'all' );
    wp_enqueue_style( 'sh-theme', '//www.example.org/wp-content/themes/[theme name]/syntaxhighlighter/styles/shThemeDefault.css', array(), '3.0.83', 'all' );
    wp_enqueue_script( 'sh-jsCore', '//www.example.org/wp-content/themes/[theme name]/syntaxhighlighter/scripts/shCore.js', '', '3.0.83', true );
    wp_enqueue_script( 'sh-jsPerl', '//www.example.org/wp-content/themes/[theme name]/syntaxhighlighter/scripts/shBrushPerl.js', '', '3.0.83', true );
    wp_enqueue_script( 'sh-jsPHP', '//www.example.org/wp-content/themes/[theme name]/syntaxhighlighter/scripts/shBrushPhp.js', '', '3.0.83', true );
    wp_enqueue_script( 'sh-jsJScript', '//www.example.org/wp-content/themes/[theme name]/syntaxhighlighter/scripts/shBrushJScript.js', '', '3.0.83', true );
    wp_enqueue_script( 'sh-jsSql', '//www.example.org/wp-content/themes/[theme name]/syntaxhighlighter/scripts/shBrushSql.js', '', '3.0.83', true );
    wp_enqueue_script( 'sh-jsVB', '//www.example.org/wp-content/themes/[theme name]/syntaxhighlighter/scripts/shBrushVb.js', '', '3.0.83', true );
    wp_enqueue_script( 'sh-jsXML', '//www.example.org/wp-content/themes/[theme name]/syntaxhighlighter/scripts/shBrushXml.js', '', '3.0.83', true );
    wp_enqueue_script( 'sh-jsPowerShell', '//www.example.org/wp-content/themes/[theme name]/syntaxhighlighter/scripts/shBrushPowerShell.js', '', '3.0.83', true );
    wp_enqueue_script( 'sh-jsPlainText', '//www.example.org/wp-content/themes/[theme name]/syntaxhighlighter/scripts/shBrushPlain.js', '', '3.0.83', true );
    wp_enqueue_script( 'sh-jsCSS', '//www.example.org/wp-content/themes/[theme name]/syntaxhighlighter/scripts/shBrushCss.js', '', '3.0.83', true );
    wp_enqueue_script( 'sh-jsCPP', '//www.example.org/wp-content/themes/[theme name]/syntaxhighlighter/scripts/shBrushCpp.js', '', '3.0.83', true );
    wp_enqueue_script( 'sh-jsCSharp', '//www.example.org/wp-content/themes/[theme name]/syntaxhighlighter/scripts/shBrushCSharp.js', '', '3.0.83', true );
    wp_enqueue_script( 'sh-jsBash', '//www.example.org/wp-content/themes/[theme name]/syntaxhighlighter/scripts/shBrushBash.js', '', '3.0.83', true );
  }
}
add_action( 'wp_enqueue_scripts', 'saotn_enqueueSyntaxHighlighter', 20 );

As per installation instructions, the shCore.js, shCore.css, shCore.css and shThemeDefault.css are required. You have to create the folder /syntaxhighlighter/ (with scripts/ and styles as subfolders/) in your theme directory.

Of course you can create your own plugin for this too.

SyntaxHighlighter shortcode

I can imagine you don't want to type out the full <pre class="brush: php"> ... </pre> constantly. Create your own shortcode for it! In your functions.php (or site-specific plugin file), simply add:

function saotn_php( $atts, $content = null ) {
  return '<pre class="brush: php">' . $content . '</pre>';
}
add_shortcode( 'php', 'saotn_php' );

This provides the [php] your content [/php] shortcode.

For support in your comments form, add

add_filter( 'comment_text', 'do_shortcode' );

WordPress is_single() vs. is_singular()

What's the difference between "is_single()" and "is_singular()?

There is a difference in the WordPress functions is_single() and is_singular(), mainly: is_single() returns TRUE for any single post being displayed, and is_singular() returns TRUE for any page, attachment, or single post that is displayed. Along with is_page(), these are WordPress's conditional tags.