在预标签内渲染跨度（在HTML中，不作为文本显示给用户）

Question

是否可以在预标签内渲染范围？

基本上我在网站上显示代码段，您可以看到它们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>