How to highlight the syntax for any languages and script like html, xml, python, C, C++, Java, groovy etc in a super easy way using Syntax Highlighter (by Alex Gorbatchev). Though this library is available for quite a long time but there are still doubts and difficulty faced by new programmer. This guide will help you get your code working in perfect 5 mins or less !!

1. Overview

This article consists of complete working code, with steps to for syntax highlighting and publishing of code in website, blog or html.

2. Prerequisitions

3. Steps to highlight syntax and publish your code

Below are the end to end steps for using Syntax highlighter.

  1. Download following essential CSS and Javascript and put it in a directory(let's name: 'syntaxhighliter')
    Note: Brush files are language/script specific, so use only really required brush files in your html page instead of including of all languages. Also, you can download the sample code of this article(Link in last section) where you will find all required css and js as listed below
    1. shThemeDefault.css: Download Link
    2. shCore.css: Download Link
    3. shCore.js: Download Link
    4. Let's us say if you want to syntax highlight html, javascript and Java. So download: shBrushXml.js Download Link
    5. shBrushJScript.js: Download Link
    6. shBrushJava.js: Download Link
    7. shBrushPython.js: Download Link
  2. Include required CSS and JavaScript from above downloaded list in your '.html' as shown in code below between line number 6-10
  3. Include command for applying syntaxhighlighter to all the pre tag with Brushes as shown in code below between line number 67-70
  4. Include the code to be displayed in page inside pre tag as shown in below code
    1. HTML example: Line number: 16
    2. JavaScript example: Line number: 30
    3. Java example: Line number: 42
    4. Python example: Line number: 53
  5. Important :It is always better idea to escape following characters while displaying html inside your page:
    • " to replaced with "
    • & to replaced with &
    • < to replaced with &lt;
    • > to replaced with &gt;

    The easiest way to do so is an online tool for escaping and de-escaping html: freeformatter.com

If you have followed above mentioned 5 steps, then the below code in Section.4 Working sample code will render following UI.
Rendered UI for below code

4. Working sample code

Below is the Working sample code:

										<html>
											<head>
												<title>Sample code for syntaxhighlighter usage</title>
												<link rel="stylesheet" href="../../../libs/syntaxhighlighter/shCore.css">
												<link rel="stylesheet" href="../../../libs/syntaxhighlighter/shThemeDefault.css">
												<script type="text/javascript" src="../../../libs/syntaxhighlighter/shCore.js"></script>
												<script type="text/javascript" src="../../../libs/syntaxhighlighter/shBrushJScript.js"></script>
												<script type="text/javascript" src="../../../libs/syntaxhighlighter/shBrushXml.js"></script>
												<script type="text/javascript" src="../../../libs/syntaxhighlighter/shBrushJava.js"></script>
												<script type="text/javascript" src="../../../libs/syntaxhighlighter/shBrushPython.js"></script>
											</head>
											
											<body>
											
												<h3>Display HTML </h3>
													<pre class="brush: html; first-line: 1;">
														&lt;html&gt;
															&lt;head&gt;
																&lt;title&gt;This is title
																&lt;/title&gt;
															&lt;/head&gt;
															&lt;body&gt;
																Hello world
																&lt;!--This is comment section for demo--&gt;
															 &lt;/body&gt;
														&lt;/html&gt;
													</pre>
													
												<h3>Display JQuery / JavaScript </h3> (highlight line number: [2,4,6,7])
													<pre class="brush: js; html-script: false; first-line: 1;  highlight: [2,4,6,7]">
														$(document).ready(function(){
															$("#msgid").html("This is Hello World by JQuery");
															//This is single line comment section for demo
															/* 
															This is multiline
															comment
															*/
														});
													</pre>
												<h3>Display Java </h3>
												
													<pre class="brush: java; html-script: false;">
														package helloworld;
														public class HelloWorld {
															public static void main(String[] args) {
																// Comment: Prints "Hello, World" to the terminal window.
																System.out.println("Hello, World");
															}
														}
													</pre>
													
												<h3>Display Python </h3>(line numbering started from -1)
													<pre class="brush: python; first-line: -1;">
														#! python
														'''
														Multiline comment demo
														'''
														# range function
														print range(10)
														print range(5, 10)
														print range(0, 10, 3)
														a = ['Mary', 'had', 'a', 'little', 'lamb']
														for i in range(len(a)):
															print i, a[i]
													</pre>
													
													<!-- Highlight all --> 
													<script type="text/javascript"> 
														SyntaxHighlighter.all()
													</script>
											</body>
										</html>

5. Points to be noted

Few points to be noted

  • Escaping and descaping is essential matra for html display.
  • If you are willing to display a HTML code with javascript in it. Use <pre class="brush: js; html-script: true;">
  • One can customize the line number display by using attribute in pre class: <pre class="brush: js; html-script: true; first-line: -3; highlight: [1,12]">.
    Similarly for highlighting particular lines, provide the list of line number as follow: <pre class="brush: js; html-script: true; first-line: -3; highlight: [1, 2, 3, 9,12]">
  • Once you have included the brush file for any language or script, remember to use that in pre tag's class
  • It is better to download minimized version of all css and javascript file instead of debug mode. Keeping minimized version makes website loading faster as it's size is quite smaller. Download minimized version from CDNJS

Here is a quick video about how to install and start using Syntax Highlighter

6. How to remove Credit toolbar from syntaxhighlighter

If you have followed this tutorial so far and able to highlight code using syntaxhighlighter, you must have noted the presence of green colored toolbar icon on top-right corner. Clicking which takes us to Credit pop-up dialog box for SyntaxHighlighter

Toolbar when clicked displays credit dialog box

Due to several reasons, one would wish to remove the green toolbar icon from syntaxhighlighter division. It is possible to do in following ways

  • CSS Method
    In file 'shThemeDefault.css' add property for display: none; inside, selector: '.syntaxhighlighter .toolbar '
  • JavaScript statement Method
    Just before the closing of <body> tag, alongwith statement SyntaxHighlighter.all(); include this statement SyntaxHighlighter.defaults.toolbar = false; or SyntaxHighlighter.defaults['toolbar'] = false;

7. Download this complete example

Download links


Thank you for reading it all along. Hope you liked this article!!

About the author

Prakash snippetnuggets

Prakash

You can contact him at [email protected]