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

syntax.css breaks syntax highlighting with prism.js #482

Open
lgrn opened this issue Sep 21, 2024 · 1 comment
Open

syntax.css breaks syntax highlighting with prism.js #482

lgrn opened this issue Sep 21, 2024 · 1 comment

Comments

@lgrn
Copy link

lgrn commented Sep 21, 2024

Hi,

I haven't used Hugo in a while, so I'm a little confused being in the middle of moving away from previously having my theme vendored in themes/ to now just importing it via go.mod in an effort to have less breaking changes in the future.

What I think I've managed to figure out so far is that placing files in assets/css allows me to override css that comes with the theme, which is nice. In trying to get code syntax highlighting to work again, I got it working by placing prism.js in assets/js, which seems to be enough for Hugo to pick it up on rendering.

I noticed though that the syntax highlighting looked odd, and after fiddling around in the dev console a bit and disabling styles manually, I realized that rules from syntax.css in the theme are overriding the styles coming from prism.css

I've managed "un-break" highlighting by creating assets/css/syntax.css containing nothing but /**/, and I'm wondering if this might be a bug, or if I'm just not using the theme as expected.

@panr
Copy link
Owner

panr commented Sep 21, 2024

Could you upload some screenshots showing the issue? I'm not sure if I understand the problem. syntax.css is a file with custom overrides for prism.css to match the theme color scheme and making the code highlighting more "duo-tone". So it should replace some styles from Prism.

EDIT: OK, I think that what you are trying to do is to "bring back" the original Prism highlighting, right? If so, all you need to do is to create an empty assets/css/syntax.css file to "erase" all changes from the theme. That should be enough. Maybe you will have to restart the Hugo server to apply changes.

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

No branches or pull requests

2 participants