Grails Syntax Highlighter Plugin Released

Grails Syntax Highlighter Plugin Released
Posted by Erik Pragt at around evening time: May 20th, 2008

Grails syntax highlighter plugin

Yesterday, I released my first plugin for Grails. The goal of the plugin is to do Syntax Highlighting for Code Snippets in HTML pages, for which no plugin existed yet. The plugin supports a whole range of languages, and even includes Groovy Highlighting support. The Grails Synax Highlighter builds on the great work of Alex Gorbatchev, who wrote and maintains the Javascript Syntax Highlighter.

Since pictures say more that a 1000 words can describe, I'll show you a sample output of plugin:

The above is some syntax colored code, and also includes linenumbers, support to copy it to your clipboard, etc. So, how can we use it in Grails?

Installation

Well, the first step to take is to install it. If you don't have a Grails project, you can create one by using the grails create-app <name> command. After that, install the plugin by doing a grails install-plugin syntax-highlighter. Grails will download the plugin from the plugin repository. The plugin contains everything you need, so there's no need to manually download the Javascript library.

After the plugin is installed, you will have a new 'syntaxhighlighter' directory in your /web-app/js and css directory. These directories contain the various formatters, like Java, PHP, Groovy, and the style used for them, which can be changed by modifying the CSS file.

Usage

The Plugin can be used in the following way. First, include the <syntax:resources> tag in the head of the GSP page. The <syntax:resources> tag is responsible for loading the required Javascript and CSS and has two required attributes: name and languages. The name corresponds to the name of the
code blocks to highlight in the body of the GSP page. The languages attribute takes in a map of different languages. This page provides an overview of all the supported languages.

To syntax highlight the code using the plugin, you can use the <syntax:format> (which I should probably rename to <syntax:highlight>, now I think of it..). This tag also has two required attributes, which are similar to the resource tag: name and language, which are hopefully self explanatory.

Example

A complete example looks like this:

 
<html>
<head>
   <syntax:resources name="code" languages="${['Java', 'Groovy']}" />
</head>
<body>
<h1>Some Groovy code</h1>
 
   <syntax:format name="code" language="groovy">
class User {
   def name
   def password
}
   </syntax:format>
<h1>And some Java code</h1>
 
   <syntax:format name="code" language="java">
public class User {
   private String name;
   private String password;
 
   public String getName() {
     return name;
   }
}
   </syntax:format>
</body>
</html>

Which produces this output:

As a bonus, the <syntax:format> automatically encodes the HTML and XML elements in the tag body. So you don't have to escape these elements yourself, the plugin does it for you. And if you don't like it, you can turn it off by using the <syntax:format escapeXml="false"> attribute.

I hope this gave a nice overview of the plugin, and what you can do with it. For more information, head over to the Grails Plugin page, which should contain all the information you need. And if you miss something, don't hesitate to leave a comment!

Tags: Grails, syntax highlighter
Filed under Grails, Usability | 3 Comments »

dave navar Says:

Posted at: January 13, 2009 at 3:02 pm

Generally I do not post on blogs, but I would like to say that this post really forced me to do so! really nice post.

Kiersten Gervin Says:

Posted at: April 23, 2009 at 7:59 pm

Of course, what a great site and informative posts, I will add backlink – bookmark this site? Regards, Reader.

Jim Morris Says:

Posted at: November 19, 2009 at 10:06 am

I have updated your plugin to handle the latest version of syntaxhighlighter with themes and for Grails 1.2M4
EMail me for the patches as I can’t find your contact info.

Thanks