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:
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:
- Line numbers with more than one digit (like
15
) should not be wrapped. - 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!