New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enabling line numbers with rouge #4619

Closed
tp opened this Issue Mar 1, 2016 · 17 comments

Comments

Projects
None yet
8 participants
@tp

tp commented Mar 1, 2016

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

This comment has been minimized.

Show comment
Hide comment
@parkr

parkr Mar 1, 2016

Member

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

Member

parkr commented Mar 1, 2016

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

@parkr parkr added the undetermined label Mar 1, 2016

@tp

This comment has been minimized.

Show comment
Hide comment
@tp

tp Mar 2, 2016

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

tp commented Mar 2, 2016

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

This comment has been minimized.

Show comment
Hide comment
@TWiStErRob

TWiStErRob Mar 2, 2016

Contributor

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.

Contributor

TWiStErRob commented Mar 2, 2016

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

This comment has been minimized.

Show comment
Hide comment
@alexconst

alexconst Mar 3, 2016

@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.

alexconst commented Mar 3, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@TWiStErRob

TWiStErRob Mar 3, 2016

Contributor

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: coderendered.

Contributor

TWiStErRob commented Mar 3, 2016

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: coderendered.

@alexconst

This comment has been minimized.

Show comment
Hide comment
@alexconst

alexconst Mar 3, 2016

@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!

alexconst commented Mar 3, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@TWiStErRob

TWiStErRob Mar 3, 2016

Contributor

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...

Contributor

TWiStErRob commented Mar 3, 2016

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 comment has been minimized.

Show comment
Hide comment
@jekyllbot

jekyllbot Jun 6, 2016

Contributor

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.

Contributor

jekyllbot commented Jun 6, 2016

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.

@jekyllbot jekyllbot added the stale label Jun 6, 2016

@TWiStErRob

This comment has been minimized.

Show comment
Hide comment
@TWiStErRob

TWiStErRob Jun 9, 2016

Contributor

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?

Contributor

TWiStErRob commented Jun 9, 2016

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?

@jekyllbot jekyllbot removed the stale label Jun 9, 2016

@parkr

This comment has been minimized.

Show comment
Hide comment
@parkr

parkr Jun 13, 2016

Member

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

Member

parkr commented Jun 13, 2016

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

@MV10

This comment has been minimized.

Show comment
Hide comment
@MV10

MV10 Dec 29, 2017

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

MV10 commented Dec 29, 2017

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

mbtamuli added a commit to mbtamuli/mbtamuli.github.io that referenced this issue Aug 2, 2018

Blog Version 0.0.2
1. Add categories and *random* category for Hello, World post
2. Add collections and find.md to *cli* collection
3. Configure homepage to show excerpts and *Read more* link
4. Change markdown renderer to kramdown per jekyll/jekyll#4619 (comment)
5. Add a draft
5. Add a fix for not wrapping lines in code block

Signed-off-by: Mriyam Tamuli <mbtamuli@gmail.com>
@Pekary

This comment has been minimized.

Show comment
Hide comment
@Pekary

Pekary Aug 15, 2018

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

Pekary commented Aug 15, 2018

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

@TWiStErRob

This comment has been minimized.

Show comment
Hide comment
@TWiStErRob

TWiStErRob Aug 15, 2018

Contributor

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

Contributor

TWiStErRob commented Aug 15, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@Pekary

Pekary commented Aug 15, 2018

@TWiStErRob it like this image

@TWiStErRob

This comment has been minimized.

Show comment
Hide comment
@TWiStErRob

TWiStErRob Aug 15, 2018

Contributor

@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.

Contributor

TWiStErRob commented Aug 15, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@vinyanalista

vinyanalista Sep 5, 2018

For me, that worked:

kramdown:
    syntax_highlighter_opts:
        block:
            line_numbers: true

I found that here:

mmistakes/minimal-mistakes#1437

vinyanalista commented Sep 5, 2018

For me, that worked:

kramdown:
    syntax_highlighter_opts:
        block:
            line_numbers: true

I found that here:

mmistakes/minimal-mistakes#1437

vinyanalista added a commit to vinyanalista/material-jekyll that referenced this issue Sep 5, 2018

@Pekary

This comment has been minimized.

Show comment
Hide comment
@Pekary

Pekary Sep 6, 2018

image
@TWiStErRob you said this?

Pekary commented Sep 6, 2018

image
@TWiStErRob you said this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment