StudioPress Premium WordPress Themes

Ultimate Guide To Installing And Using SyntaxHighlighter By Alex Gorbatchev


SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript by Alex Gorbatchev in 2004. since it invention, it has been widely used by both small and large website and applications such as Apache, Aptana, Mozilla, Yahoo, WordPress, Bug Labs, Freshbooks.
Syntax highlighting is a feature of some text editors that display text—especially source code—in different colors and fonts according to the category of terms. This feature eases writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers and editors.

Demos

syntaxHighlighter demo

// SyntaxHighlighter makes your code snippets beautiful without tiring your servers.
// http://alexgorbatchev.com
var setArray = function(elems) {
    this.length = 0;
    push.apply(this, elems);
    return this;
}

With syntax highlighter, the presentation of programming codes are now pretty instead of the old ugly display of codes.

How Do I Implement It In My Website

The use of syntaxHighlighter is just like the use of any JavaScript code in your site. to add this great feature to your website, follow the steps below.

  1. Head over to SyntaxHighlighter download and download the latest or older version, but the latest version is highly recommended.
    If you don’t have a place to upload the files, you can use their hosted solution
  2. Add base files to your page header <header>: shCore.js, shCore.css
  3. Add brushes that you want (for example, shBrushJScript.js for JavaScript, shBrushPhp.js for PHP) goto the scripts folder to see full list of all brushes
  4. Include shCore.css and shThemeDefault.css found in the styles folder
  5. Create a code snippet with either <pre /> or <script />
  6. Call SyntaxHighlighter.all() JavaScript method

Practical Example

Here is a sample HTML document with syntaxHiglighter at work

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Hello SyntaxHighlighter</title>
	<script type="text/javascript" src="scripts/shCore.js"></script>
	<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
	<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
	<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>
<body style="background: white; font-family: Helvetica">
<h1>Hello SyntaxHighlighter</h1>
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
	return "hi!";
}
</pre>
</html>

Things To Note:

  1. make sure the path to the included file are correct. for example, if the files are located in a folder, use the code below to call or add the files to your page
    <script type="text/javascript" src="js/shCore.js"></script>
    <script type="text/javascript" src="css/shBrushJScript.js">lt;/script>
    <link href="css/shCore.css" rel="stylesheet" type="text/css" />
    <link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" /></li>
    <script type="text/javascript">
         SyntaxHighlighter.all()
    </script>
    

    Note: Always make sure the SyntaxHighlighter.all() is called.

    Alternatively if you don’t have where to upload the files, thanks to Alex Gorbatchev, he is has a hosted option, all you need do is to use

    <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
    
  2. If you are to display any programming code, make sure it brush is included or called to the HTML page and the class to it corresponding Brush aliases.
    For example to display a PHP code, first load the PHP brush shBrushPhp.js then change the class to class=”brush: js”;
    the below code is used for PHP. 

    <script type="text/javascript" src="js/shCore.js">lt;/script>
    <script type="text/javascript" src="css/shBrushPhp.js"&gt;&lt;/script&gt;
    <link href="css/shCore.css" rel="stylesheet" type="text/css" /&gt;
    <link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" /&gt;</li>
    <script type="text/javascript"&gt;
         SyntaxHighlighter.all()
    </script>
    <pre class="brush: php">
    function foo()
    {
    }
    </pre>
    

    For full list of Brushes name, brush aliases and files name, goto SyntaxHighlighter – Bundled Brushes

Note: the practical files and demo is found in the Test folder of the download script.

Don’t Want To Miss Our Update, Subscribe Now
About collizo4sky

Agbonghama Collins is a webdeveloper and an internet geek. I love writing and sharing the little idea & information i know. Hope you enjoyed my Article.

You can get in touch with him via these modes: Follow him on Twitter, add him on Facebook or on Google+

  • http://www.classiblogger.com M Nirmal Anandh

    Hi,

    It will be useful for the readers related to this article. I don’t know, for what purpose we using this syntaxhighlighter. Anyway it is nice to share here.

    • http://wapden.net collizo4sky

      if you are the type of blogger that post codes, this will help you to make the code presentation pretty.

I Learn Web Design, Coding, Business & More.