[1.0] Fix 100% width code highlight background only being drawn for the vis… #1192
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ible area of a container scrolling its overflowing content … ;) :/. This is going to be fun. `pre code` blocks are now wrapped in a div.gatsby-highlight. Along with the whitespace changes around `.highlight-code-line` in gatsbyjs#1187, we now should fully mimick the approach that the React Tutorial code example uses (see https://facebook.github.io/react/tutorial/tutorial.html). Essentialy, the new container around our highlighted `pre code` allows us to apply `float:left; min-width:100%` to <pre>, which solves the problem of highlighted code line backgrounds not being drawn for the overflowing part of the code block container. See e. g. https://stackoverflow.com/a/8513330 for a few more pointers as to why and how this works. To get the new container wrapped _around_ and not appended _in between_ the node's own <code> and the apparently later generated <pre>, we replace the code node and wrap the highlighted code in <pre> and <code> plus our additional <div> ourselves. Breaking change to namespace CSS class names: `span.highlight-code-line` is now `span.gatsby-highlight-code-line`. Phew! ;)
|
Deploy preview ready! Built with commit 093ceed |
|
Deploy preview ready! Built with commit 093ceed |
|
Deploy preview ready! Built with commit 093ceed |
|
To illustrate that 💩 of a commit message – before/after:
Also made the highlighted blocks a little calmer and increased line-height a little:
|
fk
changed the title
fk
changed the title
|
Looking good! Looks like there's just a snapshot that needs updated (due to the new classname) for the tests to pass. Thanks! |
added 2 commits
June 17, 2017 15:25
|
Thanks! |
|
Fingers crossed that this is the last time we need to revisit this! 😝 |
|
Actually one more thing :-) the README needs updated for the new class
names. Also if you could copy over your new line highlighting CSS there
that'd be 👍
…On Sat, Jun 17, 2017, 10:18 AM Florian Kissling ***@***.***> wrote:
Fingers crossed that this is the last time we need to revisit this! 😝
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#1192 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/AYdmDV2QagdXhsR1wOq2bUN0wWc5wpykks5sFAp1gaJpZM4N9Gls>
.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
…ible area of a container scrolling its overflowing content
… ;) :/. This is going to be fun.
pre codeblocks are now wrapped in a div.gatsby-highlight.Along with the whitespace changes around
.highlight-code-linein #1187, we now should fully mimick the approach that the React Tutorial code example uses (see https://facebook.github.io/react/tutorial/tutorial.html).Essentialy, the new container around our highlighted
pre codeallows us to applyfloat:left; min-width:100%to<pre>, which solves the problem of highlighted code line backgrounds not being drawn for the overflowing part of the code block container.See e. g. https://stackoverflow.com/a/8513330 for a few more pointers as to why and how this works.
To get the new container wrapped around and not appended in between the node's own
<code>and the apparently later generated<pre>, we replace the code node and wrap the highlighted code in<pre>and<code>plus our additional<div>ourselves.Breaking change to namespace CSS class names:
span.highlight-code-lineis nowspan.gatsby-highlight-code-line.Phew! ;)