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\;...)
gem install wdm before getting this error. I'm describing my fix path from 'python-error' point.
Dealing with issues
- First we need to install newest python version. In case of my error - python2 - suggests Python 2.x version.
- Rename python executable python.exe to python2.exe
- 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 }