Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set pre overflow to auto and make bg !important #9

Merged
merged 1 commit into from
Aug 9, 2021

Conversation

mntn-xyz
Copy link
Contributor

@mntn-xyz mntn-xyz commented Aug 1, 2021

Fixes 2 issues:

  1. In Firefox, overflow: scroll puts an ugly unscrollable scrollbar on the page. With auto it behaves as normal but the scrollbar only appears when needed.
  2. When using code highlighting, the generated Hugo styles replace the pre background color, making the page look ugly (only the text has a background, not the entire pre block). Setting the background !important fixes this. This is not ideal, but the Hugo code highlighter applies the styles directly to the element, so this is the only way to override them.

Tested on Firefox and Chrome.

Fixes 2 issues:
1. In Firefox, overflow: scroll puts an ugly unscrollable scrollbar on the page. With auto it behaves as normal but the scrollbar only appears when needed.
2. When using code highlighting, the generated Hugo styles replace the <pre> background color, making the page look ugly (only the text has a background, not the entire <pre> block). Setting the background !important fixes this. This is not ideal, but the styles are applied directly to the element when using the internal highlight shortcode, so this is the only way to override them.

Tested on Firefox and Chrome.
@mntn-xyz
Copy link
Contributor Author

mntn-xyz commented Aug 1, 2021

I'll add that you can see an example of how the code blocks currently (mis)behave on the sample site: https://risotto.joeroe.io/post/markdown-syntax/

@joeroe
Copy link
Owner

joeroe commented Aug 9, 2021

It is annoying that hugo forces us to use !important. I've opened #16 just in case, but for now I can't see another way either.

@joeroe joeroe merged commit e46b833 into joeroe:main Aug 9, 2021
@mntn-xyz mntn-xyz deleted the patch-6 branch August 24, 2021 13:11
@rajabebek
Copy link

Add this in config toml

PygmentsCodeFences = true
PygmentsStyle = "solarized-dark256"

If u want more hightlight themes style try this
https://swapoff.org/chroma/playground/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants