Code Markup: a WordPress plugin

Sunday, 29 May 2005

Latest version is 1.3, released on 1 March 2008.

Code Markup is a WordPress plugin that makes it easy to include program code samples in your posts. You can even include HTML markup in the code sample; Code Markup magically knows which characters should be displayed as code and which should be rendered as HTML. For example, with Code Markup you can write:

<pre>
<code>
for (int i = 0; i < top; ++i) {
   vector<int> <span style="color:red">judy</span> = mary();
</code>
</pre>

And have it displayed as

for (int i = 0; i < top; ++i) {
   vector<int> judy = mary();

with “judy” in red, just as you would expect. The <span> tag is rendered as normal HTML , but the <int> and i < top are displayed exactly as typed. This is very useful for times when you want to highlight a particular piece of code in your listing.

Code Markup also prevents WordPress from removing backslashes, turning your quotes into curly quotes, rendering decrements (--) into dashes (–), and so on.

Compatibility

Code Markup has been tested successfully with WordPress versions from 1.5 to 2.5.1, and should also work with newer versions as they are released.

In WordPress 2 and above, you’re better off disabling the visual editor in order to have finer control over your post formatting. To do this, go to the administration interface. Select Users, then Your Profile. The checkbox is at the top of the screen.

If you do decide to use the WordPress 2 visual editor, Code Markup works with the following limitations:

  • leading whitespace is trimmed within <pre> elements (this is an editor bug)
  • line breaks are mangled within <pre> elements (this is an editor bug)
  • after you have saved the post, the code does not display correctly (even in HTML view)
  • because the display is wrong, you can’t edit code after it has been saved.

Installation

  1. Download the code-markup.php file (see the end of this article for download location)
  2. Copy code-markup.php into your WordPress plugins directory (wp-content/plugins).
  3. Log in to WordPress Admin. Go to the Plugins page and click Activate for Code Markup.
  4. (Optional but recommended) Go to the Options page and click Writing. Make sure “WordPress should correct invalidly nested XHTML automatically” is not checked. (Otherwise it may do funny things to your code listings.)

How to use

The plugin works by escaping most special HTML tags and characters so they display exactly as typed, but allowing certain tags to be rendered as normal HTML. The default set of allowed tags is the standard formatting tags like em, strong, span and so on. You can control this explicitly, or implicitly by specifying the language of the code block. For example, in a normal code block, <em> will be rendered as emphasised text, but in an HTML code block, <em> will be displayed as <em>.

Here’s how to format your code for Code Markup.

  • Enclose all code inside a <code> block.
  • Include any HTML markup you like in the code, for example to add emphasis to certain sections.
  • Separate <code> blocks should be nested within a <pre> block to preserve whitespace.

If you want to fine-tune how Code Markup treats your code, use the markup and lang attributes on the code tag to specify how Code Markup should handle it.

  • <code> or <code markup="default"> allows common HTML tags to be rendered, and displays everything else exactly as written.
  • <code markup="none"> displays content exactly as written — no markup is rendered.
  • <code markup="all"> renders content as HTML — all markup is rendered.
  • <code markup="em strong a"> treats <em>, <strong> and <a> tags as HTML markup — everything else is displayed exactly as written. You can put whatever tags you like in the markup attribute, separated by spaces. As a special case, you can include the comment tag — this means that HTML comments <!-- like this --> will be “rendered” as normal HTML comments (i.e. not displayed).
  • <code lang="html"> or
    <code lang="xhtml"> displays content exactly as written, the same as <code markup="none">.

The markup attribute overrides the lang attribute.

Examples

Example: Test strings using <code><b>aString</b> < "foo"</code>.
Display: Test strings using aString < "foo".

Example:

<pre>
<code lang="xhtml">
   <p> <!-- paragraph -->
	  <b>What's going on?</b>
   </p>
</code>
</pre>

Display:

   <p> <!-- paragraph -->
	  <b>What's going on?</b>
   </p>

Example:

<pre>
<code>
   <p> <!-- paragraph -->
	  <b>What's going on?</b>
   </p>
</code>
</pre>

Display:

   <p> 
	  What's going on?
   </p>

Example:

<pre>
<code>
for (int i=0; i<5; ++i) {
   <span style="color:red">cout</span> << "smap!" << endl;
}
</code>
</pre>

Display:

for (int i=0; i<5; ++i) {
   cout << "smap!" << endl;
}

Example:

<pre>
<code markup="span">
<a href="<span style="color:green">target-url</span>">Link text</a>
</code>
</pre>

Display:

<a href="target-url">Link text</a>

Bugs

If you want to display the text </code>, <!--more--> or <!--page--> in your code, you have to put them in a <code markup="all"></code> block. If you don’t they will be rendered as HTML, which is not what you want, believe me.

If you find any other problems, please let me know by leaving a comment at the bottom of this page.

Frequently Asked Questions

What is this good for?
The plugin allows you to quickly copy and paste code into your blog, and add HTML markup to it to emphasise certain parts of it. Normally this is not possible without a lot of fiddly manual editing.

What tags are allowed by default?
If the code block has its lang attribute set to html or xhtml, then no markup are allowed: all tags are escaped and will display as typed. Otherwise the following tags are allowed: em strong b i ins del a span as well as <!--comments-->

How do I change the default behaviour?

  • To make the code block render as straight HTML, use <code markup="all">. In this case, make sure that you have typed correct HTML!
  • To make the code block display exactly as typed, use <code markup="none">.
  • To specify which HTML tags should be rendered as HTML, include them in the markup attribute. For example, <code markup="strong em comment">.

Alternatives

There are a few other plugins that do somewhat similar things. Code Markup is simple and useful, but if you feel it’s not quite right for you, you could try looking at these other plugins.

  • Preserve Code Formatting has a slightly more robust untexturizer (it correctly handles a triple dash, for example), but doesn’t allow any markup at all in code blocks.
  • Code Viewer displays code from an external file, so it’s not so good for tiny code snippets. However, it does allow readers to download the code, and it also adds line numbers. But again, no manual markup allowed.
  • Unfancy quote plugin uses the sledgehammer technique to avoid WordPress’s fancification of text: it disables it completely.

There are also a number of syntax highlighting plugins. These make your code look nice, but don’t allow you any manual control of markup. They’re also pretty heavyweight, and some are slightly fiddly to install. But if you want syntax highlighting, try them out.

Please leave a comment if you know of other similar plugins.

Download

You can download code-markup.php or view the source code. The files are hosted externally — if there’s a problem with them you can download a recent version hosted on this site. Don’t forget to check out all the other plugins available here — there’s bound to be one that you will find useful.

I write these WordPress plugins because I enjoy doing it, but it does take up a lot of my time. If you think this plugin is useful, please consider donating some appropriate amount.

Click here to donate using a credit card or PayPal.

Send Bitcoins to address
1542gqyprvQd7gwvtZZ4x25cPeGWVKg45x

Full WordPress plugin list

  • Code Markup — Quickly paste code samples into your posts -- you can even include HTML markup in the code sample.
  • Evermore — Automatically display a short preview of your posts on the home page and other multiple-post pages, along with a link to the full post.
  • FixBack — Ensure trackbacks and pingbacks are sent with the correct link back to your blog.
  • Less — Less is no more. It has been renamed to Seemore and moved to its own Seemore plugin page.
  • Plaintext — Allow your readers to download source files (e.g. PHP, HTML, ASP) as plain text.
  • Safe Title — Use HTML in post titles in the default WordPress theme (or any other theme).
  • Search Meter — Find out what people are searching for on your blog, so you can write what your visitors want to read.
  • Seemore — Change the (more...) link so it jumps to the full post, not just the part after the link.
  • Top Cat — Specify a main category for your posts, and use template tags to display posts differently according to their main category.
Be Sociable, Share!

715 comments

You can leave a comment, or trackback from your own site.

  1. Intriguing articles nearby pharmaceutical and cross-grained stories

  2. Luring articles -away direction and assorted stories

  3. Fascinating articles up analgesic and unconventional stories

  4. The flavour of the month epoch of the hustle—of isolation and purification of compounds, chemical union, and computer-aided slip someone a mickey finn block out—is considered to give birth to begun in the 19th century, thousands of years after intuition and provisional and howler led humans to put one’s trust in that plants, animals, and minerals contained restorative properties.

  5. Engrossing articles erratically medication and in set with stories

  6. Gripping articles recklessly pharmaceutical and assorted stories

  7. Intriguing articles up pharmaceutical and in set with stories

  8. Skype has launched its website-centered client beta to the entire world, after introducing it broadly inside the Usa
    and U.K. previous this four weeks. Skype for Internet also now facilitates Linux
    and Chromebook for immediate messaging connection (no voice
    and video however, individuals need a plug-in installment).

    The expansion from the beta provides help for
    a longer selection of spoken languages to help reinforce that worldwide user friendliness

  9. I didn’t see it with my own eyes but here’s what my friend said: It looked From about 15 ft away, it absolutely looked like an Evo note: it was night time and decent but not perfect lamps in the lot When you did a walk around you could tell it wasn’t an You could see that the bumpers and skirts were just It definitely cost the guy a To a non enthusiast, a beginner, or a distance, this guy could’ve definitely fooled

  10. Nice post. I was checking constantly this blog and
    I am impressed! Very helpful information particularly the last part
    🙂 I care for such info a lot. I was seeking this particular information for a long time.
    Thank you and good luck.

  11. In the past, “best” SEO practices have involved using descriptive anchor texts for internal along with external links.
    Internet search engine optimizers have since found that it
    may be better to target on just one keyword phrase and when determining the anchor text.

    This is specially true when the topic includes a
    keyword that receives a lot of traffic when comparing to other related keywords.

    It is very important to bear in mind that finding good links can be quite a difficult thing to do.
    Therefore, that you don’t want to employ a link with a keyword that is not
    effective. Unfortunately, these types of links can be looked at
    as unnatural by the search engine. The reason being the se views organic websites to be those who include a number of anchor text variations.
    If your website uses the exact same keyword for each of its backlink anchor text, it
    helps it be appear as although link popularity was
    obtained in a unnatural way.

    In order to address this matter, it’s advisable to take advantage
    of Latent Semantic Indexing, or LSI. LSI helps websites get beyond the vocabulary mismatch that develops when human users utilize search engines.
    All things considered, individual words aren’t always reliable as it pertains to creating a meaning for a document.

    Like, a web site that is very relevant to televisions may never actually use the term “TV,” though it means the same as television. With assistance from LSI, the site
    it’s still viewed as a relevant match when a person uses the word TV, even though TV never actually appears
    on the site.

    Exactly the same principles utilized by LSI for search engine keyword results can also be placed on backlinks.
    Although you may have a backlink that does not contain most of your keywords, using a synonym to your primary keyword will still be
    recognized. This way, employing a synonym to your keyword is nearly like giving yourself a “bonus” for
    your main keyword.

    The penalties sites are receiving as a result of unnatural
    backlinks in addition to the use of LSI technology indicates that it is best for
    webmasters to alter the anchor text the utilization using their backlinks.
    What this means is it is way better to vary the keywords by using synonyms rather than utilising the same
    keyword over and over again. Additionally, the same synonym shouldn’t be repeatedly used.

    Rather, webmasters should find and use as much synonyms and variations as possible.
    In this manner, they could obtain great se results placement without obtaining penalties because of their links.

Leave a comment