如何将html代码添加到html中？

Question

现在我正在创建一个教人HTML和CSS的网站。除了一件事，一切都很好。我不知道如何在不影响网页其他部分的情况下将HTML代码片段输入HTML代码（这不能作为段落完成）。

我可以使用图像来做到这一点，但这会占用更多空间。

我希望有一个“带语法高亮的代码窗口”，如下图所示（这取自css-tricks.com）;

请教我如何做到这一点......

Answer 1

为了能够将html片段写入html网页，您需要使用<和>

切换开始和结束标记< >

为了给它语法高亮，你可以使用googles自己的美化脚本找到Here

Answer 2

您必须转义<和>等特殊字符。只需将其替换为相应的escape sequence。

Answer 3

Hello RavinduL，欢迎来到StackOverflow。

首先，我建议你在教导其他人之前完全学习HTML和CSS，但如果你认为如果你在此期间教别人你会学到更好的知识，那么请继续。

如果您想在网站上显示突出显示语法的文字，我建议您使用以JavaScript编码的'highlight.js'。它支持许多语言的语法高亮，并且它不会让你头疼创建自己的功能来突出显示代码。它也不会弄乱您的HTML和/或CSS样式。

查看highlight.js in action!

另一个可能派上用场的JavaScript库是Alexis Gorbatchev的SyntaxHighlighter。它也是免费和可配置的，请务必查看。

您还可以使用预定义的HTML标记（<code>和<pre>标记）。

资源： highlight.js＆amp; SyntaxHighlighter

Answer 4

<div class="post-text">
    <p>I have some HTML that I would like to make it appear like the code option here</p>

    <pre><code>&lt;a href="#"&gt;test&lt;/a&gt;
    </code></pre>

    <p>How can I do it?</p>
</div> 

Answer 5

您遇到的问题是小于和大于HTML实体等字符，将被解释为HTML标记的开头和结尾。还有很多其他角色也会被误解。

HTML提供了一种防止这种情况的机制，那就是使用“＆amp;”和实体名称，或“＆amp;＃”和实体编号。

例如，对于少于，你会使用“＆lt;”而不是“＆lt;”。同样，对于大于你的人，你会使用“＆gt;”而不是“＆gt;”。

还有其他HTML实体，您可以在此处了解更多信息：http://www.w3schools.com/html/html_entities.asp

Answer 6

您应该能够使用代码标记来指定代码。如果没有，您可以使用字符实体来显示＆lt;和＆gt;。