Home → Blog → WordPress →

New Plugin: Code Prettify (Syntax Highlighter)

May 23, 2013 WordPress 19 Comments

Most syntax highlighters use either shortcodes or make you add some obscure CSS classes to all <pre> tags that you want to highlight. Even WordPress.com does that.

Introducing Code Prettify Syntax Highlighting Plugin

Code Prettify for WordPress is a new plugin with just 31 line of code that enqueues the Google Code Prettify library (one minified javascript file) which then parses all <pre> tags on the page, detects the correct language and lazy-loads the necessary syntax module, and applies the highlighting.

Code Prettify (Syntax Highlighter) WordPress Plugin

No shortcodes, no custom CSS classes — just magic.

Related posts:

  1. New Plugin: Minit
  2. Tabbed Widgets Plugin Update (0.76)
  3. New Plugin: Custom 404 Error Page

19 Comments

  1. Kaspars Foigts says:
    May 23, 2013 at 14:43

    How’s it better than highlight.js?

    Reply
  2. Kaspars Foigts says:
    May 23, 2013 at 14:54

    Yep, I do. No clear benefits over google-code-prettify, though. Just stuck to one I found smallest and fastest.

    Reply
  3. Frank says:
    May 28, 2013 at 15:09

    Small and usefull.
    I have also custom plugins on live sites with different js libs, very often highlight.js.
    But a small hint. I think it is a good idea in your source to check for if ( ! is_admin() ) before enqueue script. If it is only usable on frontend.

    Reply
    • Kaspars says:
      May 28, 2013 at 15:25

      Frank, notice that I’m using the wp_enqueue_scripts action to enqueue the script and that runs only on the front-end. Here is the description of that function:

      Allows plugins to queue scripts for the front end using wp_enqueue_script(). Runs first in wp_head() where all is_home(), is_page(), etc. functions are available.

      Reply
  4. Frank says:
    May 28, 2013 at 15:52

    Thanks for your fast feedback. I mean that was not clear, I had read before long time the comment on core topic. But then is my comment off topic and maybe a hint for to debug this for clarify.

    Reply
  5. Romain says:
    June 19, 2013 at 14:03

    How make Indentation ?

    Reply
  6. Romain says:
    June 19, 2013 at 14:09

    Because i try with php and indentation not working. I have:

    function test(){
echo 'test';
}

    And not:

    function test(){
     echo 'test';
}
    Reply
  7. Romain says:
    June 19, 2013 at 14:13

    But you need to write spaces to indent code ?

    Reply
    • Kaspars says:
      June 19, 2013 at 14:15

      It doesn’t matter if you use tabs or spaces as long as it is wrapped in <pre></pre> tags. Browser will ignore any kind of indentation if it’s not inside <pre></pre>.

      Reply
  8. Romain says:
    June 19, 2013 at 15:12

    Ok, thank you ! Nice plugin ;)

    Reply
  9. jo says:
    April 9, 2014 at 13:57

    Hi, I love this plugin since it has just 31 lines of code! :-)

    Question, how do I change CSS type (“Skins”)? Let’s say I like “Desert” skin, do I load its CSS into my theme CSS?

    Thanks!

    Reply
    • Kaspars says:
      April 9, 2014 at 15:15

      There is a filter in the plugin that allows you to specify the “skin” you want to use. Something like this should work:

      add_filter( 'prettify_skin', 'my_prettify_skin' );

function my_prettify_skin( $skin ) {
	return 'desert';
}
      Reply
  10. Ryan Hellyer says:
    April 29, 2014 at 11:22

    I’ve been using this for a while now, and am very happy with it. It’s much simpler to use than the Syntax Highlighter Evolved plugin I was using before, and it’s lighter on code too.

    Reply
  11. Nils says:
    May 4, 2014 at 12:49

    Is this available from the official WordPress plugin repo (https://wordpress.org/plugins)?

    Reply

Leave a Reply