I used the same template literal code but got two different outputs.
Did I do something wrong?
I’m not able to reproduce this problem. Can you publish your notebook so we can see?
Published Wave Surfer Regions / Brett Cooper / Observable
But now it works.
I just recall that I was messing with the CSS for PRE and CODE, so think it was that that messed up the output.
Note the g was also affected.
You’re applying a background-color
to an inline element, which causes succeeding lines to partially cover preceding lines. You can add box-shadow: inset 0 0 10px;
to make the overlaps visible:
Add the following to avoid overlaps:
code {
line-height: calc(1.2em + 12px);
}
As a general rule, don’t try to format <pre>
and <code>
with the same declaration. Be aware of the different uses and default styles of both elements. Use selector specificity to set styles that should apply to <code>
when used inline (e.g. in paragraphs or list items), and use a more specific selector pre > code
to reset or override these styles when <code>
is used inside a <pre><code>
code block combo.
Thanks @mootari for fixing my goof. I’m not good at CSS and your tips are really appreciated. I am lazy so I tend to not fine grain the CSS if it mostly works because…