Tonight I noticed some problems with Syntax Highlighter Evolved, the plugin I was using for code and XML snippets, etc.

I was trying to load a page with an XML snippet and my browser was reporting that it couldn't find the XML brush. Reinstalling the plugin probably would have fixed it but, all the same, I switched to Syntax Highlighter Compress which, true to its claims, does seem to work faster than other syntax highlighters I've tried.

So, I've spent far too much time playing around with themes tonight. I hate most WordPress themes because a lot of them, at least the free ones, don't seem to place a high value on readability. Too much razzle-dazzle.

For now I've switched to something else and, using the Journalist CSS file, I replaced some values in the current CSS to make the text look better to my eyes.

I guess at some point I should document the changes I made, huh?

…

Update, September 20, 2011: Aha! It seems that turning off the WordPress feature that automatically disables comments on old posts was the problem for the Journalist theme. In other words, Journalist – as well as many other themes it seems – won't show comments even if they exist if commenting is turned off for a given post. This includes commenting that's turned off manually or because WordPress was automatically disabling the ability to add new comments to posts that were over a year or so old.

I don't like that so I might tweak the Journalist behavior at some point. I think it's valid to turn off commenting for really old posts or because there are too many spammy comments appearing on a given post. But I don't think that means current users shouldn't be able to view older comments – those are often more valuable than the post itself!

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!

Over time, of course, I've wanted to make things easier. As I mentioned in the earlier post I was pasting in my code using Deans' FCKEditor, using the Styles drop-down to mark up my code as <code> and then in turn editing the source HTML to change the <code> tag to a <pre> 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:

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 */
]);

The other day, I installed Efficient Related Posts (0.3.6). It's a great tool to generate a list of hopefully related posts on my blog. There should even be some listed below this post.

Under the settings, you can alter what the header says and even have it auto-generate related posts for every blog post. For example, I changed the header "Related Posts" to "Related Content".

But one thing I didn't see the settings offer is a way to hide that header in cases where no related content was generated.

In other words, when no related content was generated it was displaying something like "Related Content: no related posts found." I don't want people to see that so I tweaked the code in the main plugin script using WordPress' plugin editor.

Here's the code below. It's only a minor change for the "if" block that starts at around line 307.

if ( !empty($settings['title']) && !empty($relatedPosts)) {
	$output = "--------------<h4 class='related_post_title'>{$settings['title']}</h4>{$output}";
	/* Nitin Arora modified the code above on 20101219 to display differently.
	By adding the "&& !empty($relatedPosts)" condition, only posts/pages with related content
	will show the related content header.
	A few "-"s were added to offset the related content header for readability.
	Also, the <h4> tag was originally an <h3>. */
}

If they did, they'd have seen a lot of weird changes going on in real-time concerning some XML code in a recent post.

Basically, I've been playing around with various WordPress plugins that support syntax highlighting, which is a fancy way of color-coding code examples with color-coding specific to various scripting and markup languages like PHP, Python, XML, etc.

Anyway, after playing around with several, I was running into the same issue with the indent stripping as talked about here. The use of indentation is paramount to making one's code readable and in some languages, like Python, indentation is required.

In other words, this is valid Python code:

if a == a:

print "The 'a' variable is equal to itself!"

But this is invalid:

if a == a:

print "The 'a' variable is equal to itself!"

because the print statement is dependent on a condition.

Anyway, what was happening was that I'd put code into WordPress, the indentation and highlighting would look good, but if I wanted to edit my post later all the indentation would be lost when I'd reopened the post in the editor (btw: I use Dean's FCKEditor).

So here's what appears to fix it:

• I installed my preferred WordPress syntax highlighter: Syntax Highlighter Compress Syntax Highlighter Evolved.
• I wrote my post and pasted my code directly into the Visual Editor.
• I then highlighted only the code and from the Visual Editor's "styles" drop-down menu I chose "Computer Code".
• I then edited the post in Source mode.
  • The indentations had now been converted to the proper HTML entity names.
• I replaced the <code> tags with <pre> tags.
  • The opening <pre> tag needs a "class" attribute to specify the type of code (i.e. Python, XML, etc.)
  • For example, I'd use this for Python:
    • <pre class="brush:python">
  • and this for XML:
    • <pre class="brush:xml">

From then on, everything seems to be OK. That is to say, I can edit my post at a later time with the Source or Visual Editor and all my indentations are intact.

Here's the earlier Python code using the technique just described:

if a == a:
	    print "The 'a' variable is equal to itself!"

And that's that … I hope.

If you're hosting your own WordPress site, Noteflight integrates with WordPress in a couple of exciting ways. First, we now support single-signon between WordPress and Noteflight Learning Edition. This means you can set up a Learning Edition community with Noteflight, and let every user on your WordPress site seamlessly access a matching account on Learning Edition without ever needing to sign in separately. All your WordPress users will also be able to see scores shared within that community. Second, Noteflight supports a nifty standard called OEmbed, that allows you to simply paste a Noteflight score link into WordPress and have the embedded score appear as if by magic. (You have to configure your WordPress site to tell it that this is OK.)

When I test this out, I'll post on this topic again. But for now I really just needed to put this on my blog to have a record of this news, given that I'd already forgotten that it was in my email box.