Aug 25 2015 0

Improving syntax highlighting

Since I have turned on line-numbering for code blocks, it gets applied to all blocks of code. This has a couple of downsides

  • Numbering and syntax-highlighting gets applied to every code block regardless if it is displaying programming code or not
  • Line-numbering always starts at line 1, when sometimes the code displayed is an excerpt of a larger piece

Ideally I wanted to support the following three scenarios for code blocks

Scenario 1 - Code block

# Connect to SQLite database
con = sql.connect( '/var/sqlite/sensor-data.sqlite' )
cur = con.cursor()

Scenario 2 - Code block + syntax highlighting

# Connect to SQLite database
con = sql.connect( '/var/sqlite/sensor-data.sqlite' )
cur = con.cursor()

Scenario 3 - Code block + syntax highlighting + line-numbering


# Connect to SQLite database
con = sql.connect( '/var/sqlite/sensor-data.sqlite' )
cur = con.cursor()


After some tinkering with some jQuery and CSS I can now specify to which blocks line-numbering and syntax-highlighting should be applied.

I can now add syntax highlighting by adding the tags <pp></pp> before the block of code that I wanted syntax highlighting for. If the block requires line-numbering I can add <pp>1</pp> instead. The number between the tags indicates from what the number for the first line of code should be.

You can view the Markdown code for this post here.

jQuery code


        var val = $(this).text();
        if ( val ) {
            $(this).next('pre').addClass('prettyprint linenums:'+val);
        } else {          

this code replaces the initial code mentioned under ’Changes to scripts.js’ in the post Changing the styling of my blog.

Additional CSS added to ‘style.css’

This is needed to hide the content of the <pp>-tag when specifying the starting line-number for code sections. 1

/* Hiding custom tags */
pp {
    display: none;

Previous post
Migration complete All of the post previously hosted on have now been migrated to, except for the posts that were related to styling of the blog
Next post
Creating a tag cloud Although supports tags, it does not have a page displaying all of the tags used on your blog. A post will list the tags associated with it,
This blog is powered by Blot