1

Due to the GDPR regulation, I'm migrating all of my embedded Gists on my Jekyll-based GitHub Page https://mu88.github.io to Rouge.

When enabling line numbers in Rouge, the result looks pretty messy compared to Gist:

Rouge Gist
Example 1 enter image description here enter image description here
Example 2 enter image description here enter image description here

Here is the relevant part from _config.yml:

markdown: kramdown
# !github-pages! mandatory › https://help.github.com/articles/using-jekyll-with-pages/#configuration-settings-you-cannot-change
# Since Jekyll 3 the default highlighter is Rouge (replaced Pygments.rb in v44)
highlighter: rouge

# More › http://kramdown.gettalong.org/quickref.html
# Options › http://kramdown.gettalong.org/options.html
kramdown:
  input:          GFM
  # https://github.com/jekyll/jekyll/pull/4090
  syntax_highlighter: rouge

  # Rouge Highlighter in Kramdown › http://kramdown.gettalong.org/syntax_highlighter/rouge.html
  # span, block element options fall back to global
  syntax_highlighter_opts:
    # Rouge Options › https://github.com/jneen/rouge#full-options
    css_class: 'highlight'
    #line_numbers: true # bad idea, spans don't need linenos and would inherit this option
    span:
      line_numbers: false
    block:
      line_numbers: true
      start_line: 1

I embedded the code like this:

{% highlight shell lineos %}
#!/bin/sh
pwsh -noprofile C:/source/GitHub/config/hooks/Git_EnsureConventionalCommitMessage.ps1 $1
{% endhighlight %}

I'd like to solve the following two things:

  1. Line numbers with more than one digit (like 15) should not be wrapped.
  2. Long code lines should not be wrapped. Instead, I'd like to have a scroll bar and the visible width should adjust nicely to the enclosing text.

For the moment, I've disabled displaying the line numbers as it simply doesn't look good to me.

Which Rouge parameters do I have to set to style the line numbers and wrapping nicely?

I've configured one code snippet with both the Gist and Rouge (see here and scroll down a bit) to better compare the differences.

Thanks!

mu88
  • 4,156
  • 1
  • 23
  • 47
  • Have you tried adding `overflow: auto;` on your CSS for code blocks? Your Rouge code is wrapping, GitHub gists is not. – Christian Oct 04 '22 at 21:03

0 Answers0