Inserting Formatted Code into WordPress

A lot of people I know use WordPress.com, including me for this blog. One of the common complaints I hear is that it’s not easy to insert formatted text such as source code or, in my case, snippets from Oracle AWR Reports.

I don’t have a problem with this, because I have developed a way of doing it which is simple and relatively quick. I know that there are probably various plugins or other tools for doing this, but I want a simple method that works with the vanilla version of WordPress. One that allows me to do things like this:

Load Profile              Per Second    Per Transaction   Per Exec   Per Call
~~~~~~~~~~~~         ---------------    --------------- ---------- ----------
      DB Time(s):              197.6                2.8       0.00       0.70
       DB CPU(s):               18.8                0.3       0.00       0.07
       Redo size:    1,477,126,876.3       20,568,059.6
   Logical reads:          896,951.0           12,489.5
   Block changes:          672,039.3            9,357.7
  Physical reads:           15,529.0              216.2
 Physical writes:          166,099.8            2,312.8
      User calls:              282.4                3.9
          Parses:              379.2                5.3
     Hard parses:               25.9                0.4
W/A MB processed:                0.2                0.0
          Logons:                0.0                0.0
        Executes:           71,325.0              993.2
       Rollbacks:                0.0                0.0
    Transactions:               71.8

Maybe you already have a way of doing this, in which case good luck to you. But for anyone who might find it useful, here’s the way I do it…

Step 1

I’m assuming that, like all sane people, you are editing in the “Visual” mode (see tab at the top of the edit box). In the place where you want the formatted text to appear, insert a place marker. Something simple that you can easily find later on – ideally a single string that you can highlight with one double-click of the mouse. I’m going to use “XXX”. It should be a single line on its own. Make sure you insert some more text on the following line, otherwise you will have some trouble later on getting back to normal Paragraph mode; if you don’t know what you want to say in the next line (because you haven’t written that part yet) just insert a word, or even a single letter will do.

When you are ready to insert the formatted text, double click on the place marker to highlight it and then change it from “Paragraph” to “Preformatted” where the red arrow is on this picture:

Step 2

When I’m displaying AWR Reports, source code etc I prefer to indent it as I feel it looks better. You pay the  price slightly because often these code blocks can be quite long (horizontally), so by losing an inch or so of margin on the left you run a greater risk of the horizontal scroll bar appearing… I’m ok with that, but consider this step optional: Click on the indent button:

Step 3

Now you need to switch out of “Visual” mode and into WordPress’s dreaded “Text” mode. Click the tab at the top right of the edit box to go into “text” and then scroll down to look for your easy-to-spot XXX placemarker. Double-click with the mouse to highlight it:

Step 4

Cut and paste the formatted text into the place where the XXX place marker was. It will retain the formatting, as long as you make sure everything you want to display is included between the “pre” and “/pre” markers:

One caveat I need to had here is that if your cut and pasted text contains either the greater than or less than characters (i.e. < and >) you will find they get interpreted as HTML and disapper. To fix this you will need to wait until Step 5 and then manually replace them in the text.

Step 5

Switch back to “Visual” mode using the tab at the top right of the edit box. Everything should look exactly as you inserted it:

Replace any < or > characters that went missing at this point. If the inserted text was something important like a SQL or shell script it’s probably worth cut and pasting it back into a file and running a diff between it and the original.

Step 6?

There doesn’t have to be a step 6 – in the example I used at the top of this page there wasn’t. But if you now want to play around with parts of your inserted text, such as by changing the colour of sections or using highlights, just do it in the “Visual” mode and it will automatically insert the correct tags without losing you formatting. Mess around, see if you can break it. So far for me it’s never failed.

Conclusion

So that’s my method. There may be easier ways, there may be plugins which make things look prettier, but I’m happy with this. If it works for you to then consider it my pleasure to pass this info on – and if you find another WordPress user looking down in the dumps, why not pass it on to them too?

Update

WordPress has the ability to format source code, a feature which I now use for any shells scripts or SQL scripts I post here. One “language” option is also text, but I still don’t think AWR reports look as good using this source code method as they do using my set of steps above. Personal tastes vary though, so check it out and see what you think.