WordPress Plugin: Code Autoescape

If you frequently post code snippets into your [WordPress](http://www.wordpress.org) blog then you already know how tedious and very error prone the process is. You will need to manually escape every single <, > and & characters in your code by hand. If not, either the code won’t get displayed properly or part of it will ferociously get eaten by WordPress. Needless to say, this is a process we’d very much like to avoid.

There are several plugins that do this already. However, in my opinion they are all not perfect. So, this is my attempt at another not so perfect code snippet plugin :).

**Problems When Posting Code Snippets**

* <, >, and & need to be escaped manually.
* WordPress tag balancing. A problem when posting incomplete HTML/XML code snippets.
* convert_chars. This will happily eat `` tags, among other things.
* Inconsistent escaping. Sometimes, WordPress will escape &, and in other cases would not.
* Smilies. We like having smilies when expressing our thoughts, but certainly not within code snippets!
* wptexturize. It creates code blocks that looks right on our eyes, but won’t work when copied and pasted.
* make_clickable in comments. This could wreak havoc on code snippets within comments.
* wpautop in comments. I can’t tell what this does, but it looks nasty to me.

**Problems With Other Plugins**

* Attempt to reverse wptexturize and/or convert_chars. This makes it impossible to introduce literal ellipsis in code blocks for example. I don’t know if this could become a problem, but it certainly can happen. Furthermore, if core WordPress updates wptexturize, then the plugin will need to be updated too.

**Design Decision For This Plugin**

The plugin is designed to get around the problems listed above. However the plugin does not do syntax coloring, line numbering, parsed HTML within code blocks, or anything fancy. But you should be able to write anything within codeblocks and it should appear correctly. The only exception is you can’t write a literal “<code>” and “</code>” inside codeblocks.

Code blocks in comments will be converted into pre code blocks if it contains multiple lines. I don’t know if this may create problem with XHTML validity.

**Installation**

