This article has been retired and will no longer be updated. Caveat emptor!
WP Plugin: Code Viewer
Code Viewer is a WordPress plugin that pulls source code from an external file and displays it, optionally adding a link to download the code directly. The plugin displays the code with proper indentation, line numbers, and automatic long-line wrapping.
When using Code Viewer, you no longer have to worry about typing countless entity references in order to make your code “HTML friendly” or to simulate tabs…it’s all done automatically with PHP and a little CSS. By inserting line numbers on your page, the plugin also eliminates the problem of long, non-breaking lines screwing up your layout. In addition, line numbers make convenient reference points when discussing code samples.
Last, but not least…because you’re pulling the source code from an external file (rather than having it embedded directly in your entry), the same code can be repeated on numerous pages, and you only have to type it in once. This not only saves you time, but when you update the code in the centralized file, all instances of that code will be updated along with it.
Installation
I am no longer maintaining Code Viewer, please see Current Status of the Code Viewer Wordpress Plugin for more details on where to get the latest version.
- Download Code Viewer v1.1
- Open the downloaded file in a text editor and configure the $default_path variable (found on line 12), setting it equal to the absolute path of your code folder
- Save the edited file
- Change the extension of the saved file from .txt to .php
- Upload the changed file into your wp-content/plugins/ directory.
- Activate the plugin on your WP Admin » Plugin Management page by clicking the corresponding “Activate” link under the Action column.
You’ll also want to add some new classes to your CSS that will control the look of the code listing. Everything (with the exception of auto-indention) works just fine without the CSS; but adding it in makes a huge difference on readability. Feel free to change these values to whatever you like, but this is how I have mine set up:
/* ---( CODE VIEWER FORMATTING )------------------------- */
ol.codelist {
border: 1px solid #DDD;
color: #C63;
font-family: "Courier New", Courier, monospace;
line-height: 130%;
padding: 12px 12px 12px 45px;
margin: 1.5em 0;
}
ol.codelist li {
margin: 0;
padding: 1px 2px;
}
ol.codelist li.tab0 { padding-left: 2px; }
ol.codelist li.tab1 { padding-left: 26px; }
ol.codelist li.tab2 { padding-left: 50px; }
ol.codelist li.tab3 { padding-left: 74px; }
ol.codelist li.tab4 { padding-left: 98px; }
ol.codelist li.tab5 { padding-left: 122px; }
ol.codelist li.tab6 { padding-left: 146px; }
ol.codelist li.tab7 { padding-left: 170px; }
ol.codelist li.odd { background-color: #FFF; }
ol.codelist li.even { background-color: #F0F0F0; }
ol.codelist li.sourcelink {
color: #000;
font: 115% Georgia, "Times New Roman", Times, serif;
list-style: none;
margin-left: -32px;
padding-top: .85em;
text-align: center;
}
ol.codelist li code { color: #222; }
Usage
Code Viewer basically searches your entry for a custom XML tag named <viewcode />, that tells the server to look at an external file and parse it line-by-line into an ordered list. It can be placed anywhere a block-level tag is valid, and like any empty element in XHTML, the tag must be properly closed.
To better illustrate its usage, the tag used in this entry (to show the code-viewer.css listing above) was:
<viewcode src="2004/09/code-viewer.css" link="yes" />
Parameters
<viewcode src="URL" link="display" />
- The
srcattribute is required.- "URL" – string – The URL of the code to display. Note that relative paths are in relation to the $default_path variable set during the installation step.
- The
linkattribute is optional.- "display" – string – Should the link to the code be displayed (
"yes"), or not be displayed ("no"). If thelinkattribute is left out of the tag completely, the value defaults to"no".
- "display" – string – Should the link to the code be displayed (
Here are some examples of valid syntax recognized by Code Viewer…note that all of these examples point to the same file (assuming the $default_path variable is set to "https://elasticdog.com/code/"):
<viewcode src="https://elasticdog.com/code/example.txt" link="no" />
<viewcode src="https://elasticdog.com/code/example.txt" />
<viewcode src="/code/example.txt" />
<viewcode src="example.txt" />
Each attribute value must be surrounded with double quotes ("), and not single quotes ('), or the tag will not be recognized.
Version History
- v1.1 (10 Oct 2004) – Fixed blank line detection; no longer confused by whitespace characters.
- v1.01 (30 Sep 2004) – Update to code-viewer.css; fixed inconsistent font sizing.
- v1.0 (26 Sep 2004) – Initial release to the public.
Credits
The idea to use ordered lists in XHTML to present code, originated from Simon Willison’s CSS Numbered Code Listings blog entry. The same idea has been used by other designers, and in particular, a fellow WP plugin author named David House…
Looking at David’s code-snippet system, I fell in love with the idea, but thought his implementation could be improved upon. Code Viewer should be much more efficient in comparison and has the added functionality of optional link inclusion, styling differences for every other line, and better URL & file type support. A big thanks goes out to both David and Simon for their contributions to my latest creation.
