Tuesday 6 March 2012

Adding language choice to FogBugz's code snippets

Surprisingly, the "code snippet" widget used by the FogBugz wiki feature doesn't support telling the pretty-printer (they're using Google's google-code-prettify script) what language the text is in. Since the script can't always tell what language the code is in, this is a problem. And apparently, I'm the first one to ask about this. Wow.

The answer is to write a BugMonkey script and install it in your FogBugz installation. Here's my first take at it, dashed off fairly quickly but apparently functional:

name:          Add language support to code snippet pretty-printing in FogBugz
description: Fixes code snipeet pretty-printing in FogBugz by adding the ability to specify a language.
author: T.J. Crowder [tj at crowder software dot com]


// Written by T.J. Crowder [tj at crowder software dot com]
// Licensed under the Creative Commons Attribution License 2.0 (UK)
// http://creativecommons.org/licenses/by/2.0/uk/
// At the beginning of each code snippet, you can optionally include a line
// defining the language, in the form:
// lang_xyz:
// This must be the first line.
// The script below will find these, extract the "xyz" from it, remove it and
// any line break following it, and add "lang-xyz" to the `pre` element.
// If any matches were found, when done `prettyPrint` is called to reformat
// the elements.
// Example:
// lang_sql:
// -- A comment
// )
// ...renders without the first line, with the class "lang-sql" on the element
// so the pretty-printer knows what the language is.
// This code may be fairly fragile, depending on the precise workings of the pretty
// printer. It would be better BY FAR if FogBugz updated the code snippet widget to
// support specifying the language.
// Many thanks to Ben McCormack and Michel de Ruiter for pointing me in the right
// direction here: http://fogbugz.stackexchange.com/questions/10065
(function($) {
// Our handler
function handlePrettyLanguages() {
var changes = false;
$("pre.prettyprint").each(function() {
var pre, firstElement, span, match, lang, nextpun, nextbr;

firstElement = this.firstChild;
while (firstElement && firstElement.nodeType !== 1) {
firstElement = firstElement.nextSibling;
if (firstElement && firstElement.tagName === 'SPAN') {
pre = $(this);
span = $(firstElement);
match = /^\s*lang_([A-Za-z0-9_]+)\s*$/.exec(span.text());
if (match && match[1]) {
lang = match[1];
nextpun = span.next("span.pun");
if (!nextpun[0]) {
nextpun = span;
nextbr = nextpun.next("br");
if (!nextbr[0]) {
nextbr = nextpun.next().children().first();
if (nextbr[0] && nextbr[0].tagName !== "BR") {
nextbr = $();
pre.addClass("lang-" + lang);
if (nextpun !== span) {
changes = true;
if (changes) {

// Hook it up on page ready and when BugViewChange events occur
$(window).on('BugViewChange', handlePrettyLanguages);

You install that via My Settings | Customizations.

Happy pretty printing!

No comments: