html - 在 pre 标记内渲染跨度(在 HTML 中，不显示为用户的文本)

Question

是否可以在 pre 标记内呈现 span？

基本上我在我的网站上展示代码片段，你可以看到它们 here .我想将部分代码包装在“span”标签中。

现在当我添加 <span>里面的文字去里面<pre> ，它只是呈现为文本，例如 My code is so <span>cool</span> and I love it .如何在呈现 span 标签的同时获得正确的 pre 分词和行间距？

Answer 1

<pre>标记将按字面意思 呈现它的内容。您可以使另一个标签内的空格有意义，但使用一些 CSS 将标签内的标签呈现为 HTM。例如:

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>