1. Download the plugin: [codeautoescape.txt](https://priyadi.net/wp-content/plugins/codeautoescape.txt).

2. Rename the file into `codeautoescape.php` and put it in your `wp-content/plugins` directory.

3. Activate the plugin from WordPress administration page.

**Usage**

Post your code snippets enclosed by <code>…</code>. If it is multi line, you should use <pre><code>…</code></pre>.

In comments, enclose the code within <code>…</code>. If it is multi line, the plugins will add <pre>…</pre> automatically.

**Stress Tests (or proof that this works)**

Unbalanced HTML, title tag:



  
    Lorem ipsum dolor sit amet
  

...

Previously, this will turn into emoticons:


:) :( :D :-?

Perl script:


#!/usr/bin/perl
use strict;
our $i = 0;
while (<>) {
    $i++;
    print "line $i: $_";
}

PHP script and HTML in code:


this is a paragraph

" ?>

XML data:





  Basic bread
  Flour
  Yeast
  Warm Water
  Salt
  
   Mix all ingredients together, and knead thoroughly.
   Cover with a cloth, and leave for one hour in warm room.
   Knead again, place in a tin, and then bake in the oven.
  

Regular quotes should not be converted into “fancy” ‘quotes’.


foo("bar", 'baz');

**Similar Plugins**

* [Code Entities](http://robm.me.uk/projects/plugins/wordpress/code-entities/)
* [Code Display](http://www.viper007bond.com/wordpress-plugins/code-display/)
* [Code Markup](http://www.thunderguy.com/semicolon/wordpress/code-markup-wordpress-plugin/)
* [Preserve code formatting](http://www.coffee2code.com/archives/2005/03/29/plugin-preserve-code-formatting/)
* [Code Viewer](http://elasticdog.com/2004/09/code-viewer/).

**Changelog**

2005-09-27, v1.0:

* Initial release

2005-09-28, v1.1:

* Fixes invalid XHTML in comments

2005-09-29, v2.0:

* Code refactoring

165 comments

  1. Nice work! :)

    Now, to test the only thing that my plugin really does over “Preserve code formatting”, the plugin on which mine is based. Allowing illegal HTML tags within code tags in comments:

    This is in a table

  2. Rename the file into codeautoescape.txt and put it in your wp-content/plugins directory.

    Mungkin maksudnya

    Rename the file into codeautoescape.php and put it in your wp-content/plugins directory.

  3. #10: i don’t like colorization because the plugins that do it generate non-semantic HTML code :) i might add semantic colorization to this plugin sometime.

    in addition, it looks like the geshi plugins also suffers from most of the problems listed above. never tried that personally, though.

  4. This presents problems when in code tags:

    'fetch_suns',
    'display_icon',
    'display_temp',
    'display_humidity',
    'display_wind',
    'display_dewpt',
    'display_visibility',
    'display_clouds',
    'display_barometer',
    'display_windchill',
    'display_heatindex'

    Yes, I know it should be in pre tags, but it’s still a bug. :)

  5. saya lebih suka pakai codeviewer yang di beri efek js jadinya seluruh kode dis embunyikan hanya sebuah baris text penunjuk kode :

    Click to hide / show code

    bagus , sangat bagus :)

  6. #11
    Semantic colorization? Wow, that’d be cool. AFAIK, geshi doesn’t suffer much of the listed problem (no manual escaping of <, &, or &gt;). But geshi does produce semantically incorrect output (<span> all over the place). Okay, If you can give me semantically correct colorized code, I’ll put your plugin on. Deal? :d

  7. #19: just took a glance of geshi’s documentation and it appears that it supports semantic coloring. who knows? now that I know it is possible, maybe someday I will add syntax coloring to my plugin.

    btw, the wordpress geshi plugin is still not what I want, notice that quotes in your code block are curly quotes.

  8. Plugin yaa, coba ah ntar :) semoga ini berguna bagi saya. PASTI ;)
    —-
    O iya kok live previewnya hilang mas pri? yang convert dari smile langsung ke Image? kok sekarang tetep nampil text?

  9. I think it’s an issue with HTML entities perhaps. This is the code I’m using at that short URLs link:

    <small><a href="<?php bloginfo('url'); ?>/post/< ?php the_ID(); ?>" title="Short URL to this post">Short URL</a></small>

    Let’s see if it screws up here as well. If not, then WTF is with my blog?

  10. #36: the license is GPL. WP plugins are not terribly big and complex which is why I’m a bit hesitant to use wp-plugins. but I might reconsider.

  11. I guess the code necessitates that the existing uses of amp(lt); and amp(gt); in older posts will remain as amp(lt);

    In other words, previously I have inserted code and used the entities for the brackets. Now that I have activated the plugin those show up as amp(lt); instead of brackets.

    Put in another way, it doesn’t appear that the plugin is backwards-compatible. Is that true?

  12. you should use

    ...

    for multiline code. it is more semantically correct.

    Well you just contridicted yourself. If code is not meant for multiline code, then why would I use it inside a pre for multi-line code?

    Not to mention pre doesn’t line wrap and that causes large problems with blogs.

    Anyway, all of the experts I’ve talked to plus all of the documentation I’ve read say nothing about code being limited to a single line or chunk. It just simply says computer code.

  13. #40: pre is a block element (just like p or div), while code is an inline element (like strong, em or span), both serve different purpose. while you can use a lone code element, an anonymous block element that you can’t control will be created by the user agent. so, it is always a good idea to put a code element containing multiple lines inside an explicit block element. of several block elements available in HTML, pre is the best choice because it is more suitable for codes: no line wrappings, preformatted, rendered in monospace font, no need to ‘br’ every end of line (br doesn’t have semantic meaning, it is supposed to be removed in XHTML 2.0 and replaced by l-blocks)

    yes, we can turn an inline element into a block element using CSS (display: inline), however, we need keep in mind that not every user agent use CSS and others have option to disable or to override it.

    pre doesn’t line wrap is a feature. code blocks is more confusing if overflowing lines are wrapped. a better way to handle this is by using ‘overflow: auto’

  14. Re #41:

    Except that your plugin doesn’t handle the pre element. And by putting using the code element inside of it to get your plugin to handle it, it defeats the purpose of using pre in the first place.

    And again, please show me somewhere where it says an inline element can only be one line. While what you say makes sense, I can’t find anywhere where it states just that. Although perhaps I’m just blind…

  15. #44: uh, what are you trying to propose? i wrote the plugin because i want the plugin to handle both inline code and code blocks.

    this is an inline_code()


    this();
    is();
    a();
    code();
    block();

    no, i never say an inline element can only be one line. but it should be placed inside a block element to avoid implicit anonymous block element, so that we can alter its appearance using CSS.

  16. nice one! i use it on my site and want to thank you for the good work. it is the best way to show the users how to use code in wordpress…

    best wishes, db

  17. Thanks for the plugin. I wanted borders around my code, so I went a little further. I use div for blocklevel instead of pre, with the following code to make it wrap correctly in most browsers.

    code {
    font-family: "Courier New", Courier, monospace;
    }

    div.code_box {
    white-space: -moz-pre-wrap;
    white-space: pre-wrap;
    border: 1px dashed #b0b0b0;
    padding: 5px;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 0px;
    margin-bottom: 10px;
    }

    * html div.code_box {
    white-space: pre;
    word-wrap: break-word;
    }

    span.code_line {
    border: 1px dashed #b0b0b0;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    }

    For a inline code segment I use
    <span class="code_line"><code>Code Here</code><span>

    For a multi-line I use
    <div class="code_box"><code>Code Here
    Line 2
    </code></div>

    Check out my site to see it in action.

    Stucco

  18. The code is giving my a problem with some of my posts. I am posting c++ code with includes, which means using the pound sign. It seems to work sometimes and not others.

    Email me for an example file it has trouble posting.

  19. The whole concept of taking the <code>…</code>, converting it to base64, and encapsulating it is unmitigated evil. Not only are tags often assumed to be BBCode (yet more plugins), but this really is bizarre (although functional).

    It works, yes – but I was looking into having it automagically nl2br() the code, then essentially a preg_replace(“<br()?(\)?>”,”\r\n”, $code) if it gets called back into the editor.

    Using <pre>..</pre> doesn’t work too well for me, since it breaks my CSS, amongst other things. Any plans on updating this in the future – or tips on making my automagical br work? – being my second day of WP2, I’m slightly over my head. ;)

  20. #78: there shouldn’t a [p] before [pre]. wpautop or markdown should take care of that. perhaps you have another plugin which disables wpautop? try grepping ‘wpautop’ in your plugins directory.

  21. It’s basically a clean install. None of the 10 plugins I have installed on that test blog mess with comment content. :( They’re all pretty much just template plugins.

  22. #80: in that case, it’s probably caused by wp 2.0. i haven’t got a chance to make sure all of my plugins works as intended with 2.0. this gonna be a very rough upgrade for me :(.

  23. I solved it with what looks like to be a good solution.

    I just replaced the line in the plugin that adds the

    
    

    's with this:

    $content = "

    " . $content . "

    ";

    Validates and still shows up fine from what I can tell. :D

  24. Hi,
    I’m having some issues getting this thing to work properly. Where in the editor are you supposed to place your code tags? Alternatively, is there a way I can just upload the article in raw HTML without going through all this sillyness?

    As you can see from my site atownley.org, the leading spaces are being eaten. I’ve modified them about 6 times at this stage in various permutations of the HTML editor and the WYSI[N]WYG editor, but can’t seem to figure out how to end up with nice, clean code examples like you have on the top of this page.

    Any assistance would be most appreciated.

    ast

  25. Nevermind… I got it figured out now. Secret was to disable the WYSI[N]WYG editor in the preferences. I wasn’t posting code that needed to be escaped, so I actually didn’t need the plug-in. However, I’ll keep it for possible future use.

    Cheers,
    ast

  26. Hi there, I have installed this plug, but instead of give me the right resul, appear the code.
    I have wd 2.02 , maybe I have missing something?
    Please help me.
    I Post my code snippets enclosed by …
    but doesn’t work… maybe can confict with some other plugs===??? I don’t know.

    btw greetz from Italy

  27. This is thoroughly frustrating. I have WP2.0 and I’ve installed and activated this plugin. But when I try to create a new post I have to use the WYSIWYG editor and it forces unbalanced html tags (even inside code and pre tags) into self terminated tags. If I use the html editor part it still converts it. E.g. <html> is changed to <html />. I also have the option disabled that corrects non xhtml compliant code. Unfortunately it seems I can’t use the plugin :(

  28. i haven’t tried the plugin on 2.0 onward. and probably it wouldn’t work at all with WYSIWYG editor. try disabling the WYSISYG editor.

  29. Pingback: Harald Dumdey
  30. Hi, I was hoping someone could help me out. I’m trying to get this script working, but everytime i save my post, it keeps changing the structure.
    I’ve disabled “automaticly fix bad xhtml” and “Visual Rich Editor”…
    I need some help… I’m using WordPress 2.0

  31. Nice plugins mas Pri. Thanks \:d/ This is what I have been looking for this whole day. I am going to install and try both yours and Code Snippet.

    But ..ta donlot tapi kok gak bisa yah? then bisa kedonlot tapi cuma 1kb and encrypted, and make my PHPEd Hang :-( [-(\

    Any comments .. CodeSnippet vs Yours ?

  32. Pingback: sansegundo.de
  33. Thanks! You plugin was verry helpfull. I am using is in my website (still in development). But i’am gooing to write a article about this plugin (in dutch) and will refer to you site if you don’t mind.

  34. Thanxs for the plugin but it doesn´t work in my case.
    Please, can you try it with the code

  35. Priyadi, I am planning on modifying this plugin to include some CSS and to include line numbers. Would you be interested in merging this into the official plugin?

  36. pri.. autoescapecode nya rusak ya? aku donlod kok kepotong? jadi gak jalan :(
    *ps: akhirnya aku pake coolcode*
    *nunggu perbaikan punyamu, soalnya kayaknya lebih asik* :)

  37. #114, #115: that’s deliberate :) otherwise some people will put extra whitespace at the end complain here why the script doesn’t work with error message ‘cannot add header, output already sent’ or something like that

  38. I didn´t understand your previous comment about the extra whitespace in the code.

    Should we add the missing “?>” at the end of the the code?

  39. Pingback: StyleYourBlog.net
  40. I seem to have a minor issue with WP 2.2 that I’ve not had a chance to take a look at yet. It seems that the anything inside the tags is being base64 encoded. In addition, any ' \ " etc, are being escaped with \, so ' becomes \'. The tricky bit comes when trying to edit the code, because if you edit an article, it stays base64 encoded, making it impossible to edit.

    Any ideas before I go rummaging around? You can see an example of the slashes here:

    http://jon.netdork.net/2007/05/20/bash-magic-to-save-you-time/

    Thanks

  41. Cool stuff :)

    I am PHP Programmer. I have a requirement from my client that needs to be fixed.

    He have a wordpress-mu (1.2.1) intalles and there are several blog sites are running under it. This is his feedback,

    ” We’ve had issues posting HTML into wordpress. WordPress wants to format the html after we post an article. Even if we only use the “Code” tab, the wordpress system will try to format what was pasted in. Here are some examples of the formatting:
    formats out javascript tags
    adds after each carriage return
    changes — to –

    Please look into creating a plugin that will bypass *all* the formatting when we post an article through the Code tab.”

    Please suggest on this.

    Thanks
    Naveen

  42. Hey, just want to let you know that you’re missing the closing php tag in the download file (?>).

    Also, ‘please’ consider adding basic code colorization =P (without having to compromise other features of course :)

  43. # comment_author_email ) ) {
    # $md5 = md5( $comment->comment_author_email );
    # $default = urlencode( 'http://use.perl.org/images/pix.gif' );
    # echo ";&ltimg style='float: left; padding-top:3px; margin-right: 10px;' src='http://www.gravatar.com/avatar.php?gravatar_id=$md5& size=60& default=$default' alt='' />";
    # }
    # ?>

    supaya gak tembus gimana ya mas??

  44. Well, i try it, ok… this is a big code, and, i don’t know what ar te effects… let see…



    '.__('Read the rest of this entry »',TEMPLATE_DOMAIN).''); ?>







    '.__('Read the rest of this entry »',TEMPLATE_DOMAIN).''); ?>

    '.__('Edit',TEMPLATE_DOMAIN).' : ', '
    '); ?>











      %post_URL%
      %post_excerpt_short%

      ', '5'); ?>

      %post_URL%
      %post_excerpt_short%

      ', '4 21'); ?>



      %post_URL%
      %post_excerpt_short%

      ', '23'); ?>

      %post_URL%
      %post_excerpt_short%

      ', '9 24'); ?>






  45. Thanks pak pri, pluginnya berguna sekali. tapi kenapa di wordpress saya selalu “Left justify” aau rata kiri. spasi atau tabulasi masih otomatis dihilangkan pada saat posting disimpan…

  46. This works great, but since upgrading to WordPress 2.5, I’ve been using the Visual Editor increasingly often, including when posting code. Thankfully, it already escapes ampersands and angle brackets.

    If I use this plugin to protect against “- -” (without the space) getting converted to a long dash or various other WordPress typographical conversions… well, the ampersands and angle brackets are messed up (the ampersands in the escaping provided by the Visual Editor are themselves escaped as ampersands by this plugin, creating a big mess.)

    Any possibility of *not* escaping entities if they are already escaped?

    Without it, it’s basically impossible (or at least exceedingly impractical) to use this plugin while using the Visual Editor.

  47. Hi there,
    Know anyone which plugin to use if I want only a part of the article to be displayed? If someone want to read more there will be a “read more” link…
    On my blog right now is displayed all of article content and I don’t want this…
    I’m talking about the latest 10 articles displayed on the first page of my blog.
    I’m using WordPress.
    Can anyone help?

  48. Thanks for the plugin. It works great.:) I am migrating data from a wiki and it appears that the wikis out of the box do a better job at preserving XML content. Now I just need to figure out how to get the pre code content to display in a pretty box.

  49. Pingback: Beeex.net
  50. Hey mate,
    looks like this doesnt work for my fresh wordpress installation version 3.xx
    i dont get these grey boxes around the code. Is the box style implemented in this plugin?
    when i use the .... , it looks like before with the standard integrated wordpress”code”-view

    any idea?

    take care
    timo

Leave a comment

Your email address will not be published. Required fields are marked *