3

How would one add HTML code snippets into an HTML file without them being rendered as elements on the webpage?

While this could be achieved using images, I'd prefer to have a 'code window with syntax highlighting' like the one pictured below taken from css-tricks.com;

Screenshot of an HTML code snippet, from css-tricks.com

4

6 回答 6

2

为了能够将 html 片段写入 html 网页，您需要< >使用&lt;和切换开始和结束标签&gt;

为了给它语法高亮，你可以使用谷歌自己的美化脚本在这里找到

于 2013-06-08T23:27:50.777 回答
1

您必须转义特殊字符，例如<and >。只需将它们替换为相应的转义序列即可。

于 2013-06-08T23:24:06.537 回答
1

您好 RavinduL，欢迎来到 StackOverflow。

首先，我建议你在教别人之前先完全学习 HTML 和 CSS，但如果你认为同时教别人会学得更好，那就继续吧。

如果您想在您的网站上显示语法突出显示的文本，我建议您使用用 JavaScript 编码的“highlight.js”。它支持多种语言的语法高亮，并且不会让您为创建自己的代码高亮函数而头疼。它也不会弄乱您的 HTML 和/或 CSS 样式。

查看highlight.js 的实际效果！

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

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

资源： highlight.js & SyntaxHighlighter

于 2013-06-08T23:35:18.797 回答
0 
<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>
于 2013-06-08T23:26:28.037 回答
0

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

HTML 提供了一种机制来防止这种情况发生，那就是使用“&”和实体名称，或者“&#”和实体编号。

例如，对于小于，您将使用“<”而不是“<”。同样，对于大于您将使用“>”而不是“>”。

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

于 2013-06-08T23:27:30.993 回答
0

您应该能够使用代码标签来指定代码。如果没有，可以使用字符实体来显示<和>。

于 2013-06-08T23:35:03.003 回答