Why did the underscore not show up in the markdown?

Community Help
1

I used the same template literal code but got two different outputs.

image
image874×762 46 KB

Did I do something wrong?

2

I’m not able to reproduce this problem. Can you publish your notebook so we can see?

3

Published Wave Surfer Regions / Brett Cooper / Observable
But now it works. :confused:

image
image1406×684 80.4 KB

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.

Screenshot_22
Screenshot_22749×288 67 KB

4

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:

image
image1382×466 103 KB

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.

1 Like
5

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…
CSS_meme