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.
< produces <
> produces >
So in your entry edit window if you type
it will look like this in the actual entry: <MTEntries>
Here are some of the codes that will produce characters and symbols:
- » » right double angle quotes
- « « left double angle quotes
- < < less than sign
- > > greater than sign
- • • bullet
- ♥ or ♥ ♥ black heart
- ∞ ∞ infinity symbol
- — — long dash
- & & ampersand
- " " double quotes
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.
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):
Add a class element like so, directly following the #center and .content sections:
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.
Here is the code that you are quoting.
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:
In your entry, add span class tags around the code you want to display like so:
Using this method, your code would look like the following:
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.
ScriptyGoddess code decoder - bookmarklet that will easily generate code. Only works on Windows machines.