jekyllkramdownrouge

Horizontal scrollbar for fenced code blocks in Jekyll

How can I enable horizontal scrollbar for my fenced code blocks in jekyll using kramdown and rouge?

Is there any parameter I could add to my _config.yml file maybe? Essentially I want to mimic the code blocks from GitHub as shown below

horizontal scrollbar

But this is what I end up having instead

no scrollbar

Any ideas?

Solution

  • As Brad West said this wasn't a kramdown issue after all. I just had to do the following modifications to my base CSS file

    pre {
  overflow: auto; /* I added this */
  padding: 15px;
  margin-bottom: 0;
  font-size: 14px;
 /* white-space: pre-wrap; I deleted this
  word-wrap: break-word;  and this
  word-break: break-all; and also this */ 
}