Saturday, December 20, 2008

Try to Add Code Syntax Highlighter

Try to add code syntax highlighter for my Java or XML code.

XML :

The html code for above block is

<pre name="code" class="xml:nocontrols">

   4.0.0
   org.simple
   org.simple.web
   jar
   Simple Web Bundle
   0.0.1-SNAPSHOT

</pre>

Java :

public class Member {
   private String name;

   public Member(String name){
       this.name = name;
   }

   public String getName() {
       return name;
   }

   public void setName(String name) {
       this.name = name;
   }
}
Find the instruction from fahd.blog.

I also added a new brush for manifest.mf file highlighter, the code is very simple:

dp.sh.Brushes.Manifest = function()
{
    var javaHeaders = 'Manifest-Version Created-By Signature-Version Class-Path Main-Class ' +
                      'Extension-List Extension-Name ' +
                      'Implementation-Title Implementation-Version Implementation-Vendor Implementation-Vendor-Id ' +
                      'Implementation-URL Specification-Title Specification-Version Specification-Vendor Sealed ' +
                      'Content-Type Java-Bean x-Digest-y Magic';

    var osgiHeaders = 'Bundle-ActivationPolicy Bundle-Activator Bundle-Category Bundle-Classpath Bundle-ContactAddress ' +
                      'Bundle-Copyright Bundle-Description Bundle-DocURL Bundle-Icon Bundle-Localization Bundle-ManifestVersion ' +
                      'Bundle-Name Bundle-NativeCode Bundle-RequiredExecutionEnvironment Bundle-SymbolicName Bundle-UpdateLocation ' +
                      'Bundle-Vendor Bundle-Version Dynamic-ImportPackage Export-Package Export-Service Fragment-Host ' +
                      'Import-Package Import-Service Require-Bundle';
    
    var s2dmHeaders = 'Import-Bundle Import-Library Module-Scope Module-Type Web-ContextPath Web-DispatcherServletUrlPatterns Web-FilterMappings';
    
    var aquteHeaders = 'Include-Resource Private-Package';

    this.regexList = [
                    {regex: new RegExp(this.GetKeywords(javaHeaders), 'gm'), css: 'header1'},
                    {regex: new RegExp(this.GetKeywords(osgiHeaders), 'gm'), css: 'header2'},
                    {regex: new RegExp(this.GetKeywords(s2dmHeaders), 'gm'), css: 'header3'},
                    {regex: new RegExp(this.GetKeywords(aquteHeaders), 'gm'), css: 'header4'}
                    ];

    this.CssClass = 'dp-manifest';

    this.Style =    '.dp-manifest .header1 {color: maroon;}' +
                    '.dp-manifest .header2 {color: maroon; font-weight: bold;}' +
                    '.dp-manifest .header3 {color: green; font-weight: bold;}' +
                    '.dp-manifest .header4 {color: gray; font-weight: bold;}';

}

dp.sh.Brushes.Manifest.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.Manifest.Aliases = ['manifest'];

So the manifest will be beautifully formatted:
Manifest-Version: 1.0
Bundle-Version: 1.0.0
Bundle-Name: Simple Web Bundle
Bundle-ManifestVersion: 2
Bundle-Description: A very simple Spring DM Web Bundle
Bundle-SymbolicName: org.simple.web
Import-Bundle: com.springsource.javax.servlet
 ,com.springsource.javax.servlet.jsp
 ,com.springsource.org.apache.taglibs.standard
 ,org.springframework.core
 ,org.springframework.beans
 ,org.springframework.context
 ,org.springframework.context.support
 ,org.springframework.web
 ,org.springframework.web.servlet
Module-Type: Web
Web-ContextPath: simple
Web-DispatcherServletUrlPatterns: *.htm

First, upload all css and js files to a public accessible location, I use Open Toast Project (Google Code) subversion trunk to store those.

Then add following to my Blogger template right before </body>:

<!-- SYNTAX HIGHLIGHTER --> 
<link href='http://opentoastproject.googlecode.com/svn/trunk/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>  
<script language='javascript' src='http://opentoastproject.googlecode.com/svn/trunk/dp.SyntaxHighlighter/Scripts/shCore.js'/>  
<script language='javascript' src='http://opentoastproject.googlecode.com/svn/trunk/dp.SyntaxHighlighter/Scripts/shBrushJava.js'/>  
<script language='javascript' src='http://opentoastproject.googlecode.com/svn/trunk/dp.SyntaxHighlighter/Scripts/shBrushXml.js'/>  
<script language='javascript' src='http://opentoastproject.googlecode.com/svn/trunk/dp.SyntaxHighlighter/Scripts/shBrushSql.js'/>
<script language='javascript' src='http://opentoastproject.googlecode.com/svn/trunk/dp.SyntaxHighlighter/Scripts/shBrushManifest.js'/>
<script language='javascript' src='http://opentoastproject.googlecode.com/svn/trunk/dp.SyntaxHighlighter/Scripts/shBrushJScript.js'/>
<script language='javascript'>  
dp.SyntaxHighlighter.ClipboardSwf = &#39;http://opentoastproject.googlecode.com/svn/trunk/dp.SyntaxHighlighter/Scripts/clipboard.swf&#39;;

dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);  
</script>
<!-- END SYNTAX HIGHLIGHTER --> 

Notes: I have to add mime type "text/css" to SyntaxHighlighter.css so it can work with FireFox!

1 comment:

jiwhiz said...

Upgrade to SyntaxHighlighter 2.1.364. But my Manifest brush is not working anymore :(