Update: Syntax Highlighter

Last update on Nov. 11, 2013.

Okay, just crashed the site for about 15 minutes because of a missing template tag but now that it's back up, it's time to test out this new neat toy:

Highlight.js is a very simple javascript library whose purpose is to, well, highlight bits of code on your webpage.

To test it out, i figured i'd post a short tutuorial on how to actually use it.

First, just go to the lib's website and click the download link. You'll end up on a page asking you which language you want to support (the most common ones like html, php, C or java are already checked, and it's up to you to get rid of some or add one or several of the more "exotic" languages. I took 'em all because i'm greedy, and to hell with the 93ko filesize \o/).

In the downloaded zip package, you'll find:


  • The actual script, named highlight.pack.js

  • A style folder, containing a bunch of css files defining the several themes available

Just place the script wherever you store your js stuff, and do the same with the css file corresponding to your chosen style (you can get a preview of the provided themes here).
(I uploaded all the css stylesheets for now, so i can try out different themes easily. This is quite space wasting tho, so i'll probably delete most of them once i've made up my mind about which style to keep).

Once that's done, include the script like any other js script:


<script src='path/to/js/stuff/highlight.pack.js'></script>

Then, you need to initialize the highlighter with the following one liner (i put it at the bottom of my base template for fast loading):


<script>hljs.initHighlightingOnLoad();></script>

Don't forget to link to the css stylesheet in your page head section so that the coloration will actually work.

And then... you're basically done!
All you have to do is put your code snippets between both a pre and a code html tag, like so:


<pre>
<code>
your.code();
if (stuff) {
do_this();
}
</code>
</pre>

(I'm not sure, but the i think the <pre> tag is not required and mostly there to ensure the code will still look a bit different if javascript is not enabled).

The highlighter script will automagically find out which language you're using and highlight it according to the chosen stylesheet.

You can also tell him explicitely which language you're using by adding a class to the code tag, like so:


<pre>
<code class='python'>
...

I'm obviously using it to display the "tutorial"'s snippet on this very blog post.
There's probably more ways you can customize it, i haven't looked very deeply into the docs yet. I noticed a plugin page providing lotsastuff, but i haven't really investigated it either.

I know there are quite a lot of javascript highlighters out there, and i have no clue how good this one is compared to its comptetitors. I simply chose it because i pretty much stumbled upon it by chance and it looked simple enough. I'll probably play around with some of the other ones someday.

The theme i'm using right now is the github one, but this will probably change quite often in the near future.

And to end this boring post, here's some random python code looking just like it's on its own git repo, yay \o/ !


class MsgBox(Widget):
"""A non interactive messaging widget"""
def __init__(self, width, height, text, con=None,
forecolor=tcod.white, backcolor=tcod.black,
title=None, framed=True, frame_color=tcod.white,
forealpha=1, backalpha=0.6):

Widget.__init__(self, width, height, con,
forecolor, backcolor, title, framed, frame_color,
forealpha, backalpha)

Label(1, 1, self.w - 1, self.h -1, text,
self.forecolor, self.backcolor, self)

(this is from a small project i might talk about someday that i really should get back to before i forget all about it).

UPDATE:
Well obviously it wasn't THAT simple... but still not TOO messy so that's okay.
the method i just described works great in a static page like one you might hack quickly to see how the library works, but apparently it doesn't handle generated code so well (and most of this site's html IS generated by django).
If you use JQuery, the fix is to replace the one liner initialization script with this slightly more complex one, which highlights each pre/code block "manually":


Comments

Comments are closed.

Pingbacks

Pingbacks are closed.

Trackbacks

  1. deer antler spray reviews youtube on 02/10/2015 11:27 p.m. #

    Fried Chicken And Gazoline - Update: syntax highlighter

  2. braces options on 02/10/2015 11:44 p.m. #

    Fried Chicken And Gazoline - Update: syntax highlighter

  3. Suggested Internet page on 02/12/2015 1:10 a.m. #

    Fried Chicken And Gazoline - Update: syntax highlighter

  4. hampton bay fans on 02/16/2015 9:38 a.m. #

    Fried Chicken And Gazoline - Update: syntax highlighter

  5. personal loan pros on 02/16/2015 11:49 a.m. #

    Fried Chicken And Gazoline - Update: syntax highlighter

  6. Hampton Bay lighting fans on 02/17/2015 6:16 a.m. #

    Fried Chicken And Gazoline - Update: syntax highlighter

  7. churn and burn blackhat on 02/17/2015 7:51 a.m. #

    Fried Chicken And Gazoline - Update: syntax highlighter

  8. churn and burn sales strategy on 02/17/2015 11:36 a.m. #

    Fried Chicken And Gazoline - Update: syntax highlighter

  9. hampton bay fan on 02/17/2015 10:41 p.m. #

    Fried Chicken And Gazoline - Update: syntax highlighter

  10. hampton bay lighting fans on 02/18/2015 3:46 a.m. #

    Fried Chicken And Gazoline - Update: syntax highlighter

  11. click this link here now on 02/18/2015 7:23 a.m. #

    Fried Chicken And Gazoline - Update: syntax highlighter