title: Style Jekyll page using Rouge similar to GitHub Gist
body: <p>Due to the GDPR regulation, I'm migrating all of my embedded Gists on my Jekyll-based GitHub Page <a href="https://mu88.github.io" rel="nofollow noreferrer">https://mu88.github.io</a> to Rouge.</p>
  <p>When enabling line numbers in Rouge, the result looks pretty messy compared to Gist:</p>
  <div class="s-table-container">
  <table class="s-table">
  <thead>
  <tr>
  <th></th>
  <th>Rouge</th>
  <th>Gist</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>Example 1</td>
  <td><a href="https://i.stack.imgur.com/MO2fd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MO2fd.png" alt="enter image description here" /></a></td>
  <td><a href="https://i.stack.imgur.com/XIQrv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XIQrv.png" alt="enter image description here" /></a></td>
  </tr>
  <tr>
  <td>Example 2</td>
  <td><a href="https://i.stack.imgur.com/UcjZY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UcjZY.png" alt="enter image description here" /></a></td>
  <td><a href="https://i.stack.imgur.com/Jr5XM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jr5XM.png" alt="enter image description here" /></a></td>
  </tr>
  </tbody>
  </table>
  </div>
  <p>Here is the relevant part from <code>_config.yml</code>:</p>
  <pre class="lang-yaml prettyprint-override"><code>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
  </code></pre>
  <p>I embedded the code like this:</p>
  <pre class="lang-markdown prettyprint-override"><code>{% highlight shell lineos %}
  #!/bin/sh
  pwsh -noprofile C:/source/GitHub/config/hooks/Git_EnsureConventionalCommitMessage.ps1 $1
  {% endhighlight %}
  </code></pre>
  <p>I'd like to solve the following two things:</p>
  <ol>
  <li>Line numbers with more than one digit (like <code>15</code>) should not be wrapped.</li>
  <li>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.</li>
  </ol>
  <p>For the moment, I've disabled displaying the line numbers as it simply doesn't look good to me.</p>
  <p>Which Rouge parameters do I have to set to style the line numbers and wrapping nicely?</p>
  <p>I've configured one code snippet with both the Gist and Rouge (<a href="https://mu88.github.io/2020/02/07/Refactor-Dependency-Injection.html" rel="nofollow noreferrer">see here and scroll down a bit</a>) to better compare the differences.</p>
  <p>Thanks!</p>