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

Issue

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>

Solution

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>

Answered By – Curtis

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.