WordPress Code Inclusion (look for things to improve)
I think one of the things that slows some of us down most now and then, is the drive to improve on the way things are done. That’s probably why starting something new is tiresome, since there is so much to improve upon, in turn slowing progress itself. If you do not carefully state priorities, this kind of backtrack improvement can quickly lead you off track, and you’ll be improving things you never knew needed improvement in the first place, and you probably can’t remember why you are doing what you are doing anyway. Luckily “look for things to improve” is not our only mantra :), “don’t do things yourself, others can do better” is another one of my favourites, and not only because I liked the Dragon Prince series.
But look here, I’m getting side-tracked myself, the point is that looking at my earlier post, I could see straight away that I was going to need to improve on source code postings. I wanted a few things from my source-code-post-mechanism:
- provide source code in a readable format (keep the pretty printing)
- provide linenumbers that will disappear when you copy & paste the code
- not necessarily break formatting (wrap lines etc)
- provide long listings inline, with scrollbars if needed
- allow sources to be downloaded
Armed with my checklist I set out in the World of Wordpress plugins (it’s a pun only understood by Warcraft players). Which reminds me, if you see me reverting back to some kind of awfull shorthand, such as kk hf m8, cu l8r (okay have fun mate, see you later) it is because I play too much online games :).
After trying out some plugins, I stumbled upon this one:
http://elasticdog.com/2004/09/code-viewer/
It is absolutely simple and it’s great. Please check the installation notes on the page itself. I altered it a bit, and I’m posting the alterations here, which allow you to see the plugin in action at the same time.
The altered script:
<?php/*Plugin Name: Code ViewerPlugin URI: http://elasticdog.com/2004/09/code-viewer/Description: Pulls source code from an external file and displays the associated code with line numbers.Version: 1.1Author: Aaron SchaeferAuthor URI: http://elasticdog.com/Changes by JCW : wrapped code in <div class="codewrapper"></div>*//* Configuration Settings */$default_path = "<< YOUR BASE CODE URL HERE EG http://elasticdog.com/ >>"; // the absolute path of your code folder/* --- STOP EDITING --- */function code_viewer($text) {global $default_path;$count = preg_match_all('/<viewcode src="([^"]+)"(?: link="(?i:(yes|no))")?\s?\/>/', $text, $matches);for ($i = 0; $i < $count; $i++) {// Determine if the specified path is absolute, or relative to the root path// If it's neither, assume it's relative to the default path set on line 12if (strpos(($matches[1][$i]), 'http://') !== false) {$path = $matches[1][$i];} else if (substr(($matches[1][$i]), 0, 1) == '/') {$path = $_SERVER['DOCUMENT_ROOT'] . $matches[1][$i];} else {$path = $default_path . $matches[1][$i];}// Open the file// If the file can't be found, print an error messageif ($lines = @file($path)) {$codelist = '<div class="codewrapper"><ol class="codelist">' . "\n";foreach ($lines as $line_num => $line) {$toggle = (($line_num % 2 == 0) ? "odd" : "even"); // set alternating class names for each line// If the line is blank, insert a space to prevent collapsing// Otherwise insert the lineif (ltrim($line) == "") {$codelist .= "\t" . '<li class="' . $toggle . '"> </li>' . "\n";} else {$numtabs = strlen($line) - strlen(ltrim($line)); // determine the number of tabs$line = trim($line); // trim leading/trailing whitespace$codelist .= "\t" . '<li class="tab' . $numtabs . ' ' . $toggle . '"><code>' . htmlspecialchars($line) . '</code></li>' . "\n";}}// If requested, insert a link to the source fileif (strtolower($matches[2][$i]) == "yes") {$filename = substr(strrchr($path, '/'), 1);$codelist .= "\t" . '<li class="sourcelink"><strong>Download this code:</strong> <a href="' . $path . '">' . $filename . '</a></li>' . "\n";}$codelist .= "</ol></div>";} else {$codelist = '<p class="warning">[The requested file <kbd>' . $path . '</kbd> could not be found]</p>';}$text = str_replace(($matches[0][$i]), $codelist, $text);}return $text;}function fix_bad_p($text) {$text = str_replace('<p><ol class="codelist">', '<ol class="codelist">', $text);$text = str_replace('</ol></p>', '</ol>', $text);return $text;}add_filter('the_content', 'code_viewer', 9);add_filter('the_content', 'fix_bad_p');?>- Download this code: code-viewer.txt
Changes were made in line 37 & line 61.
In addition I altered the original stylesheet (look for the original on the site I linked above):
/* ---( CODE VIEWER FORMATTING )------------------------- */div.codewrapper {border: 1px solid #DDD;max-height:200px;overflow:auto;width:450px;height: expression(this.scrollHeight > 200 ? "200px" : "auto");}ol.codelist {color: #C63;font-family: Verdana, Arial, Sans-Serif;font-size:10px;line-height: 130%;padding: 0px 0px 0px 45px;margin: 1.5em 0;white-space:nowrap;}ol.codelist li {margin: 0;padding: 1px 2px;/*padding: 5px -2px;*/}ol.codelist li.tab0 { padding-left: 0px; }ol.codelist li.tab1 { padding-left: 20px; }ol.codelist li.tab2 { padding-left: 40px; }ol.codelist li.tab3 { padding-left: 60px; }ol.codelist li.tab4 { padding-left: 80px; }ol.codelist li.tab5 { padding-left: 100px; }ol.codelist li.tab6 { padding-left: 120px; }ol.codelist li.tab7 { padding-left: 140px; }ol.codelist li.odd { background-color: #FFF; }ol.codelist li.even { background-color: #F0F0F0; }ol.codelist li.sourcelink {color: #000;font: 100% Verdana, Arial, Sans-Serif;list-style: none;text-align: left;margin-left: -32px;padding-top: .85em;}ol.codelist li code { color: #222; }- Download this code: code-viewer.css
Basically the changes allow you to display the code without scrollbars if the code is small enough, and with scrollbars if the code takes up more than a certain width and height.
I absolutely love it and Aaron Schaefer did an awejob on it.