Remove leading whitespace from whitespace: pre element

Add the style to the <pre> tag, using a class. For example (trying to keep it simple here).

<pre class="console">
    // Some code here to be styled.
</pre>

<pre class="some-other-style">
    // Some code here to be styled.
</pre>

Then your CSS looks like this:

pre.console {
    color: #fff;
    background-color: #000;
}
pre.some-other-style {
    color: #f00;
    background-color: #fff;
}

If it doesn't do what you want then I'm confused by your question, just comment and I'll remove the answer.

Adjust margin-top to whatever line-height you have set.

.text {
    margin-top: -1em;
    white-space: pre-line;
}

This works for FF too, which :first-line hack can't fix.

Check out the answer to this very similar question:

.mystyle:first-line {
    line-height: 0px;
}

Might require a modern-ish browser, though.

When we use white-space: pre-wrap, then when the page renders, it also takes space from your html file. So suppose we have:-

<div style="white-space:pre-wrap"> <!-- New Line -->
   <!-- 2 space --> This is my text
</div>

The text will render in this way:-

<leading line>     
<2 spaces >This is my text

Hence we should HTML like this:-

<div style="white-space:pre-wrap">This is my text</div>

Related