Adding code snippets breaks dark theme
Ppjet6 opened this issue · 18 comments
I have checked all the prerequisites below and I'm yet experiencing a problem
- Read the README.md
- Have the extended version of Hugo installed
- Used the exampleSite's config.toml as a reference
Describe the bug
When I use blockquotes in markdown, the blockquote is properly displayed on the page but I am forced back in the light theme and it's not possible to change this. It also breaks some other parts of the page, such as parts of the left navbar.
Desktop (please complete the following information):
- OS: Linux
- Browser: Firefox nightly 111.0a1
If you want to adjust the chroma classes, you're out of luck with this theme. I should make that clear in the docs.
Is it by design that blockquotes break the theme?
Umh, is that the same issue or a separate issue?
It's the same issue. It's the html that gets generated when I use blockquotes, as mentioned in the first post.
It seems I misunderstood and misspoke. That said, I still don't get what pre@class="chroma" in the title has to do with a blockquote.
Did a quick test and couldn't quite reproduce what you've described. Can you paste an example here? or send me a link
https://codeberg.org/joinjabber/website-hugo/commit/3874c788bd7849d6b9f6ae93710265af9e254720
This is an example of a workaround for this issue (code blocks). I guess you can clone the website to try and reproduce.
By all means. You didn't provide an actual example where the problem was happening. I see no blockquotes on the link, or how the chroma class is relevant.
Something on our website currently breaks block-quotes. I have a suspicion that it might be related to adding the custom.js as explained here: https://docs.neuralvibes.com/docs/compose/customize/#i-want-to-add-custom-sass-or-js
Yeah it seems whatever generates <pre class="chroma"> breaks our theme currently. That's at least blockquotes and code blocks.
Or maybe you have different markup settings . If that's the case, that would explain it.
The markup settings should match 👇🏼 as is in the exampleSite.
codeFences = true
guessSyntax = false
hl_Lines = ""
lineNoStart = 1
lineNos = true
lineNumbersInTable = false
noClasses = false
style = "monokai"
tabWidth = 2
Ok it looks like this is unrelated to chroma anyway. I tried removing the only place in your code that adds it to <pre> and it didn't fix it.
We use the default configuration so this isn't it either.
It's probably something in our custom sass that breaks it as @poVoq said. We need to figure out what.
For me, this only happens when I use a code block, so 3x tilde like
this
These code blocks do indeed have the class chroma.
It has nothing to do with custom SASS (I removed it all when testing).
If I could see your repos, pretty confident I would point out what the problem is. I looked at your profiles and figured you're testing privately.
@Ppjet6 has linked to it twice here, but it's https://codeberg.org/joinjabber/website-hugo/
There is no code block added to main branch right now because of the issue, but just add it yourself and you'll see it.
@ltguillaume, thank you that clarification went a long way. It wasn't immediately obvious that was the fork. Plus the talk about blockquotes didn't help with the misunderstanding. This issue was about the code blocks/snippets breaking certain javascript functions.
I have tested with your repo and discovered a javascript bug. Your repo should now work properly 👇🏼, after pulling the update.
Thanks! This indeed fixes it.
To explain why the baseUrl = "/" if it isn't obvious, we're serving the website over multiple domains, joinjabber.org, and a Tor onion domain!
Sorry again for the confusion and thanks for taking the time.