Horizontal scrollbar for fenced code blocks in Jekyll

Question

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

But this is what I end up having instead

Any ideas?

You should show us how this code is written in your `.md` file, really, because the issue could well be there. — β.εηοιτ.βε, Jun 29 '20 at 17:22
The code in the markdown file is formatted exactly the same as the GitHub markdown files are I.e I use three quotes ``` language followed by code and I end this also with``` I will post my markdown file if need in a bit. — ThanosFisherman, Jun 29 '20 at 17:31

score 1 · Answer 1 · answered Jun 30 '20 at 15:53

1

This is a CSS overflow issue, not a Jekyll issue.

Add the following to your pre element:

pre {
  overflow-x: auto;
}

answered Jun 30 '20 at 15:53

Brad West

943
7
19

You are right I also had to delete some other css parameters as well. I will post my complete answer soon. – ThanosFisherman Jun 30 '20 at 18:40

score 1 · Accepted Answer · answered Jun 30 '20 at 18:44

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 */ 
}

Horizontal scrollbar for fenced code blocks in Jekyll

2 Answers2