如何将代码示例插入到 HTML 文件中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4707878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I insert code examples into an HTML file?
提问by Kevin Garcia
I want to place an example of code without the tags being processed?
我想放置一个没有处理标签的代码示例？
回答by Malk
Xmp tag will work:
Xmp 标签将起作用：
<xmp>
...code...
</xmp>
ETA: As of this writing this still works in all major browsers, but as others have pointed out it has officially been obsoleted in HTML5 [link]. Browsers could stop rendering it any day without warning or notice and it should be avoided for production sites. Still, there is no replacement that doesn't involve HTML encoding your string manually or using iframe trickery. It still has a place in mypersonal utility page tool-belt, but I would not consider it for a client.
ETA：在撰写本文时，它仍然适用于所有主要浏览器，但正如其他人指出的那样，它已在 HTML5 [link] 中正式废弃。浏览器可以在没有警告或通知的情况下随时停止渲染它，生产站点应该避免这种情况。尽管如此，没有不涉及 HTML 手动编码字符串或使用 iframe 技巧的替代品。它仍然在我的个人实用程序页面工具带中占有一席之地，但我不会为客户考虑它。
回答by Ming-Tang
The <pre>tag allows you to display text with whitespaces and line breaks as-is. Also, code must be entity-encoded:
For example, the code sample
该<pre>标签允许您按原样显示带有空格和换行符的文本。此外，代码必须是实体编码的：例如，代码示例
<html>
<head><title></title></head>
<body></body>
</html>
will become
会变成
<pre><html>
<head><title></title></head>
<body></body>
</html></pre>
<encodes into <&encodes into &
<编码成<&编码成&
PHP htmlentitiesdoes the job:
PHPhtmlentities的工作：
<pre><?php echo htmlentities($code) ?></pre>
<textarea>does the job too: it also allow the code to be copied.
<textarea>也可以完成这项工作：它还允许复制代码。
回答by Ben
To present code in HTML typically one would use the <code>tag.
要在 HTML 中显示代码，通常会使用<code>标签。
Your question isn't very clear, and I don't know what you mean by "without the tags being processed". If you're saying that you want to present a fragment of HTML as code in an HTML page (for example), then you need to "escape" the HTML tags so that the web client doesn't attempt to parse them.
您的问题不是很清楚，我不知道您所说的“没有处理标签”是什么意思。如果您想在 HTML 页面中将 HTML 片段作为代码呈现（例如），那么您需要“转义”HTML 标记，以便 Web 客户端不会尝试解析它们。
To do this, you should use the entity >for the greater-than angle bracket, and <for the less-than bracket.
为此，您应该>对大于尖括号和<小于括号使用实体。
回答by Chen Kinnrot
put it in a text area, its an html tag that will prevent all text inside him to be rendered
把它放在一个文本区域，它是一个 html 标签，可以防止他里面的所有文本被渲染
回答by Richard JP Le Guen
If you're using an XHTML <!DOCTYPE>declaration, then you could use CDATAsections:
如果您使用的是 XHTML<!DOCTYPE>声明，那么您可以使用CDATA部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>My Example</title>
</head>
<body>
<h1>Example!</h1>
<pre><code>
<![CDATA[
<div>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
</div>
]]>
</code></pre>
</body>
</html>
Note that you'll want to use a .xhtmlfile extension and you'll want to consider serving these documents with a Content-Type: application/xhtml+xmlheader.
请注意，您需要使用.xhtml文件扩展名，并且需要考虑为这些文档提供Content-Type: application/xhtml+xml标题。
回答by Alberto Cerqueira
Try:
尝试：
<xmp></xmp>
or
或者
<code></code>
for exemple:
举个例子：
<pre>
<xmp><!-- your html code --></xmp>
</pre>
<pre>
<code><!-- your html code --></code>
</pre>
bye
再见
回答by Nanne
The only thing I can think of is just converting all your ‘<' and ‘>' to ‘<' and ‘>' respectively
我唯一能想到的就是将所有的 '<' 和 '>' 分别转换为 '<' 和 '>'
回答by rcravens
Beyond putting your code in 'pre' tags and escaping th '<' and'>' you may want to look as syntax highlighting. A good library for this was written by Alex Gorbatchev.
除了将您的代码放在 'pre' 标签中并转义 '<' 和 '>' 之外，您可能希望将其视为语法突出显示。一个很好的库是由 Alex Gorbatchev 编写的。
回答by Yzmir Ramirez
Run the HTML you wish to display though htmlspecialchars()to properly escape the code you wish to display if you're using PHP. Do NOT use htmlentities()because your browser will choke on extended characters. Just make sure your page's encoding is set correctly in the <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">if you are outputting UTF-8for example.
如果您使用 PHP，运行您希望通过htmlspecialchars()显示的HTML以正确转义您希望显示的代码。不要使用htmlentities()因为你的浏览器会被扩展字符阻塞。例如，<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">如果您要输出UTF-8，请确保您的页面编码设置正确。
Good luck.
祝你好运。
回答by erhun
You can use textarea with this way.
您可以通过这种方式使用 textarea。
<textarea class="form-control" rows="25">
<form action=".. " method="post" id="postForm">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" value="Customer Name" /></td>
</tr>
</table>
</form>
</textarea>
Notethis use Bootstrap 3, if you want pure html remove textarea class and rows attribute.
请注意，如果您想要纯 html 删除 textarea 类和行属性，请使用 Bootstrap 3。
