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

Code block padding bug using css/vs2015.css #189

Closed
0atman opened this issue Dec 23, 2022 · 2 comments
Closed

Code block padding bug using css/vs2015.css #189

0atman opened this issue Dec 23, 2022 · 2 comments
Labels
bug Something isn't working

Comments

@0atman
Copy link

0atman commented Dec 23, 2022

@MSzturc First off: thank you so much for this plugin, I'm literally launching my youtube career using it (and you better believe I'm supporting you!)

Describe the bug
Something has slightly broken vs2015.css code blocks since the 20th of Oct (Certainly it was broken by 10 Nov, I produced two videos on these dates, so can concretely say that the problem started in this period)

There is now extra padding at the bottom of code blocks:

Samples to Reproduce
Make a code block in Advanced Slides, using the css/vs2015.css theme, and note the new bonus asymmetrical padding at the bottom of the block.

Screenshot_20221223_164433

Expected behavior
This did not happen on or before the 20th of October, where it looked like this:

Screenshot_20221223_164522

I can't quite dig up where this has come from, the highlight.js file has not changed in 2022, so I suspect it's something local to Advanced Slides? The other themes don't have this problem, though they also don't have nice padding around them.

My workaround is to change the padding value from css/vs2015.css from 1em to 0.5 em, which doesn't fix the asymmetry, but makes it less obnoxious:

pre code.hljs {
  display:block;
  overflow-x:auto;
  padding:0.5em;
}

Thank you again!

@0atman 0atman added the bug Something isn't working label Dec 23, 2022
@0atman
Copy link
Author

0atman commented Dec 27, 2022

I've fixed it by adding this to my frontmatter:

.reveal .hljs {
  min-height: 50%;
}

Which overrides the 100% set in reveal.css

@MSzturc
Copy link
Owner

MSzturc commented Feb 15, 2023

Ahhh wow nice find. To get more control i've wrapped every slide into a 100% x 100% grid with height of 100%.. i've added your fix into the reveal.css. Highlight.js should work as before with next version

@MSzturc MSzturc closed this as completed Feb 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants