search

colorchestra / smol

A minimal, monospaced blogging theme for Hugo that respects your privacy and is easy on your bandwidth.
MIT License
260 stars 85 forks source link

code style in CSS overrides syntax highlighting in code-fenced blocks #4

Closed benghancock closed 4 years ago

benghancock commented 4 years ago

Hi Morph,

I really love this theme -- thanks for creating it! I've noticed an issue with syntax highlighting for code-fenced sections. It seems that the black background inherited from code in style.css is overriding the background color rendered by Hugo for highlight blocks.

Here's an example of a python code-fenced block with the default highlight theme:

smol-code-screenshot

It's more obvious when changing to a lighter highlight style, like "friendly" (as opposed to the default "monokai"):

smol-code-screenshot-light

I've tried switching on pygmentsUseClasses=true and generating corresponding CSS, per the Hugo docs, but no luck. If I comment out the code line in the CSS, that fixes the issue for the code-fenced blocks, but obviously then I lose the highlighting for all the inline code snippets.

Any ideas? Am I missing something obvious?

colorchestra commented 4 years ago

Hey @benghancock - thanks for opening this issue! @pfandzelter has fixed it before I could even do anything.

The reason for this bug in the first place is that I have no idea what I'm doing when it comes to frontend things (or theme development, or Hugo). Good to see that other people do :) I didn't even know syntax highlighting was possible, I only ever intended and tested codeblocks with plain white text on a black background.