Well its now 2010, Happy New Year!!!, and my mailserver guide is still not on the site. It has not been forgotten and in fact part of the guide is already hidden away under going editing. One of the issues that was delaying progress was finding the best way to display code on the site. There are alot of plugins for WordPress that will do syntax highlighting using Geshi. What I have wanted to do is highlight specific lines of highlighted syntax to make it easier to show changes. I did a little research and found that Geshi already supports the functionality I required but it hadn't been implemented in any WordPress plugins. So I decided to modify one. I selected CodeColorer to modify as it already had a method of processing arguments within the "cc" tag it uses.
The modification is simple but has a few limitations. Firstly each line that needs to be selectively highlighted needs to be referenced by line number. This is easy for a few lines but is going to mean alot of number typing for large chunks of code. That said for really big chunks of code they are probably best split off from the rest of the file anyway. The line highlight only stretches to the limit of the longest line and not the whole of the code window. Only a single colour can be specified for the selective highlight and it only works if the Geshi style is selected rather the the custom CodeColorer themes.
Lets now have a look at the modification and what it does. I only needed to modify the codecolorer-core.php file in the plugin directory with a few lines. I have highlighted the changes on lines 161-167 using the modification. To achieve this I placed a new argument 'highlight' into the tag after the language argument [cc lang="php" highlight="161,162,163,164,165,166,167"]
. The 'highlight' argument takes a comma separated list of line numbers to highlight. Thats basically it, the modification takes the line numbers, puts them into an array and passes it on to the inbuilt functionality of Geshi which handles the rest.
codecolorer-core.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 | <?php /* CodeColorer plugin core part http://kpumuk.info/projects/wordpress-plugins/codecolorer */ /* Copyright 2006 - 2009 Dmytro Shteflyuk <kpumuk@kpumuk.info> This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA */ class CodeColorer { var $blocks = array(); var $comments = array(); var $geshiExternal = false; var $geshiVersion = '1.0.8.4'; var $samplePhpCode = ' [cc_php] /** * Comment */ function hello() { echo "Hello!"; return null; } exit(); [/cc_php] '; /** Search content for code tags and replace it */ function BeforeHighlightCodeBlock($content) { $content = preg_replace('#(\s*)\[cc([^\s\]_]*(?:_[^\s\]]*)?)([^\]]*)\](.*?)\[/cc\2\](\s*)#sie', '$this->PerformHighlightCodeBlock(\'\\4\', \'\\3\', $content, \'\\2\', \'\\1\', \'\\5\');', $content); $content = preg_replace('#(\s*)\<code (.*?)\>(.*?)\</code>(\s*)#sie', '$this->PerformHighlightCodeBlock(\'\\3\', \'\\2\', $content, \'\', \'\\1\', \'\\4\');', $content); return $content; } function AfterHighlightCodeBlock($content) { $content = str_replace(array_keys($this->blocks), array_values($this->blocks), $content); return $content; } function BeforeProtectComment($content) { $content = preg_replace('#(\s*)(\[cc[^\s\]_]*(?:_[^\s\]]*)?[^\]]*\].*?\[/cc\1\])(\s*)#sie', '$this->PerformProtectComment(\'\\2\', $content, \'\\1\', \'\\3\');', $content); $content = preg_replace('#(\s*)(\<code .*?\>.*?\</code>)(\s*)#sie', '$this->PerformProtectComment(\'\\2\', $content, \'\\1\', \'\\3\');', $content); return $content; } function AfterProtectComment($content) { $content = str_replace(array_keys($this->comments), array_values($this->comments), $content); $this->comments = array(); return $content; } /** * Perform code highlightning */ function PerformHighlightCodeBlock($text, $opts, $content, $suffix = '', $before = '', $after = '') { // Preprocess source text $text = str_replace(array("\\"", "\\'"), array (""", "\'"), $text); $text = preg_replace('/(< \?php)/i', '<?php', $text); $text = preg_replace('/(?:^(?:\s*[\r\n])+|\s+$)/', '', $text); // Parse options $options = CodeColorerOptions::ParseOptions($opts, $suffix); if ($options['escaped']) { $text = html_entity_decode($text, ENT_QUOTES); $text = preg_replace('~�*([0-9a-f]+);~ei', 'chr(hexdec("\\1"))', $text); $text = preg_replace('~�*([0-9]+);~e', 'chr(\\1)', $text); } $result = ''; // Check if CodeColorer has been disabled for this particular block if (!$options['enabled']) { $result = '<code>' . $text . ''; } else { // See if we should force a height $num_lines = count(explode("\n", $text)); $result = $this->PerformHighlightGeshi($text, $options); $result = $this->AddContainer($result, $options, $num_lines); } if ($options['inline']) { $blockID = $this->GetBlockID($content, false, '<span>', '</span>'); } else { $blockID = $this->GetBlockID($content); } $this->blocks[$blockID] = $result; if ($options['inline']) { $result = $before . $blockID . $after; } else { $result = "\n\n$blockID\n\n"; } return $result; } /** * Perform code protecting from mangling by Wordpress (used in Comments) */ function PerformProtectComment($text, $content, $before, $after) { $text = str_replace(array("\\"", "\\'"), array (""", "\'"), $text); $blockID = $this->GetBlockID($content, true, '', ''); $this->comments[$blockID] = $text; return $before . $blockID . $after; } /** * Perform code highlighting using GESHi engine */ function PerformHighlightGeshi($content, $options) { /* Geshi configuration */ if (!$this->geshi) { $this->geshi = new GeSHi(); $this->geshi->enable_line_numbers(GESHI_NO_LINE_NUMBERS, 1); if (is_feed()) { $this->geshi->set_overall_style('padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap'); } } $geshi = $this->geshi; $geshi->set_source($content); $geshi->set_language($options['lang']); $geshi->set_overall_class('codecolorer'); $geshi->set_tab_width($options['tab_size']); if (!is_feed()) { $geshi->enable_classes($options['theme'] != 'geshi'); if ($options['nowrap']) { $geshi->set_overall_style('white-space:nowrap'); } else { $geshi->set_overall_style(''); } } else { $geshi->enable_classes(false); } if (!is_null($options['strict'])) $geshi->enable_strict_mode($options['strict']); if ($options['no_links']) $geshi->enable_keyword_links(false); /* My Custom Bit */ if ($options['highlight']){ $myarray = explode(",",$options['highlight']); $geshi->highlight_lines_extra($myarray); $geshi->set_highlight_lines_extra_style('background-color: #ffff66;'); /* Select the colour of the highlight */ } /* End My Custom Bit */ if ($options['inline']) { $geshi->set_header_type(GESHI_HEADER_NONE); } else { $geshi->set_header_type(GESHI_HEADER_DIV); } $result = $geshi->parse_code(); if ($geshi->error()) { return $geshi->error(); } if ($options['line_numbers'] && !$options['inline']) { $table = '<table cellspacing="0" cellpadding="0"><tbody><tr><td '; if (is_feed()) { $table .= 'style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"'; } else { $table .= 'class="line-numbers"'; } $table .= '><div>'; for ($i = 0, $count = substr_count($result, '<br />') + 1; $i < $count; $i++) { $table .= ($i + $options['first_line']) . '<br />'; } $result = $table . '</div></td><td>' . $result . '</td></tr></tbody></table>'; } return $result; } function AddContainer($html, $options, $num_lines) { $custom_css_class = empty($options['class']) ? '' : ' ' . $options['class']; if ($options['inline']) { $theme = empty($options['inline_theme']) ? 'default' : $options['inline_theme']; $result = '<code class="codecolorer ' . $options['lang'] . ' ' . $theme . $custom_css_class . '">'; $result .= '<span class="' . $options['lang'] . '">' . $html . '</span>'; $result .= '</code>'; } else { $theme = empty($options['theme']) ? 'default' : $options['theme']; $style = 'style="'; if ($options['nowrap']) $style .= 'overflow:auto;white-space:nowrap;'; if (is_feed()) $style .= 'border: 1px solid #9F9F9F;'; $style .= $this->GetDimensionRule('width', is_feed() ? $options['rss_width'] : $options['width']); if($num_lines > $options['lines'] && $options['lines'] > 0) { $style .= $this->GetDimensionRule('height', $options['height']); } $style .= '"'; $css_class = 'codecolorer-container ' . $options['lang'] . ' ' . $theme . $custom_css_class; if ($options['noborder']) $css_class .= ' codecolorer-noborder'; $result = '<div class="' . $css_class . '" ' . $style . '>' . $html . '</div>'; } return $result; } /** * Generate a block ID that will be replaced at the end (after all that * crazy WP text work!) with the right code */ function GetBlockID($content, $comment = false, $before = '<div>', $after = '</div>') { static $num = 0; $block = $comment ? 'COMMENT' : 'BLOCK'; $before = $before . '::CODECOLORER_' . $block . '_'; $after = '::' . $after; // Just do a check to make sure the user // hasn't (however unlikely) input block replacements // as legit text do { ++$num; $blockID = $before . $num . $after; } while (strpos($content, $blockID) !== false); return $blockID; } function GetDimensionRule($dimension, $value) { $rule = ''; if (!empty($value)) $rule = "$dimension:$value" . (is_numeric($value) ? 'px;' : ';'); return $rule; } function ShowWarning($type, $title, $message) { $disable = ' <a href="options-general.php?page=codecolorer.php&disable=' . $type . '">' . __('Close', 'codecolorer') . '</a>'; echo '<div id="codecolorer-' . $type . '" class="updated fade"><p><strong>' . $title . "</strong> " . $message . $disable . "</p></div>\n"; } function ShowGeshiWarning() { if ($this->geshiExternal) { $this->ShowWarning('concurrent', __('CodeColorer has detected a problem.', 'codecolorer'), sprintf(__('We found another plugin based on GeSHi library in your system. CodeColorer will work, but our version of GeSHi contain some patches, so we can\'t guarantee an ideal code highlighting now. Please review your <a href="%1$s">plugins</a>, maybe you don\'t need them all.', 'codecolorer'), "plugins.php")); } } function ShowOptionsPage() { $page = $this->GetOptionsPage(); $page->Show(); } function GetOptionsPage() { if (!$this->optionsPage) { if (!class_exists('CodeColorerAdmin')) { $path = dirname(__FILE__); if (!file_exists("$path/codecolorer-admin.php")) return false; require_once("$path/codecolorer-admin.php"); } $this->optionsPage = new CodeColorerAdmin($this); } return $this->optionsPage; } function GetCodeHighlighted($code) { $content = $this->BeforeHighlightCodeBlock($code); return $this->AfterHighlightCodeBlock($content); } function GetSampleCodeHighlighted() { return $this->GetCodeHighlighted($this->samplePhpCode); } function &GetInstance() { static $instance = null; if (null === $instance) { $path = dirname(__FILE__); if (!class_exists('CodeColorerOptions')) { if (!file_exists("$path/codecolorer-options.php")) return null; require_once("$path/codecolorer-options.php"); } $instance = new CodeColorer(); # Maybe GeSHi has been loaded by some another plugin? if (!class_exists('GeSHi')) { if (!file_exists("$path/lib/geshi.php")) return null; require_once("$path/lib/geshi.php"); } else { $instance->geshiExternal = true; } } return $instance; } } |
Hi,
Thanks for the addition, can add an option to chose a range of lines (ig: from 161 to 167) like this for example:
[cc lang=”php” highlight=”161…167″]
Best regards,
Amine
The underlying Geshi engine which highlights the code takes an array of numbers eg 1,3,5,7 to highlight. Whilst it should be possible to parse the highlight instruction to determine the lines to be highlighted, it still needs to be converted back to an array of individual lines for Geshi. I’ll have a think on the modification.