Question

我有一个像这样的简单风格，

.codecontain{
    padding: 10px;
    background-color: #34495e;
    color: #ecf0f1;
    max-width: 200px;
    border-radius: 10px;
}

我想在其中显示代码，

<div class="codecontain">
<p><hr></p>
</div>

但是当我这样做时，HTML会显示结果，但我希望HTML显示文本。我知道有语法荧光笔，但我不想使用它们。

Answer 1

根据André的回答，这是一个代码，他的回答是正确的。

<div class="codecontain">
<p>&lt;hr&gt;</p>
</div>

http://codepen.io/anon/pen/wGwKqe

另一种方法是使用

<xmp></xmp>

正如How to print code on HTML

所建议的那样

小心不推荐使用xmp。

也可能重复

Answer 2

你必须更换＆lt;使用<和＆gt;与>。

Answer 3

如果您不想手动执行此操作，可以使用一些javascript进行转换。

我将html包装在评论中（并删除了js 中的评论）有两个原因。一种是避免html正常渲染然后被覆盖，以及秒，以便你可以像你一样使用无效的html。（ hr元素在p内无效，因此浏览器会更正它，脚本会显示更正的html ）

＆＃13;

var code = document.querySelectorAll('.codecontain');

Array.prototype.forEach.call(code, function(node) {
  node.textContent = node.innerHTML.slice(4,-3);
});

＆＃13;

.codecontain {
  padding: 10px;
  background-color: #34495e;
  color: #ecf0f1;
  max-width: 200px;
  border-radius: 10px;
  white-space: pre;
}

＆＃13;

<div class="codecontain"><!--
<p><hr></p>
--></div>

＆＃13;

在P标签中显示代码而不加载它

3 个答案: