CODEWITHSUNDEEP
cssjekyll
Selivanov Pavel
Selivanov Pavel

Reputation: 360

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

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.

Upvotes: 6

Views: 7355

Answers (2)

Sanjida Kabir
Sanjida Kabir

Reputation: 1

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

Upvotes: -1

David Jacquel
David Jacquel

Reputation: 52809

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

Upvotes: 5

Related Questions