How to display code blocks with word wrap and line number with jekyll markdown on github-pages

Question

I am using github pages to host my blog. It uses GitHub Flaword Markdown. Here is part of

_config.yml

:

markdown: kramdown

# Use Github Flavored Markdown

kramdown:

  input: GFM

My articles often contain long lines of code, and I would like to display it with word wrap(so it can be all seen without scrolling) and with line numbers(that allow to distinguish new line from word warp).

I found, that I can enable word wrap, if I use this css property for

<pre>

tag:

white-space: pre-wrap

. But how can I display line numbers? I am looking for solution that will allow me to continue using github-pages built-in jekyll, that generates blog pages for me automatically.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Sorry, but wrapping long lines in code highlight doesn't work with line numbers.

{% highlight ruby linenos %}
def dosomething
  delegate :some, :thing, :with, :unicorns, :and, :shrimps => :yolo, :someother key => true, :maybeonemore => true
end
{% endhighlight %}

See Jekyll documentation.

And CSS wrapping for long lines :

.highlight pre{
  white-space: pre-wrap;
}

But finally this problem cannot be resolved with just jekyll or kramdown/rouge config.

This, because, line numbers are stacked in a <td> near the code <td>.

If you can wrap code, line numbers are not wrapping accordingly, and it ends up like this :

  def foo
1    wrapped very long line
2  wrapped very long line continues here
3
  end

How to display code blocks with word wrap and line number with jekyll markdown on github-pages

Sign up