Enabling line numbers with rouge

[tp]

What version of Jekyll are you using (jekyll -v)?

=> bundle exec jekyll -v
jekyll 3.1.2

What operating system are you using?

OS X 10.11.3

What did you do?

(Please include the content causing the issue, any relevant configuration settings, and the command you ran)

Here are all the variants I tried in my _config.yml:

highlighter: rouge

linenos: true

highlight:
  linenos: true

highlight_options:
  linenos: true

What did you expect to see?

I expected source code to be output with line numbers like it was possible using pygments.

What did you see instead?

No line numbers were attached to the output HTML.

[parkr]

@tp How are you writing your code blocks? This works fine for me: https://jekyll-sandbox.herokuapp.com/parkr/5a049fcd77dc17f0121a

[tp]

I wanted to convert them to "normal" Markdown syntax with the change and write them with three ` followed by the language, like on github.

[TWiStErRob]

Yep, I was looking for this too when I was upgrading to Jekyll 3. After deciphering all the plugins that the processing goes through I ended up with this:

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

The big problem with this is that it's not possible to toggle linenos per-code-block.

[alexconst]

@TWiStErRob

I tried your solution but I'm getting some gravitational effects on the code boxes

The boxes can end up either shrinking or stretching. Any solution for that?
It actually would be great if you could override that (allowing to shrink or stretch) in the code block itself.

[TWiStErRob]

I think that's really up to you how you style your site with CSS. Anything from here on is independent of line numbers.

An obvious try would be adding width: 100% to a class to make them not shrink. Worth noting that you can do this to add stuff to divs in kramdown:

```java
code
```
{: #customID .customClass customAttr="value"}

Which helps if you want some customisations here and there. The same trick should work with {%highlight%} as well (you may have to put the {: right after the %} without a newline, I don't remember exactly).

See for example: code → rendered.

[alexconst]

@TWiStErRob

Maybe I wasn't clear. But this box size warping only happens when adding the line numbers.

I think that's really up to you how you style your site with CSS. Anything from here on is independent of line numbers.

I added a width: 30%; (the 30% is just a test) in the code element in _sass/_base.scss and I could see that everything changes proportionally. So it really doesn't help.

code

{: #customID .customClass customAttr="value"}

I'm not following you here. My web skills are very very limited so I'm likely missing something here. I tried the following (with 3 backticks):

``bash
pwd
``
{: #customID .highlighter-rouge width="200%"}

I'm guessing I need an id. But ids are only generated for headings. Even with the auto_ids: true.

BTW, your site looks pretty damn slick! Best jekyll based I've seen.
I also noticed you have a toc.md. Would it be ok for me to use it (while editing it with a link to your github)?

Thanks for the help!

[TWiStErRob]

The structure of a highlighted block with and without line numbers is totally different (div-pre-code VS table as far as I remember), and your styling should accommodate for that. You don't have to use ID, class and attributes, they're all optional: {: #customID }, {: .customClass1.customClass2 }, etc... These are just tools so that you can manipulate the generated HTML, which you should be aware of and know it well, read the source code, use the Inspector in your browser, etc. I can't teach you HTML/CSS basics here, all I can say is to modify the source code (.md file) and then check the generated .html files to see the effect of a modification, rinse and repeat. (try without {:, then add an id, or a class, etc.)

Best jekyll based I've seen.

Thanks, but careful, http://jekyllrb.com is built with Jekyll (sources) ;)
Feel free to use any file from my site, just remove my personal stuff from it, and you don't need a link me just for a few lines of code...

[jekyllbot]

This issue has been automatically marked as stale because it has not been commented on for at least
three months.

The resources of the Jekyll team are limited, and so we are asking for your help.

If you can still reproduce this error on the 3.1-stable or master branch,
please reply with all of the information you have about it in order to keep the issue open.

If this is a feature request, please consider building it first as a plugin. Jekyll 3 introduced
hooks which provide convenient access points throughout
the Jekyll build pipeline whereby most needs can be fulfilled. If this is something that cannot be
built as a plugin, then please provide more information about why in order to keep this issue open.

Thank you for all your contributions.

[TWiStErRob]

I think my #4619 (comment) answers OP's original question.

kramdown.syntax_highlighter_opts.block.line_numbers = true

is the current location of that setting. @tp what do you think?

[parkr]

I think you're right, thank you @TWiStErRob 👍

[MV10]

I was referred here to force line-numbering on. The config posted earlier failed to build, so I ended up pushing changes line-by-line until it started working. Apparently you can't specify highlighter in the markdown section (even though the docs only say Github Pages will "override" it, not that it will fail) and for some reason the start_line option causes a failure -- but it doesn't appear to be necessary, they always start with line 1 anyway. I also removed input since it isn't listed as a kramdown option (even though some of the Github Pages docs still reference it).

So if anybody else comes here, this is what works today (and note I'm defaulting the language):

markdown: kramdown
kramdown:
  syntax_highlighter: rouge
  syntax_highlighter_opts:
    default_lang: csharp
    css_class: 'highlight'
    span:
      line_numbers: false
    block:
      line_numbers: true

[Pekary]

when i apply @TWiStErRob 's _config.yml, i get all code display in one line, why this happened?

[TWiStErRob]

@Pekary that sounds like your CSS may be styling something it shouldn't? We can't know without looking at the code / live version.

[Pekary]

@TWiStErRob it like this

[TWiStErRob]

@Pekary that's a picture, to get any help you would need to share the generated HTML code + CSS in context (running in a browser) to inspect in developer tools. If you don't have a public version try to inspect use Chrome Developer Tools to see what's making it not break lines.

[vinyanalista]

For me, that worked:

kramdown:
    syntax_highlighter_opts:
        block:
            line_numbers: true

I found that here:

mmistakes/minimal-mistakes#1437

[Pekary]

@TWiStErRob you said this?