How to use SyntaxHighlighter in your website

SyntaxHighlighter is a JavaScript code that highlights programming languages codes in different colors and fonts. This helps to understand the codes when you are reading it. SyntaxHighlighter works on all programming languages and scripts like C#, asp.net, SQL, jQuery, JavaScript, php, python, etc.

DEMO HERE

Today nearly all programming tutorial websites use SyntaxHighlighter for highlighting their demo codes.

Using SyntaxHighlighter in your Website

Let us use SyntaxHighlighter for highlighting codes in a web page.

Follow the steps:

1. Include the SyntaxHighlighter Core & default theme CSS links in the page head.

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

2. Include the SyntaxHighlighter brushes (JS file links) in the page head.

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript"></script>

3. Add the JavaScript function in the page head.

<script language="javascript">

    SyntaxHighlighter.all();

</script>

Now whenever you want to highlight a code, add your code inside the pre lines:

<pre class="brush: js">

//code

</pre>

In the above code I used the JS brush, you can use any of the available brushes. The information about the brushes is available here.

SyntaxHighlighter Example

Let us add 3 block of codes –for jQuery, C# and HTML.

Note - Brushes used here are js, csharp and html.

Add the below code to your page:

jQuery Code

<pre class="brush: js">

    $(document).ready(function(){

        $("p").click(function(){

            $(this).hide();

        });

    });

</pre> 

C# Code

<pre class="brush: csharp">

    public int AddNumbers(int number1, int number2)

    {

        int result = number1 + number2;

        return result;

    }

</pre>

<h3>HTML Code</h3>

<pre class="brush: html">

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

</pre>

When you open the page in the web browser this is how it will look:

Conclusion

You can see how to code are highlighted with SyntaxHighlighter in the jQueryLoad method page.

You will love using SyntaxHighlighter in your web page like I do.