One blank line in the code block when using highlight.js

[legatoo]

I changed my syntax highlighter to highlight.js. It works, but there is always one blank line above the code . I can't find where to adjust it. highlight.js's CSS is:

.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #23241f;
border-radius: 8px;
-webkit-text-size-adjust: none;
max-width: 600px;
font-size: 0.8em;
}

[mhulse]

What does the generated HTML look like?

[legatoo]

@mhulse it's here: http://legato.ninja

[mhulse]

Looks like you got a rogue p tag line return in there. Check it:

What does your raw post input look like?

[mhulse]

rogue p tag

I meant, line return.

[legatoo]

@mhulse Wow~It's very impressive to have animated solution, cool. I am not sure about what is rouge p tag. Here is my raw post input.

[mhulse]

Thanks. Replying from my phone.

Try moving the pre and code tags on same line as the code sample. This should take care of your space. It's not pretty looking, but would tighten up the visual gap.

Check to see if highlight.js has a trim L/R feature. But I think your best bet is to apply my suggested fix above.

[legatoo]

@mhulse It seems I found a solution here, but still don't know why. Solution is to write the code snippet follows <code>tag without new line

It fixes the problem, but makes raw post not readable in terms of code snippet.

[legatoo]

@mhulse Thank you for your kind help. Yes, it(first solution) do fix this problem! I guess I need to search and learn what is trim L/R feature. :)

[nternetinspired]

It seems I found a solution here, but still don't know why.

Whitespace inside <pre> elements is always respected by the browser, and output as-is. A newline is treated the same as any other whitespace character.

[mhulse]

Glad to help. Trim is white space removal at beginning and end of strings. You can trim Right (trim R), Left (trim L), or both (trim) depending on Lang/function used. It's a long shot, but maybe highlight JS has an option for trimmin? Since your using JS anyway, you could prob write your own JS trim on the code/pre blocks. OTOH, like has been mentioned, white space is respected, so I think your best bet is to cram the lines or use fenced code and the jekyll highlighter. Personally, iirc, I've always crammed lines when I've run into this issue. Unfortunately it's been a while since I've thought about this scenario, so take what I'm saying with a grain of salt. :)

[mhulse]

This could work too (not tested):

<pre><code
>line of code
Here and ...
Here
</code></pre>

Not sure if that looks any better though. :D

Sometimes I do similar technique as above to kill white space from inbetween inline block elements. ;)

[legatoo]

@mhulse Thank you for your help. I have a happy day.

[legatoo]

@nternetinspired Thank you! Now I know it.

[troyswanson]

Love the love! Thanks for jumping in, @mhulse!

[bryc]

var y = document.querySelectorAll("pre code");
for(var i = 0; i < y.length; i++) {
  y[i].innerHTML = y[i].innerHTML.replace("\n", "");
}

Removes the first newline from each code block.