WP Plugin: Dirty Code

Someone else took the name “Quick Code” and it was causing issues, so I have renamed the Quick Code plugin. Since this plugin is quick and dirty, I decided on the name “Dirty Code.” This name also pays homage to one of my favorite movies of all time, Dirty Love and to the way I like my martinis =). This code is backwards compatible and will still work with all <quickcode></quickcode> tags.
Plugin Name: Dirty Code
Version: 1.1
Plugin URI: http://blog.netnerds.net/dirtycode/
Author: Chrissy LeMaire
Works With: WordPress 2.3-3.0
Last Updated: 09/30/09
Download: [ zip ]
Description: Transforms any code (SQL, CSS, PHP, ASP, etc) between <dirtycode> and </dirtycode> into a good looking div which can disappear or reappear with a click.
=>>Thanks to NetLobo for the div hiding code and coffee2code for a portion of the formatting code.<<=

1. Dirty Code

function includeit($text)


  $temptext=" ".$text;

      if ((strpos($temptext,":includeit:"))>0)

        return trim($text);

add_filter('the_content', 'includeit',9);

2. You Can Also Have a Custom Title

                                         a.dirtycode {
                                        padding-left: 20px;
                                        background: url('dirtycode.gif') no-repeat;
                                code {
                                        font-family: tahoma, verdana, arial;
                                        font-size: 10px;
                                        white-space: nowrap;


And here it’s already busted out.
1. Download and extract the dirtycode.zip into your /wp-content/plugins/ directory. There are several ways to do this, here is one option:
open a shell, cd into your /wp-content/plugins/ directory and execute the following command(s):

curl -o dirtycode.zip http://blog.netnerds.net/code/dirtycode.zip && unzip dirtycode.zip && rm dirtycode.zip
2. Activate the plugin from your WordPress admin ‘Plugins’ page.
3. Place your code between the <dirtycode>  tag. You can do this three ways:
a. <dirtycode>Some code</dirtycode>
b. <dirtycode:Place Custom Title Here>Some code</dirtycode>
c. <dirtycode:noclick>Some code</dirtycode>
d. In the event that your WordPress editor tears out <dirtycode></dirtycode>, can also use brackets instead of carrots. ie. [dirtycode]Some code[/dirtycode].
What It Does:
1. dirtycode_add_options_page() adds a Dirty Code section to your Admin->Options page. Use this page to set whether you’d like your code to be auto-expanded in Single Posts. It is set to Yes by default.
2. pretty_code_dirty() replaces the <dirtycode> text with pretty divs. It then extracts the title, if any, and adds it as the text to the hyperlink. If the parsed title is “noclick”, it replaces the pretty divs with differnet divs to auto-expand the block of code.
3. pretty_code_converter_jscss() adds the Javascript and CSS links to the head. The code is not embedded. This is important — search engines may penalize “hidden” code and may not process it if you include the CSS within the head of the main page. Just keep it linked and you should be fine.
Optional Customizations:
1. Default link text. It is currently “Dirty Code.” Change this variable: $codeTitle=”Dirty Code”;
2. In the CSS section, you can change the background color and default text.
3. You can also change the type of CSS overflow style you’d like. Currently, it is set only to scroll horizontally (when necessary)
1. If my code is silly looking its because I’m not a native PHP coder. I just wrote up the code in ASP and used asp2php.exe to transform.
2. This script works with Firefox and IE. The ordering of the CSS elements overflow-y and overflow is important for cross-browser compatibility. Leave it as is.
1. I’ve only noticed one — do not use the dirtycode tag as the very first thing in your post or your formatting will mess up.
Release Log:
* 26 Sept 2009 : v1.0 – Change the name from Quick Code to Dirty Code and made the plugin 2.8.4 (maybe less, maybe more) compliant.
* 13 Dec 2006 : v0.95 – Added a value for overflow-x to stop IE’s truncation of the code.
* 18 May 2006 : v0.94 – Added image to auto expanded single links. Removed titles in single links if title is “noclick” or “Dirty Code”.
* 15 May 2006 : v0.93 – Added support for brackets for people who want to use the built-in WordPress editor
* 11 May 2006 : v0.92 – Added title and line break to auto-expanded code in single posts.
* 28 Apr 2006 : v0.91 – Added Control Panel support to auto-expand code in single posts. Consolidated all the files into one directory.
* 20 Apr 2006 : v0.9 – Released to the public
Copyright & Disclaimer:
Copyright (c) 2006 by Chrissy LeMaire
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
39 comments on “WP Plugin: Dirty Code
  1. Sarit says:

    Can I write PHP code with this as well? Will it be displayed correctly?

  2. Chrissy says:

    Yeah totally, any code will work. I’ll update the samples to show a more diverse selection of code.

  3. Wilson says:

    I installed both plugins but i still can’t manage to display code properly especially the code.

    Any idea? I’m using WPMU.

  4. Chrissy says:

    Hey wilson,
    Try using a desktop client like w.bloggar to post your posts that contain code. I believe the default wordpress post editor strips tags like nobody’s business (at least it did for me)

  5. Sophonax says:

    How do I make the titles such as “Quick Code”, “noclick”, etc. disappear from the site when the quickcode has been parsed and the site is being viewed? It appears above the blue DIV.

  6. Chrissy says:

    Hey Sophonax,
    Thanks for catching that. I updated the plugin so go ahead and download it again. I made “noclick” and “Quick Code” dissappear on auto-expanded entries and for other titles, I left them in and also added the quickcode image.

  7. Sophonax says:

    Awesome. Thank you very much. :D

    How about a little check feature where you can decide if you want the “Quick Code” and the “noclick” to be there or not?

    Anyway. Thank you for your reply. ^-^

  8. Wilson says:

    Hi Chrissy,
    I’m having some problem at my site. On the main and single page, the plugin works fine. On the category and archive page, it doesn’t show as what I wanted. I had some modification to add a textarea to it.

    Its it because of my theme layout or I changed something to the code to make it show that way?


  9. Sophonax says:

    Hello Crissy,
    I’m sorry for bothering you again, but I have another question.

    Since I am no good when it comes to PHP coding(I’m still a rookie), is there any way I can use this script on a page used outside WP? I do understand there will be some re-coding to do, but is it too much work?

  10. 虚拟主机 says:

    Awesome. Thank you very much
    I’m using WPMU

  11. Sergio Pinna says:

    Ok in browsers: Opera and Firefox (i see it in my own computer). But not in Internet Explorer. May you fix it?

    P.S. i’m sorry for my english.

  12. Chrissy says:

    Hey Sergio,
    Show me an example.. it works for me in IE.

  13. WaltDe says:

    Keep up the great work on your blog. Best wishes WaltDe

  14. Rolandow says:

    The quickcode does work when I am logged in as admin, but it doesn’t work when it’s used by Authors.

    How can I fix this?

  15. Chrissy says:

    Hey Rolandow,
    That’s a great question.. I have no idea at this time. I’ll check into it but it will be awhile before I can get to it. I’ll email you once I know.

  16. Micheal says:

    Just wondering if anyone could help. I did something stupid and started my blog using a numerical archive system, and now I&#39;d like to change it so that the post title is part of the URL for SEO reasons. Is there any WordPress plugins that anyone knows of that could switch it without sending Googlers to invalid pages? Maybe some sort of redirector to the correct page?


  17. Andy Wibbels says:

    OMG. She does plugins too? I’m in love.

  18. Shiner_Man says:

    Great plugin! I was pulling my hair out all morning trying to put code into a post. This is simple and to the point.

  19. joey kayley says:

    I really like your blog. I

  20. Dan says:

    When using WordPress puts a space before :noclick every time I save.

  21. Chrissy says:

    I’m surprised it doesn’t mangle it even worse than that. I’ve totall given up using the built-in editor. I use w.bloggar now for all postings.. saves time and works perfect with quickcode.

  22. alank says:

    If you uncheck use “Use the visual rich editor when writing” under WordPress users &gt; your profile, you shouldn’t have any problem with tags and attributes being stripped away. The tinyMCE rte environment is rather hostile to those concerned with preserving their own tags and attributes. I’ve found that even if you try to prevent ‘clean-up’ in this environment by setting the cleanup option to false — cleanup : false — the rte will become even more insubordinate and proceed as if this command didn’t exist! I’m mean, blimey! Call cheekyMCE!

  23. alank says:

    P.S., You can prevent the appearance of the emply scrollbar at the bottom of the box (at least in Firefox, Mac/Win), if you stick the following in the quickcode.css file.

    *html div.quickcode



    This goes underneath the definition of the div class in each instance, the other being div.quickcodenoclick.

  24. Simon John says:

    Just upgraded to WordPress 2.1 and QuickCode 0.95 works perfectly, for various examples see here:


  25. Simon John says:

    the above scrollbar fix doesn’t work for me, wordpress 2.1, quickcode 0.95, firefox linux

  26. alank says:

    I went here, Simon, and did not see any evidence that the fix was added. You need to place it after each definition in question.

  27. Simon John says:

    yeah i removed the “fix” as it prevented the scrollbars even when they were needed, such as the first bit of code here.

    i’ve temporarily re-enabled it, but don’t like it much.

    is the “o\verflow-x:hidden;” supposed to have the escape character, although it makes no difference it seems, i’ve removed it.

    and i can only get it to work AT ALL by removing the “*html” bit.

    i’m sure this used to all work in an earlier version without the fix and with scrollbars when needed….

  28. trimit says:

    Note: This may be an issue with my theme or browser, but I notice that if I have any trailing spaces before a carriage return, my code’s font becomes large and the scrollbars no longer work. To get around this, I use Ultraedit to replace ” ^p” with “^p” until I receive the message that the search string was not found.

  29. alank says:

    I just checked for your implementation of the fix and got the 404 page.

    You’ve seemed to missed the point of my fix. It’s specific for IE, and is ignored by Firefox, etc. By removing the *html bit, you render a redundancy to the original fix, making it superfluous.

    As for the o\verflow-x:hidden bit, it is not required. I don’t like the horizontal scrollbars at all. If your code overflows then you should rewrite it so that it doesn’t. The escape character, btw, is to keep IE from recognizing this particular definition.

  30. Johnny says:

    Was anyone able to get quickcode to work with scribefire???

  31. Nguyên Vũ says:

    Your plugin in not support for HTML code. :(

  32. Andy60 says:

    thank u for this pretty plugin..ciao ..andy(rome)

  33. skiper says:

    Plugins is now activated on my site thanks netnerds.

  34. Wessley says:

    Thanks for the plugin, it really is great. I’m having one problem however, everytime I try to write ampersands (&#38;’s) in a quickcode block, no matter how I put it, with its entity name or just as a plain ampersand it always comes up displaying its entity name.

    Any ideas?

    Thanks again!

  35. Gijet says:

    Thanks alot for this great plugins, i’ve installed and use it. Surely, i dislike the javascript the drop down function (after clicking the image) to displaying the code. Please tell me how to remove the javacript/drop down function so that the code between and tag automatically can be displayed without clicking the little image of this plugins.


  36. Gijet says:

    Thanks alot for your comment, espacially, your guidance on my blog.


  37. Yup, I can’t put my html syntak for example ^a href=”ymsgr:sendIM?dhyar_02″^^img src=’online.jpg’ border=0 alt=I’M Online/^^/a^. Are you have solution for this?

  38. Michael says:

    Does it work with WordPress 2.3 too?

  39. SoulSmasher says:

    yes, it works great with wp 2.3 :)

27 Pings/Trackbacks for "WP Plugin: Dirty Code"
  1. [...]   QuickCode,便于输出SQL, CSS, PHP, ASP等代码,好像不支持高亮,不过一般使用足够了。 code [...]

  2. [...] I&#8217;m currently going with the combination of Quickcode and Preserve Code Formatting. [...]

  3. [...] Quick Code: http://blog.netnerds.net/quickcode 高亮显示各种代码,CSS,html&#8230;.等等,迟早会有用。 [...]

  4. [...] 终于在Chrissy的blog找到这个Quick Code插件。经过一番周折总算安装成功,现在只要在代码前加上一个QuickCode的tag就能轻松搞定,并且高亮代码。看看我这里的效果,是不是也有点专业水准的感觉啊。^_^ 安装要点: [...]

  5. [...] etc&#8230; It helps if your code is one or two lines. For larger LOC&#8217;s, you would prefer some kind of plugin which does this neat and quick. For that you would have to install some code manage plugins such as : # Code Filter WordPress Plugin – Auto-converts &lt; and &gt; inside of &lt;code&gt; # Coffee2code&#8217;s Preserve Code Formatting WordPress Plugin # QuickCode WordPress Plugin [...]

  6. [...] If you are using WordPress and you are posting code, what plugin are you using? I&#8217;ve just tried quickcode, but it strips all of the formatting out of the code and sets all of the lines flush left. I&#8217;ve also tried preserve-code-formatting, but got the same results. If anyone can help, I&#8217;d greatly appreciate it! [...]

  7. [...] Luckily, I find this cool QuickCode, it shows code some ways. it adapt my needs. [...]

  8. [...] I was impressed by this Simple Code page, and was just about to test the plugin version, when I stumbled across Chrissy&#8217;s Quick Code. [...]

  9. [...] Once that was in, I couldn&#8217;t stand the code formatting issue so I went ahead and installed the best plugin I could find in under 5 minutes. If you like it you can find it here http://blog.netnerds.net/quickcode/ [...]

  10. [...] your program code in a WordPress blog post, use the quickcode tag once you have installed the QuickCode plugin for your [...]

  11. [...] last I found the WordPress Plugin that I am looking for, it is called quickcode plugin by Chrissy LeMaire of NetNerds.net I will use this plugin to my new Friendster Themes Layout [...]

  12. [...] just like to say that Chrissy LeMaire&#8217;s QuickCode kicks major ass. No more HTML entities for me, no sir! All my code&#8217;s going in little tiny [...]

  13. [...] of coffee2code&#8217;s Preserve Code Formatting as well as installing the Quickcode plugin (from NetNerds.com). I followed their tutorial to get it setup and I have to say that I am indeed happy with test [...]

  14. [...] Analog-To-Digital conversion, Interrupts and PWM Starting with this tutorial, I will be using Quickcode to hide certain sections to make the tutorials a little cleaner. These sections will be [...]

  15. [...] into my post and make it actually look like code. I found a nifty little WordPress plugin called QuickCode. In oreder to test it I thought I would post the code I used to make the contact form w/ FormMail. [...]

  16. [...] installed a plugin to help write code in my posts called Quickcode. To test it I have posted the coding I used to create a form for use with [...]

  17. [...] per creare le sezioni di codice che uso qui su itcoffee.net che può andare a sostituire il plugin Quickcode nel caso non abbiate bisogno di quei “mostra/nascondi codice” che fornisce quel [...]

  18. [...] Il ne reste plus qu’à coller le code entre deux balises spécifiques et le tour est joué. QuickCode est simple à mettre en place et personnalisable grâce à sa feuille de [...]

  19. [...] Ever since we started this site I have been struggling with posting code snipets into WordPress blog posts. First I was attempting to use the <pre> and <code> tags but they would blow out the side of my Mandingo theme with two columns. I would then try to go through the code and break the lines at the right places trying to do the formating myself… no a brilliant idea. Justin whom also posts on this site suggested Markdown which works great. I even put some effort into learning it and don’t mind using it at all. I installed the Text Control plugin and replaced its markdown.php with Markdown Extras markdown.php file which worked like a charm. My problem was that I was still blowing out the side of my theme. After a fairly long search I found a plugin that I did not find on WordPress.org but directly on the developers site called QuickCode which you can locate here.  [...]

  20. [...] QuickCode : ce plugin transforme n’importe quel code (SQL, CSS, PHP, ASP, etc) placé entre des balises <quickcode> et </quickcode> en une jolie div qui peut apparaitre et disparaitre en un clic. [...]

  21. [...] information about QuickCode is located here. The QuickCode application has not been updated since 12-13-2006 however it still works as expected [...]

  22. [...] like me you use Quick Code, make the changes in quickcode.css in your quick codes subdirectory in plugins. You will have to [...]

  23. [...] flaming for this… :p) – however I need to add some code to the post, using my shiny new DirtyCode plugin. So I switch over to the HTML editor, add my dirtycode tags, and wrap my code, all nicely [...]

  24. [...] Download plugin from here – ‘Dirtycode’ plugin. 2. Upload it to your ‘wp-content/plugins’. 3. Activate it from your admin [...]

Leave a Reply

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


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">