search

jekyllt / jasper2

Full-featured Jekyll port of Ghost's default theme Casper v2 👻
https://jekyllt.github.io/jasper2/
MIT License
763 stars 659 forks source link

Fix Width of Code Blocks #115

Closed dumrauf closed 3 years ago

dumrauf commented 3 years ago

Jasper2 leverages rouge for syntax highlighting in code blocks. And that's cool. Colours matter.

But where Casper fixes the width of code blocks to 100%, Jasper2 leaves it to the code to find its own width. This results in short code blocks not covering the full width of the text. Very wide code blocks run the entire width of the page - ignoring any text width.

When aligning with the original Casper 2 design, code blocks should have 100% width by default. It seems like there are already preparation for this in place, such as in code block https://github.com/jekyller/jasper2/blob/5f35ccbf30f0f3c103b09f0deed016f46f002c2b/assets/css/screen.edited.css#L119-L129

My suggestion would be to add CSS for the enclosing .highlighter-rouge DIV that mimics the Casper 2 behaviour.

spirosbax commented 3 years ago

tested on my own fork, works perfect!