A Very Easy to Use Code Highlighter (HighLightjs)

Topics: Themes
Jul 6, 2014 at 10:32 AM
Hi All,

While on the subject of Text editors, I wanted to mention:


It is a very easy Code Highlighter.

All you do is insert this in your site.master in your theme:

<link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/default.min.css">
<script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>


$(document).ready(function ()
    $('pre').each(function (i, e) { hljs.highlightBlock(e) });

$('pre') <-- Here you can Mark up your code with what ever tag you want and it will select and highlight it for you.

So if you use <pre> Code here </pre>

$('pre').each(function (i, e) { hljs.highlightBlock(e) });

Will highlight all of your code.

Now comes the best part.

It does this automatically and detects which languages it is for you.

So nothing else is needed to be done on your end just put <pre> and </pre> and that it is it will do the rest for you!

Live Demo showing all languages it supports:


Can even have themes, Visual Studio, GitHub,Google Code, Team Foundation and etc on top of the code highlighting.
Jul 27, 2014 at 9:32 PM
Very useful :)