Crazy Dog Solutions

Blog from non-existing wannabe company documenting learning curves of modern technologies

Crazy Dog Solutions

Blog from non-existing wannabe company documenting learning curves of modern technologies

Jekyll code highlighting set-up

In theory

To render a code block with syntax highlighting, surround your code as follows:
        
{% highlight LANG [linenos] %}
def foo
    puts 'foo'
end
{% endhighlight %}
        
    
http://jekyllrb.com/docs/templates/#code-snippet-highlighting

But when it comes to execution one gets an exception about missing python2 command.

    C:\projects\blog>jekyll serve --watch --baseurl="" --trace
    Generating... C:/tools/Ruby193/lib/ruby/gems/1.9.1/gems/posix-spawn-0.3.8/lib/posix/spawn.rb:162: warning: cannot close fd before spawn
    which: no python2 in (.;C:\tools\Python27\;...)
Note Sometimes it is necessary to execute gem install wdm before getting this error. I'm describing my fix path from 'python-error' point.

Dealing with issues

  1. First we need to install newest python version. In case of my error - python2 - suggests Python 2.x version.
  2. Rename python executable python.exe to python2.exe
  3. Add python executable to your system PATH variable

Following those steps should make your project "compile" correctly with syntax highlighting.

Where are the colors ?

There is one more step required for fully functional syntax highlighting. As Jekyll documentation mentiones one need to have a proper syntax.css file compatible with pygments generated CSS classes. A reference to example file is given.

If you are not satisfied with presented results you can refer to @pygments-css

The only thing that I noticed was missing formatting for line numbers. It can be achieved by adding additional class definition to syntax styles

.highlight .lineno {
    font-style: italic;
    padding:0 10px 0 10px;
    background-color: #ececec;
    color: #aaa;
}

Note about responsive design

I noticed small issue when scaling page to smaller devices - code gets out of screen. I fixed that by adding:

.highlight pre {
    white-space: pre;
    overflow-x: auto;
    overflow-y: hidden
}

How we have a fully functional great code highlight for our page. As a final example this code snippet:

1 object HelloWorld {
2     def main(args: Array[String]) {
3         println("Hello, world!")
4     }
5 }

References

posted 16 May 2014
comments powered by Disqus