Render covers inside a pre-tag (in HTML not rendered as text to the user)

Is it possible to display gaps inside a pre-tag?

I mainly show snippets of code on my site, you can see them here . I want to wrap some parts of the code in "span" tags.

Right now, when I add <span>

inside text to enter <pre>

, it just displays as text for example My code is so <span>cool</span> and I love it

. How can I get the correct word breaks and pre line spacing while keeping the span tags?

+3


source to share


1 answer


The tag <pre>

will make its content literally. You can make whitespace inside another tag meaningful, but render the tags inside the HTM using some CSS. For example:

CSS

.code {
    white-space: pre;

    /* If you want to use a monospace font like <pre> does by default */
    font-family: monospace;
}

      



Html

<div class="code">
    My code is so <span>cool</span> and I love it
</div>

      

+7


source







All Articles