Prevent line-wraps of code blocks using jekyll, kramdown, and rouge

Question

Using kramdown and rouge for markdown syntax-highlighting in a jekyll blog, I'd like to prevent long lines of code from wrapping onto a new line. I'd like to be able to use a horizontal scrollbar to reveal the rest of the content.

Here is the jekyll config:

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

I'm using the base16.solarized.dark css theme generated by the rougify command.

Here is an example code usage:

```` js
console.log("some code") // and a really really long long long comment which i'd like to not wrap onto the next line
````

Impossible to debug without seeing your css stack. Can you provide a repository link ? — David Jacquel, Apr 14 '16 at 09:09
https://github.com/data-creative/data-creative.github.io/ using twitter bootstrap and base16.solarized.dark for css - thanks! — s2t2, Apr 14 '16 at 13:37

score 7 · Accepted Answer · answered Apr 14 '16 at 16:15

7

Boostrap is adding a white-space: pre-wrap rule in order to help code block readability.

If you want you code block to avoid this wrap, you can edit your css/data-creative.css and add

pre code{
  white-space: pre;
}

answered Apr 14 '16 at 16:15

David Jacquel

51,670
6
121
147

I tried setting this property before but maybe I was applying it on the wrong element/ set of elements. Thank you! – s2t2 Apr 15 '16 at 00:13

score 2 · Answer 2 · answered Apr 14 '16 at 15:02

2

You have somewhere a CSS rule that for the code element sets white-space: pre-wrap. Add the following rule to override it:

code {
    white-space: pre;
}

answered Apr 14 '16 at 15:02

Alex Palcuie

4,434
3
22
27

score 2 · Answer 3 · edited Oct 27 '20 at 12:49

2

I solved it like this:

pre {
    ...
    overflow-x: scroll;
}

edited Oct 27 '20 at 12:49

Yunnosch

26,130
9
42
54

answered Oct 27 '20 at 12:40

Enes Başpınar

33
7

Prevent line-wraps of code blocks using jekyll, kramdown, and rouge

3 Answers3