Monthly Archives: June 2007

If you are a technical geek, you may want to write some blog articles attaching some sources for discussion. And if you are using WordPress, you may find a lot of difficulties in struggling with WordPress’ messy TinyMCE editor in preserving codes format.

Thanks for early WordPress bloggers, there are some plugins trying to solve this problem. A known plugin is “Preserve Code Formatting“. But that plugin may be not good enough for you, at least not good enough for me.

I modify that plugin a little, and deploy it in my WordPress 2.2. And I also add my own source syntax highlighting tools.

Here is my modified preserve-code-formatting.php:

<?php
/*
Copyright (c) 2004-2005 by Scott Reilly (aka coffee2code)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy,
modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

function c2c_prep_code( $text ) {
$use_nbsp_for_spaces = false;

$text = preg_replace("/(\r\n|\n|\r)/", "\n", $text);
$text = preg_replace("/\n\n+/", "\n\n", $text);
$text = str_replace(array("&#36&;", "&#39&;"), array("$", "'"), $text);
//$text = htmlspecialchars($text, ENT_QUOTES);
$text = preg_replace("/\n\s+\n/", "\n \n", $text);
$text = str_replace("\t", ' ', $text);
if ($use_nbsp_for_spaces) $text = str_replace(' ', '  ', $text);
// Change other special characters before wptexturize() gets to them
$text = c2c_anti_wptexturize($text);
//$text = nl2br($text);
return $text;
} //end c2c_prep_code()

// This short-circuits wptexturize process by making ASCII substitutions before wptexturize sees the text
function c2c_anti_wptexturize( $text ) {
$text = str_replace('---', '---', $text);
$text = str_replace('--', '--', $text);
$text = str_replace('...', '...', $text);
$text = str_replace('``', '``', $text);

// This is a hack, look at this more later. It works pretty well though.
$cockney = array("'tain't","'twere","'twas","'tis","'twill","'til","'bout","'nuff","'round");
$cockneyreplace = array("'tain't","'twere","'twas","'tis","'twill","'til","'bout","'nuff","'round");
$text = str_replace($cockney, $cockneyreplace, $text);

$text = preg_replace("/'s/", ''s', $text);
$text = preg_replace("/'(\d\d(?:’|')?s)/", "'$1", $text);
$text = preg_replace('/(\s|\A|")\'/', '$1'', $text);
// $text = preg_replace('/(\d+)"/', '$1"', $text);
$text = preg_replace("/(\d+)'/", '$1'', $text);
$text = preg_replace("/(\S)'([^'\s])/", "$1'$2", $text);
// $text = preg_replace('/(\s|\A)"(?!\s)/', '$1"$2', $text);
// $text = preg_replace('/"(\s|\S|\Z)/', '"$1', $text);
$text = preg_replace("/'([\s.]|\Z)/", ''$1', $text);
$text = preg_replace("/ \(tm\)/i", ' (tm)', $text);
$text = str_replace("''", '''', $text);

$text = preg_replace('/(d+)x(\d+)/', "$1x$2", $text);

$text = str_replace("\n\n", "\n \n", $text);
return $text;
} //end c2c_anti_wptexturize()

function c2c_preserve_code_formatting( $text ) {
$text = str_replace(array('$', "'"), array('&#36&;', '&#39&;'), $text);
$tags = array('code', 'pre');
foreach ($tags as $tag) {
$text = preg_replace(
"^(<$tag>)\n?([\S|\s]*?)\n?(</$tag>)^ie",
"'<$tag>' . c2c_prep_code(\"$2\") . '</$tag>'",
$text
);
}
$text = str_replace(array('&#36&;', '&#39&;'), array('$', "'"), $text);
return $text;
} //end c2c_preserve_code_formatting()

add_filter('the_content', 'c2c_preserve_code_formatting', 9);
add_filter('the_excerpt', 'c2c_preserve_code_formatting', 9);
// Comment out this next line if you don't want to allow preserve code formatting for comments.
add_filter('get_comment_text', 'c2c_preserve_code_formatting', 9);

?>

And here is my css style:

.code {
overflow:scroll;
overflow-y:hidden;
background-color:#f0f0f0;
}

code {
white-space: pre;
color: #222;
}

.keyword {
color:blue;
}
.api {
color:navy;
font-weight:bold;
}
.scope {
color:#f0f;
}
.string {
color:green;
}
.comment {
color:#777;
}
.tag {
color:#f70;
}


And here is the instruction to add my source highlighting when editing:
1. Go to visit http://demo.java2script.org/syntaxor/ , and you can highlight your sources there;
2. Copy the link at left upper corner, which started by a blue block;
3. Bookmark any page, and then modify the bookmark’s URL property to the above link location (a “javascript:” link to load source syntax highlighting);
4. Try to write or edit a post in browser, and then click the above bookmarked link, and the same source highlighting application window shows up after a while, try to paste your highlighted HTML source in the wordpress’ TinyMCE editor.