syntax highlighting with WordPress: that's not that!

A few months ago I posted on how I used the Syntax Highlighter Evolved [http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/] plugin for WordPress to make code snippets more readable. Anyway, at the time I was really excited to be able to put some nice looking code/markup into my posts. Never mind that the code itself wasn't so nice! :P Over time, of course, I've wanted to make things easier. As I mentioned in the earlier post [http://blog.humaneguitarist.org/2010/09/06/syntax-highlighting-with-wordpress/] I was pasting in my code using Deans' FCKEditor [http://wordpress.org/extend/plugins/ckeditor-for-wordpress/], using the Styles drop-down to mark up my code as

 and then in turn editing the source HTML to change the  tag to a  tag with the appropriate attribute to denote that my code was either Python or XML, etc.

Well, as I remarked to a friend of mine today over lunch, I'm sick of doing that.

So I dug around in all the files that are part of Dean's FCKEditor. I learned that by editing the "ckeditor/plugins/stylescombo/styles/default.js" file that I could add options to the Styles drop-down menu. Now, when I paste in Python, XML, or Javascript I just need to highlight the code and pick the right option from the Styles list. It's SO much easier.

Here's an image of the Styles list with the added options mentioned:

IMAGE: [http://blog.humaneguitarist.org/uploads/deansTweak1.png]

If you are curious to see the .js file with the minor additions, I've pasted it below - and even highlighted it using the new
Code: Javascript

option.
/*
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.addStylesSet('default',[{name:'Blue Title',element:'h3',styles:{color:'Blue'}},
{name:'Red Title',element:'h3',styles:{color:'Red'}},
{name:'Marker: Yellow',element:'span',styles:{'background-color':'Yellow'}},
{name:'Marker: Green',element:'span',styles:{'background-color':'Lime'}},
{name:'Big',element:'big'},
{name:'Small',element:'small'},
{name:'Typewriter',element:'tt'},
{name:'Computer Code',element:'code'},
{name:'Keyboard Phrase',element:'kbd'},
{name:'Sample Text',element:'samp'},
{name:'Variable',element:'var'},
{name:'Deleted Text',element:'del'},
{name:'Inserted Text',element:'ins'},
{name:'Cited Work',element:'cite'},
{name:'Inline Quotation',element:'q'},
{name:'Language: RTL',element:'span',attributes:{dir:'rtl'}},
{name:'Language: LTR',element:'span',attributes:{dir:'ltr'}},
{name:'Image on Left',element:'img',attributes:{style:'padding: 5px; margin-right: 5px',border:'2',align:'left'}},
{name:'Image on Right',element:'img',attributes:{style:'padding: 5px; margin-left: 5px',border:'2',align:'right'}},
/* start of added options */
{name:'Code: Python',element:'pre',attributes:{class:'brush:python'}},
{name:'Code: XML',element:'pre',attributes:{class:'brush:xml'}},
{name:'Code: Javascript',element:'pre',attributes:{class:'brush:javascript'}}
/* end of added options */
]);