« Trackback XML Files | Main | Using PHP and MT Includes »

Display Code In Entries

This tutorial needs to be updated. It still works, but there are probably more and better ways to do this (including Markdown and Textile) than what has been written about here. ~Elise Mar 1, 2007

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:
ScriptyGoddess code decoder - bookmarklet that will easily generate code. Only works on Windows machines.

Comments (7)

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.

Scott:

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

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/

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/

Thanks VERY much for this... by far the most comprehensive tutorial so far. The pre & code tags didn't work on my latest website (a cycling links directory), but the textarea tags work great. I'm sure the blockquote will work with my css style too!

Cheers!

Post a comment

(If you haven't left a comment here before, your comment may need to be approved before will appear on the entry. Thanks for waiting.)