Menu
Is it possible to render spans within a pre tag?
Basically I am showing code snippets 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 of the text to go inside the <pre>, it just renders as text, for example My code is so <span>cool</span> and I love it. How can I get the proper word-breaks and line-spacing of pre, while still rendering span tags?
601
The <span> tag is an inline container used to mark up a part of a text, or a part of a document. The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute. The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.
The span tag is just like a div, which is used to group similar content so it can all be styled together. But span is different in that it is an inline element, as opposed to div , which is a block element. Also, keep in mind that span itself does not have any effect on its content unless you style it.
The span tag is a paired tag means it has both open(<) and closing (>) tags, and it is mandatory to close the tag. The span tag is used for the grouping of inline elements & this tag does not make any visual change by itself. span is very similar to the div tag, but div is a block-level tag and span is an inline tag.
The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.
The <pre> tag will render it's contents literally. You can make whitespace within another tag significant but render tags within as 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
