Boinst Boinst - 1 year ago 86
Javascript Question

How can I ignore leading and trailing linebreaks within an html "code" block using css, javascript or jquery?

In my HTML source code, I have a code block like the following (I use showdown and highlight.js on this page):

<pre><code class="cpp">
double myNumber = (double)4;

My problem is that the first linebreak remains part of the "code" block. It's probably because of the enclosing "pre" block, but I need that there because highlight.js expects it (also apparently the HTML5 standard recommends it). The code is rendered like this (note the leading line break):

enter image description here

So my question is, using css, javascript or jquery, how can I remove leading or trailing linebreaks from "code" blocks like this one?

Answer Source

You could use this hack:

pre:first-line {
    line-height: 0px;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download