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. So: conditional loading in WordPress, load JavaScript only on posts.

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

Too many plugins and code overhead result 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 was 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 Pretty 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 CDN hosted variant.

Open up your theme's functions.php or site-specific plugin file and add:

function custom_gcp_js() {
  if( is_single() ) {
    echo '
      <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/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 in the HTML head, and only on posts.

Yes, you do lose some of the automatic converting of HTML tags to HTML entities, but you can easily do that yourself.

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 the installation instructions (Wayback Machine), shCore.js, shCore.css and shThemeDefault.css are required, plus the brushes for the languages you use. 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.

Loading less is only one way to a faster blog. Here are more ways to optimize WordPress hosting, and how to measure WordPress loading time and queries.