June 03, 2004

Display Code In Entries

Updated April 30, 2005

Once in a while you might just want to show actual code - HTML, PHP, or Javascript - in an entry you make in Movable Type. For example, say I want to show the A HREF tag and code to get to elise.com. It looks like this:

<a href="http://www.elise.com">elise.com</a>

However, if I simply type that code in while I'm writing the entry, the resulting page will not show the tags and code, but the actual link: elise.com.

So how do you display code in entries? There are several methods:

1. Manually write out the symbol equivalents of your code.
If all you want to do is write a short tag, the easiest way may be to write out the < and the > characters in a way that the browser interprets them as characters, not code.

&lt; produces <

and

&gt; produces >


So in your entry edit window if you type

&lt;MTEntries&gt;

it will look like this in the actual entry: <MTEntries>

Here are some of the codes that will produce characters and symbols:

&raquo;     »      right double angle quotes
&laquo;     «       left double angle quotes
&lt;     <      less than sign
&gt;     >      greater than sign
&bull;     •      bullet
&#9829;     or     &hearts;      ♥      black heart
&#8734;    ∞      infinity symbol
&mdash;    —      long dash
&amp;    &      ampersand
&quot;    "      double quotes
Table of ascii characters and symbols - More HTML codes.


2. SimpleCode HTML Encoder.
If you have a longer piece of code to display, put it through the SimpleCode HTML Encoder . The encoder will display the code you can copy and paste into your entry. Another HTML Encoder is available here.


3. The text area tag.
You can put code into a scrollable text box, which can be a practical way of displaying long bits of code.

To do this, place your code between opening and a closing textarea tags.

<textarea cols="60" name="text" rows="10"> Put your code here</textarea>

Adjust the column width and rows to the text box area size you want. A weird twist on this method is that you have to set your entry's Text Formating to "none", otherwise all of the line break tags will show up in your code in the text box. By doing this of course, you then have to add line break tags <br /> at the end of every paragraph in your entry outside of the text box. So this method can be a bit tedious, but at least you don't have to install a plugin.


4. Using blockquotes.
You may want to highlight or set apart your code using the <blockquote> tag. You can use the blockquote tag as is, which will indent the text, or you can add stylized elements to it like a border or a background color. To do this you need to add a blockquote class in your stylesheet underneath the center ID and content class. In the MT3 default stylesheets find the following equivalent block of code (this is from the Independence style):

#center {
float: left;
width: 500px;
overflow: hidden;
}

.content {
padding: 15px 15px 5px 15px;
background-color: #FFFFFF;
color: #666666;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: small;
}

Add a class element like so, directly following the #center and .content sections:

.content blockquote {
padding: 10px 10px 10px 10px;
border: solid 1px #cccccc;
background-color: #FFFFFF;
}

Then in your Edit Entry window, put the <blockquote> tag before your (encoded) code and the </blockquote> at the end of the code section you wish to highlight. Make sure there is an empty line above the start of the blockquote tag, or the resulting html will not be valid XHTML. For example:

Here is the end of the paragraph above.

<blockquote>
Here is the code that you are quoting.
</blockquote>

Here is the beginning of the new paragraph.


5. Creating a new class just for code

You can create a new class in your style sheet just to handle code. Often you want to display code in a monotype font so that you can show every space as a separate character. Here's an example of a class to handle this:

.message {
font-family: Courier New,Courier,monotype;
font-weight: bold;
font-size: 11px;
padding: 10px 10px 10px 10px;
background-color: #E8F2FB;
border: solid 1px #CADFEF;
}

In your entry, add span class tags around the code you want to display like so:

<span class="message">Your code would go here.</span>

Using this method, your code would look like the following:


Here's an example of code that is displayed using a special class


Note that you still need to encode your code for it to be displayed properly.


6. Use the <pre> and <code> tags.

Wrapping your code with code tags - <code> </code> will produce display code that looks like so:

This is what your code looks like when placed within <code> and </code> tags

Adding the <pre> tag will display the code without wrapping the text. So your code using the pre and code tags together - <pre><code> and </code></pre> - would look like this:

This is what your code looks like when placed with in <pre><code> and </code></pre> tags.

Notice how the page's container cuts off the code. You also still need to encode your code before putting it between the pre and code tags.


Additional Links:
MT Forums support thread on this subject
Another MT Forum Support thread
Code Beautifier plugin
Quickcode Plugin - a plugin for encoding code, but rather buggy with some browsers.
ScriptyGoddess code decoder - bookmarklet that will easily generate code. Only works on Windows machines.


Has this tutorial been helpful? Please consider linking to Learning Movable Type at http://learningmovabletype.com/ . Thanks!

