I use a lot of code blocks in my writing so I wanted to look at my options for how to format them now that I’m using Jekyll. Wordpress had me install extra plugins to get syntax highlighting.

This is the code block I’m using as a test. It includes a class, a property, and a method so I’m hoping it will give me a good cross section of my options.

<?php
class User extends Model 
{
    protected $variable = null;

    public function getVariable()
    {
        return $this->variable;
    }
}

Four Spaces

Markdown (which I’m a huge supporter of) allows you to use four spaces at the beginning of a line to indicate a code block.

Input

See above.

Output

<?php
class User extends Model 
{
    protected $variable = null;

    public function getVariable()
    {
        return $this->variable;
    }
}

This option is the easiest but it doesn’t provide any syntax highlighting.

pre and code

Input

<pre><code>[code here]</pre></code>

Output

I’m not showing the example of this because it messed up the rest of my page layout but the end result is what occurs in the Four Spaces section above (because that’s how Markdown converts the four spaces). This option also doesn’t provide syntax highlighting.

Using Highlight Blocks

Jekyll support using highlight blocks which get passed into something that syntax highlights the code. I’m super happy with the results.

Input

{% highlight php %}
[code here]
{% endhighlight %}

Output

<?php
class User extends Model 
{
    protected $variable = null;

    public function getVariable()
    {
        return $this->variable;
    }
}

startinline option

One of the things I don’t like about using the highlight option is that in order to get my code to syntax highlight correctly I need to start it with <?php. It wouldn’t be a huge problem but Sublime Text assumes everything after that start PHP code is PHP and messes up syntax highlighting while I’m writing.

If I add startinline to the highlight start it removes this requirement.

Input

{% highlight php startinline %}
[code here (minus the <?php)
{% endhighlight %}

Output

class User extends Model 
{
    protected $variable = null;

    public function getVariable()
    {
        return $this->variable;
    }
}

linenos

Another option I ran accross is the option to tell Jekyll to display line numbers. The downside to this is that it’s hard to copy and paste the text from here. However if you look at the “linenos with Tables” section theres a better option.

Input

{% highlight php startinline linenos%}
[code here]
{% endhighlight %}

Output

1
2
3
4
5
6
7
8
9

class User extends Model 
{
    protected $variable = null;

    public function getVariable()
    {
        return $this->variable;
    }
}

linenos with Tables

Input

{% highlight php startinline linenos=table %}
[code here]
{% endhighlight %}

Output

1
2
3
4
5
6
7
8
9

class User extends Model 
{
    protected $variable = null;

    public function getVariable()
    {
        return $this->variable;
    }
}

Overall

Overall, I think {% highlight php startinline %} is the best option with {% highlight php startinline linenos=table%} a close second when you need to refer to a specific line.