4

Is there anyway to add vertical scroll bars in Jekyll for really long code? I tried adding a Height attribute in _syntax.scss but with no luck. The syntax highlighter I'm using is rouge and the theme I'm using is here: https://github.com/mmistakes/hpstr-jekyll-theme

Supercap2F
  • 45
  • 4

1 Answers1

3

Yes, make sure you add this CSS to your theme:

pre.highlight {
  max-height: 200px; /* Change to your desired max height */
  overflow-y: scroll;
}

Update. Using the OP URL provided here's what I did:

Lookp where the class highlight is defined and add this to the end of its declaration:

.highlight {
  [...]
  border: 1px solid #dbdbdb;
  background-color: #272822;
  border-radius: 3px;

/** This part **/
  max-height: 300px;
  overflow-y: auto;
}

Results: After new CSS

Vallieres
  • 859
  • 7
  • 19
  • That kinda works if you put it under the pre tag instead of pre.highlight, but it looks funny: https://raw.githubusercontent.com/Supercap2F/supercap2f.github.io/master/images/funnycode.png – Supercap2F Jul 20 '16 at 22:18
  • Did you put overflow or overflow-y? Looks like overflow to me, unless you have other CSS that interferes. I tried it on the Hpstr theme page directly and it worked fine. – Vallieres Jul 20 '16 at 22:20
  • I put overflow-y just like your code, and I don't think I have any custom css that would effect it. Also I tried putting that code under .highlight and here's how it came out: https://raw.githubusercontent.com/Supercap2F/supercap2f.github.io/master/images/funnypic2.png It doesn't have the themes style and doesn't show the bottom scroll bars until you scroll all the way down. – Supercap2F Jul 20 '16 at 22:28
  • Cool if you site is live I could also take a look at the end result. And propose the exact CSS you need. – Vallieres Jul 20 '16 at 22:49
  • That might work! This is the page: https://supercap2f.github.io/CPU-Power-Supply-Mod/. Scroll all the way down for the code block. – Supercap2F Jul 21 '16 at 00:00
  • Updated my answer :) – Vallieres Jul 23 '16 at 19:24
  • Just learning so just asking if instead of `max-height: 300px;` it could be something like `max-height: 80%`? I have 3 different pixel heights on different machines Also I'm thinking 80% of browser window not hardware because 4k monitor browser window might only be 40% high.. – WinEunuuchs2Unix Dec 01 '21 at 01:58