Search code examples
cssjekylljekyll-extensionskramdownrouge

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

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
````
Solution

  • 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;
}