Sunday, May 6, 2012

How to highlight markup and programming languages with the Syntax Highlighter


Syntax Highlighter

This is a short tutorial to explain how to use the Syntax-Highlighter to highlight the most commen markup and programming language such as: html/xml/.., css, javascript, php, sql, python, ruby, perl, visual basic, java, c, c#, c++, etc.
Just put this code in the html-header wherever you are planning to show your highlighted code. In this case, we have omitted to highlight all available languages and choose only to highlight: c#, css, java, javascript, and html/xml.
Also, we have choosen to use the Eclipse-Theme instead of the Default one (other themes are also available and can be customized). Please, refer for more information to the Syntaxhighlighter Project from 'Alex Gorbatchev.










Just put your code that you want to highlight inside a <pre> tag. The current example demonstrate how to highlight html.
The pre-class (brush:html) specify that the content to be highlighted is html.
<pre class="brush:html">
   <h1>Youpi! I'm highlighted!</h1>
</pre>
The result would be:

Youpi! I'm highlighted!

The following example show a java highlighted code (<pre class="brush:java">)
package edu.kara.tutorial.java;

import java.util.*; // not used here

 public class MyClass {

  private String myParameter = "";

  public MyClass(String param) {
   this.myParameter = param;
  }

  public String getValue() {
   return MyParameter;
  }

}

Link:
1. The available brushes are to be found here.