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 `
* 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
sepertinya Priyadi “nyepet” comments/postingan gw nih :)>-
hehe.. thanks for the info Om Pri :x
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:
Okay, I’m officially killing “my” plugin, pointing people here, and using your’s from now on. It’s WAY better. :D
wah … ada plugin baru yach ??
pasang …
:-“
:-? nice..
asyik
ever heard of geshi plugin? It will even colorize your code :D ..
See some sample here ;)
Mungkin maksudnya
#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.
#10: fixed!
kaka pri unstoppable nih yeee :d
This presents problems when in
codetags:'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. :)
Example: http://www.viper007bond.com/wordpress-plugins/short-urls/
Note that that post is still using
<and stuff instead of<.hehe.. pri rajin&kreatip ya… :)
*pasang aaah..*
saya lebih suka pakai codeviewer yang di beri efek js jadinya seluruh kode dis embunyikan hanya sebuah baris text penunjuk kode :
bagus , sangat bagus :)
udah download dan pasang, tapi belum dicobain buat ngisi blog yang pake tag code.
#11
Semantic colorization? Wow, that’d be cool. AFAIK, geshi doesn’t suffer much of the listed problem (no manual escaping of <, &, or >). 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
Berhubung kayaknya engga bakalan ngisi entry yang di dalemnya ada kode… ga usah ikutan install ah :d
#14 #15: uh, I can’t say I understand. could you post an example of a text, and how it is supposed to be rendered?
#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.
I too am officially killing my plugin. Thanks for doing a much better job than me :D
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?
#24: karena terlalu pelan di komputer lama :)
nice & neat tutorial..
priyadi is a code master :)
hidup priyadi :)>-
tes lagi ..
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?
Yeah, there seems to be some backward compatibilty issues:
http://www.viper007bond.com/wordpress-plugins/short-urls/#comment-74
#31: hi, i believe you hit a last minute bug which i corrected a few moment after i uploaded it. try redownloading the plugin.
All fixed. The “Force Word Wrapping” plugin I was using screwed it up. :)
Hmm, I have multi-lined code in a page content and it’s not replacing the line breaks with
http://www.viper007bond.com/wordpress-plugins/quote-comment/
#34: you should use
for multiline code. it is more semantically correct.
What is the license?
Why don’t you host this on http://dev.wp-plugins.org/ ?
If you do this we can use svn to keep up to date.
Thanks for the work.
#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.
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?
#39: that’s deliberate, otherwise we wouldn’t be able to insert literal
<or>, for example, within HTML/XML code snippetsWell 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.
#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’
Terlau teknis untuk dimengerti. :(
Mungkin perlu training lagi nich…..;)
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…
#43: memang ‘pasar’nya untuk orang teknis pak :) orang non teknis rasanya gak punya kebutuhan untuk menulis petikan kode
#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.
I just installed it after downloading the txt file above and my site is totally screwed. Can’t get back into admin either!
how do i wrap it???
http://nunuh.com/extra/smilies-in-comments/
im posting this coz my hostees keep on bugging on how to post controlled smilies in comment page..
HOW DO I WRAP THE LINES??
never mind.. used css to wrap it.
:d good job@!
Thanks for this great plugin.
I hope you plan on updating it for WordPress 2.0!
Thank you for this time saver! Keep up the good work. \:d/
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
Sweet looking plugin. Appears to be just what I’ve been looking for.
But.
Does it work with the new WP2.0 editor?
Thank you very much for this great plugin! Very effective :)
This does not seem to work with 2.0… any plans on updating?
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 HereLine 2
</code></div>
Check out my site to see it in action.
Stucco
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.
Not working for me at all :( …I assume it’s not WP2 compatible? Any plans on fixing that?
super! more thanks!
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. ;)
Thanks – works a treat!
Yep, it does break the validness of the page. :(
This is my new theme that I’m working on and the validation results. The error is a result of this plugin.
Any idea how I could go about fixing that? :-?
#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.
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.
#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 :(.
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 = "";
Validates and still shows up fine from what I can tell. :D
tried using the plugin in WP 2.0.1, it wouldn’t come out right at all.. no gray background
#84: you need to define a style for your code blocks before it appears with gray background
oh, ok, sorry, kinda new to this :d
where do i place the style codes?
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
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
Hi there this plug is erally what I need it !!!!
Infinite thanks. Greetz.:)>-
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
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 :(
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.
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
Just wanted to thank you for the very useful plugin!
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 ?
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.
Thank you!
Works like a charm! Very usefull plugin.
Thanxs for the plugin but it doesn´t work in my case.
Please, can you try it with the code
Thanks for the script. It was very useful.
I have modified it to allow the use of textarea tags to use it with my source code syntax highlighter.
You can get the modified version if you want from http://blog.nkadesign.com/
test
a code
for(int i=0;i<100;i++) {
"string";
haha
}
Thanks for this. Working fine.
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?
This looks like a very nice plugin and just what I am looking for. But I am using WP2, does it work in WP2?
for test ^^
for(int i=0;i<100;i++) {"string";
haha
}
pri.. autoescapecode nya rusak ya? aku donlod kok kepotong? jadi gak jalan :(
*ps: akhirnya aku pake coolcode*
*nunggu perbaikan punyamu, soalnya kayaknya lebih asik* :)
i test this plugin in my testblog :)
I’ll install sooner this Plugin on my WordPress Blog.
Thanks a lot! :)>-
Thanks a lot for your plugin – searched long time for something like this.:)
I will review it on my site.
cheers,
Felix
did you forget to include the closing php tag in your .txt file?
for example:
?>#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
Nice, it really help me! :)
I just wanted to tell you:
The plugin kills itself if you do not user the WYSIWYG-Editor! See german forum: http://forum.wordpress-deutschland.org/showthread.php?t=15675
Hi! I’d like to know if it will work fine with WordPress 2.1…
Tks!
It doesn’t seems to be working with WordPress 2.1… :(
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?
Thanks for the great plugin
Thanks! It works fine for me with WordPress 2.1
I use it on this page. :d/
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
Thanks for plugin, I’m using it in my blog.
http://airman.myphotos.cc/2007/05/23/verifikaciya-wordpressu-google/
Regards
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
This is a great plugin. This type of is priceless for the new kid on the block.
Thanks
Vic
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 :)
would like to test long line of code.
http://thisisatestlink.com/testtesttest/english/test/wordpress/Have been using your code for about a year. Works well!
check it out at:
http://news.smartlabsoftware.com/
# comment_author_email ) ) {# $md5 = md5( $comment->comment_author_email );
# $default = urlencode( 'http://use.perl.org/images/pix.gif' );
# echo ";<img 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??
LHA? disini ada scrollernya yach? gimana buatnya mas? terus kok ada tanda #-nya? Ajarin duongk?? :)
Just testing.
Lets see if it works fine
for (int i = 0; i < top; ++i) { vector
Well, i try it, ok… this is a big code, and, i don’t know what ar te effects… let see…
'.__('Edit',TEMPLATE_DOMAIN).' : ', '
'); ?>
:
:
Tags : ', '', ', '); ?>
%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'); ?>
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…
Thanks for a nice plugin. However, I have made some small modifications to make it work with jQuery Chili instead of Geshi. So if client side syntax coloring is needed my mod could be interesting: link to modification
Thank you very Much! It also works with wp 2.5!
very very good thanks
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.
This plugin actually does nothing at all, except turn any code blocks in your blog into base64 jibberish. Lovely.
:)Thanks for plugin, I’m using it in my blog.
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?
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.
Thank you very much for this plugin!
pluginsnya bekerja!
tapi supaya di highlight (ada backgroundnya gitu) ada caranya gak ya?
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”-viewany idea?
take care
timo
Great Plugin, thanks!
I tried this, but it shows extended space below and also the tags used for the code section. So not working in that way.