Trackback

If you would like to send a trackback
please use the following URL: http://learningmovabletype.com/cgi-bin/mt32/mt-tb.cgi/158

Comments

Hi!
I think an excelent way is using CodeBeautifier

http://mt-plugins.org/archives/entry/codebeautifier.php

When using the Textarea method without encoding the tags to their HTML version, some tags may cause the page to choke (especially in older browsers). Particularly if the code you are pasting has any form tags in it, you probably are better off using one of the other methods. :)

MOliver - thanks for the suggestion, I've added it to the links above.

Kristine - thanks for the clarification regarding Textarea. Good to know!

Actually, there is yet another way, which may be even simpler than many of those listed above :)

For a long time, the HTML language has provided the <xmp> tag for showing, well, examples of mark-up which would otherwise be rendered. Thus, all you really need to do is wrap your mark-up in xmp tags <xmp>like this - <a href="whatever">this link will not be a link</a> ;)</xmp>, and the browsers will show it verbatim instead of rendering it. And yes, this works for scripts, too - no self-respecting browser should ever execute any <script> code when it is within an xmp block.

Still, thanks for the other suggestions - I didn't know about most of them!

Oh... I just noticed that you also talk about PHP code. Of course, wrapping <?...?> in 'xmp' tags will not display it literally, since 'xmp' is processed by the client. The server will still happily execute the code and then pass its output within the 'xmp' tags... not exactly the purpose of the whole exercise.

Still, 'xmp' works just fine for client-side mark-up and code like HTML and JavaScript.

Another great plugin for formatting MovableType entries is Markdown. It basically lets you format your entire entry without having to use HTML tags, instead using simple techniques that allows your text to be readable as you type. For example, you can use _underscores_ or *asterisks* to emphasise words. Code fragments can be included in `backticks` or, if in whole blocks, by indenting with at least four spaces.

http://daringfireball.net/projects/markdown

Excellent thread. I found a combination of the WordPress Encoder Widget (Elise's #2 solution above) and the <code> tag work wonders for displaying snippets of code.

Yeah I've started to use tags and set styles for them to look similar to the blockquote except not have the double quote graphics (the reason why I didn't enclose code in blockquote)

Yet another excellent plugin for formatting MT entries is Brad Choate's MT-Textile.

http://bradchoate.com/mt-plugins/textile

With that plugin, you can use the '@' character to use the <code> tag.

Hmmm, I thought Brad's entry was more descriptive than it was, so let me elaborate a bit more on MT-Textile.

Anyway, Textile was designed by Dean Allen as a shorthand to generate valid HTML. For example, you can use _underscore_ to use the <em> tag and *asterisks* for the <strong> tag (typically italicized and bolded, respectively, but remember the <i> and <b> tags are not valid HTML). To do a link, you do "Text to display":http://www.url.com. There's also shortcuts for blockquotes, tables, images, lists, etc. The latest 2.0 version handles nesting pretty well. And it works well with John Gruber's SmartyPants (curly quotes and em-dashes) as well as with Sean Voisin's CodeBeautifier that others have mentioned (but I myself haven't tried).

SmartyPants:
http://daringfireball.net/projects/smartypants/
CodeBeautifier:
http://voisen.org/archives/projects/000239.php

Here's Dean's site on Textile:
http://www.textism.com/tools/textile/

It has some documentation, but is mostly a converter you can play with. Note, if you aren't confident enough installing MT plugins, you can instead just paste your Textile-formatted posts in the converter and and then copy and paste the output into your MT post window. Brad's MT-Textile plugin simply runs a post's contents through Textile before publishing it, saving you this step.

It does take some time to learn the syntax, but it's a tremendous timesaver once you do (plus it makes it easier to read and edit a raw post). And Textile will leave regular HTML tags intact, so you don't have to learn all of the shorthand syntax at once, making the learning curve easier.

It looks like John Gruber's Markdown plugin is pretty similar (albeit with different syntax), but I'd never heard of that one until I saw Scott's comment (although I do use Gruber's SmartyPants plugin). So I don't know how they compare.

Anyway, I hope that helps!

You can also check out Brad's MT-Textile manual:
http://bradchoate.com/mt/docs/mtmanual_textile2.html

As well as my own blog post on MT-Textile and SmartyPants:
http://fling93.com/blog/archives/blogging/2004/mttextile_and_smartypants.html

BTW you might want to update the link to the "new" SG decode it bookmarklet (<start plug>also the one I thrown into Quicktags <end plug>) found http://www.scriptygoddess.com/archives/2004/06/08/mozilla-and-ie-decoder/

Comments are now closed for this entry.


Email to a friend

Email this article to:


Your email address:


Message (optional):