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.

Blacktop

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

Crocein

Thank you, that works, but not with white-space: pre-wrap :( Is there any way to have both line number and word wrap in jekyll? – Blacktop

So maybe, you can approve my answer. For me the white-space problem deserve another question. – Crocein

I will approve it after some time, waiting for somebody to give us a complete solution, both with numbers and word wrap. – Blacktop

{% highlight lineos %} together with wite-space: pre-wrap and long code lines works incorrectly :( – Blacktop

Answer 2

Code::Blocks version 20.03 for wrap code line settings<Editor<General Settings<Other Editor Settings<Word Wrap

Turmoil