Learning Movable Type: Display Code In Entries


This tutorial needs to be updated. It still works, but there are probably more and better ways to do this 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.


Posted by Elise Bauer on June 3, 2004 7:47 PM to Learning Movable Type http://www.learningmovabletype.com/