Why the "linenos" option fails to add the line number in Jekyll?

Question

I am using jekyll to generate my website. I want to add a line number column to my code block. I searched google, and everyone told me to add a "linenos" option to the hightlight tag, but i doesn't work in my case:

{% highlight ruby linenos %}
def foo():
puts 'foo'
end
{% endhighlight %}

The highlight is working well, but the line numbers....

Could you help me with this? If you want to see the source css/html files, hit here.

Thanks!

Further checking:

the html generated for this section is :

<div class="highlight"><pre><code class="ruby">
    <span class="k">def</span> <span class="nf">foo</span><span class="p">():</span>
    <span class="nb">puts</span> 
    <span class="s1">&#39;foo&#39;</span>
    <span class="k">end</span>
</code></pre></div>

Answer 1

I cloned your repo, generated the site, and check it out in the browser. Everything looks fine. (I like your layout!) That indicates to me that there's something funky in your setup. Is the code highlighting working for you? If not, you may not have Pygments set up correctly.

To install:

sudo apt-get install python-setuptools
sudo easy_install Pygments

To generate the css:

pygmentize -S default -f html > default.css

Make sure you have pygments: true in your _config.yml.

Make sure to place this stylesheet appropriately and include it in your default.html.

I see that you already have this stylesheet included in your page and your _config.yml seems fine, but for anybody else needing this answer, there it is.

If you generate the site with jekyll --no-auto do you see any errors in the output?

Let me know, and I'll be glad to try and help further. :)

---

Update: This is the HTML that's generated for me for the highlight test blog post you have.

<div class="highlight"><pre><code class="c"><span class="lineno">1</span> <span class="cp">#include &lt;stdio.h&gt;</span>
<span class="lineno">2</span> 
<span class="lineno">3</span> <span class="kt">int</span> <span class="nf">main</span><span class="p">()</span>
<span class="lineno">4</span> <span class="p">{</span>
<span class="lineno">5</span>   <span class="n">printf</span><span class="p">(</span><span class="s">&quot;Hello World!</span><span class="se">\n</span><span class="s">&quot;</span><span class="p">);</span>
<span class="lineno">6</span>   <span class="k">return</span> <span class="mi">0</span><span class="p">;</span>
<span class="lineno">7</span> <span class="p">}</span>
</code></pre>
</div>

Answer 2

I was just experiencing the same issue with pygments and jekyll. My markdown looked as

{% highlight c# linenos %}

    //my code

{% endhighlight %}

and the resulting generated HTML

<div class="highlight">
    <pre>
        <code class="c">
            ...
        </code>
    </pre>
</div>

The highlighting was somehow odd and no line numbers have been added. Ultimately the problem was that Pygments apparently didn't recognize "c#" as a valid language, but instead I had to add "csharp".

(just in case someone else has this issue when setting it up)

Answer 3

I did the same thing. Although line number were showing the css wasn't being beautiful. The main reason was that bootstrap was conflicting with my style.css. Adding the following to the style.css resolved it.

.highlight pre {
    background-color: transparent;
    border: transparent;
    color: inherit;
}