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

fix(devtool): use correct CSS to hide psuedo element used for hacking… #3133

Merged
merged 7 commits into from
May 2, 2021

Conversation

NullVoxPopuli
Copy link
Contributor

@NullVoxPopuli NullVoxPopuli commented Apr 13, 2021

… the width of the wrapping content to be at least the width of the green class tag / decoration

Changes

Checklist

  • Added markup tests, or they don't apply here because...
  • Updated the changelog at CHANGES.md

@joshgoebel joshgoebel added this to In Progress in Version 11 Apr 14, 2021
@joshgoebel joshgoebel added this to the 11.0 alpha 1 milestone Apr 14, 2021
@joshgoebel
Copy link
Member

This was broken for me in that the padding on the bottom was negative or something weird. How does this look for you?

@NullVoxPopuli
Copy link
Contributor Author

Just pushed this
image
image
image
image

So far, it seems the best way to align things is to not touch the display property on the span element... which is obnoxious, because it makes aligning things to the baseline hard

@NullVoxPopuli
Copy link
Contributor Author

but, I did find a really weird display option that allowed the border to expand... idk 🤔 Gonna keep looking

@joshgoebel
Copy link
Member

What was wrong with what I showed you again?

@NullVoxPopuli
Copy link
Contributor Author

I don't remember you showing me anything?

@NullVoxPopuli
Copy link
Contributor Author

also, I think this is in the best place I can get it for now.
I am not happy with the various ways that blocks are broken up and separated from wrapping elements (because of how the code is wrapped with spans).

For example:

<style>
  code
</style>

all 3 of those lines end up being sibling elements, which makes any sort of display: inline-* not great. but, we need inline-flex for align-items: baseline.
but, with inline-flex, often, entire sections of code are moved into one line, which is worse. 🙃

@joshgoebel
Copy link
Member

Grrrr, I really thought I pushed a commit... let me take a look at this latest version.

@NullVoxPopuli
Copy link
Contributor Author

@joshgoebel Rebased and fixed the text-alignment issue (I think)

@NullVoxPopuli
Copy link
Contributor Author

image

There is also a compressed version if we want 🤷
image

@joshgoebel
Copy link
Member

Compressed please.

@NullVoxPopuli
Copy link
Contributor Author

Spacing reduced and PR rebased

@joshgoebel joshgoebel merged commit 9044780 into highlightjs:main May 2, 2021
Version 11 automation moved this from In Progress to Done May 2, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging this pull request may close these issues.

None yet

2 participants