Funky rendering in code blocks

[zmitchell]

I have a couple of issues related to code blocks:

• The spacing between lines in my code is way too large. Which Sass property should I be adjusting to fix this?
• The syntax-highlighting theme I use (manni) has a light background. When I use this the actual words have a background that matches the rest of the page, but the code block has the background color that matches the syntax highlighting theme.
• The code blocks don't scroll horizontally when they are too large, the whole page scrolls.

The background color issue is fixed in code blocks if I comment out this line:

#content:
    & code:
        // background-color: lighten($dark-grey, 10%)

but then any inline code doesn't get its background changed. That doesn't seem right because the code blocks should be under #content pre code right? I'm pretty new to all of this web stuff, so hopefully you can help me figure out what's going on!

[victoriadrake]

Hey @zmitchell !

Code line spacing: _elements.sass line 34 defines styles for pre. You can add line-height: xxx to control the line height in your code blocks.

What are you using for your syntax highlighting? Hugo has built-in functionality with Chroma, Pygments, and there is also highlightjs.

Fixed scrolling for wide code blocks issues.