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.  

Reading Excel File Code in C#

In your ASP.NET website you can easily read any excel file using C# code and show its contents on a div.

For this first include the namespaces in your page:

using System.Web;

using System.Data.OleDb;

using System.Text;

Then add the Code to Read Excel File:

string path = Server.MapPath("~/Upload/myexcel.xlsx");

string excelConnectionString = @"Provider='Microsoft.ACE.OLEDB.12.0';Data Source='" + path + "';Extended Properties='Excel 12.0 Xml;HDR=NO;IMEX=1'";

OleDbConnection excelConnection = new OleDbConnection(excelConnectionString);

excelConnection.Open();

string tableName = excelConnection.GetSchema("Tables").Rows[0]["TABLE_NAME"].ToString();

OleDbCommand cmd = new OleDbCommand("Select * from [" + tableName + "]", excelConnection);

StringBuilder sb = new StringBuilder();

sb.Append("<table>");

OleDbDataReader dReader = cmd.ExecuteReader();

do

{

    int count = dReader.FieldCount;

    while (dReader.Read())

    {

        sb.Append("<tr>");

        for (int i = 0; i < count; i++)

        {

            sb.Append("<td>" + dReader.GetValue(i) + "</td>");

        }

        sb.Append("</tr>");

    }

} while (dReader.NextResult());

sb.Append("</table>");

excelConnection.Close();

Explanation: In the above read excel code you can see the variable “path” contains the path of excel file in the website directory. In my case it is in the “Upload” directory which is located on the website root folder.

I used “OLEDB” drivers to read the excel file, make sure to add “HDR=NO” in the connection string extended properties so that excel file’s header columns are also read.

Finally I used the “OleDbDataReader” class to loop though every row and their columns, adding them to my “StringBuilder” object named “sb”.

The “sb” variable contains the excel records in html table format, you can show its value inside a div.

In ASP.NET Web Forms you can do like:

dataDiv.InnerHtml=sb.ToString();

In ASP.NET MVC you can do like:

First saving the sb.ToString() in ViewBag variable in Controller:

ViewBag.Result = sb.ToString();

Then in the view:

<div id="dataDiv">

    @(new HtmlString(ViewBag.Result))

</div>

This is how the excel data will be shown in the div: