如何在HTML文件中插入代码示例？

Question

如何在HTML文件中插入代码示例？

html

29

我想展示一段代码示例，但不希望标签被解析？

- Kevin Garcia

12个回答

22

<pre>标签允许您原样显示带有空格和换行符的文本。此外，代码必须进行实体编码：例如，代码示例：

 <html>
   <head><title></title></head>
   <body></body>
 </html>

将会变成什么？

<pre>&lt;html>
  &lt;head>&lt;title>&lt;/title>&lt;/head>
  &lt;body>&lt;/body>
&lt;/html></pre>

< 转换为 <，& 转换为 &

在 PHP 中可以使用 htmlentities 函数来实现：

<pre><?php echo htmlentities($code) ?></pre>

<textarea>也可以完成这个任务：它还允许代码被复制。

- Ming-Tang

实体编码是将HTML标记直接显示在文档中的重要组成部分。<pre>只会影响格式。 - Chuck

我认为他不想在示例中转义元素（不想将<html>转换为<html>）。 - ChrisW

不要使用htmlentities()，因为不是所有的浏览器都支持此函数输出的所有HTML实体。请使用htmlspecialchars()，并确保您页面的编码设置正确。 - Yzmir Ramirez

and use > for > - Shaida Muhammad

9

为了在HTML中展示代码，通常会使用<code>标签。

您的问题不太清楚，我不知道“不进行标记处理”是什么意思。如果您要在HTML页面中呈现HTML片段作为代码（例如），则需要“转义”HTML标记，以便Web客户端不尝试解析它们。

为此，您应该使用实体>表示大于符号，使用<表示小于符号。

- Ben

3

尝试：

<xmp></xmp>

或者

<code></code>

例如：

<pre>
     <xmp><!-- your html code --></xmp>
</pre>

<pre>
     <code><!-- your html code --></code>
</pre>

再见

- Alberto Cerqueira

2

将其放入文本区域中，这是一个HTML标签，将防止其内部的所有文本被呈现。

- Chen Kinnrot

2

如果您正在使用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>

请注意，您需要使用 .xhtml 文件扩展名，并考虑使用 Content-Type: application/xhtml+xml 头来提供这些文档。

- Richard JP Le Guen

实际上，文档类型（doctype）对于页面的解析并不重要，只有Content-type HTTP头部是关键。 - Ilya Streltsyn

1

我唯一能想到的就是将所有的“<”和“>”分别转换为“&lt”和“&gt”

- Nanne

0

除了将您的代码放在“pre”标签中并转义“<”和“>”之外，您可能还想查看语法高亮。这方面的一个很好的库是由Alex Gorbatchev编写的。

http://alexgorbatchev.com/SyntaxHighlighter/

- rcravens

0

如果您正在使用PHP，请通过htmlspecialchars()运行要显示的HTML以正确转义要显示的代码。不要使用htmlentities()，因为您的浏览器会对扩展字符产生问题。只需确保页面的编码在<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">中正确设置，例如输出UTF-8。

祝好运。

- Yzmir Ramirez

0

你可以用以下方式使用 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>

注意：此处使用的是 Bootstrap 3，如果您想要纯 HTML，请删除 textarea 类和 rows 属性。

- erhun

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Malk · Accepted Answer

Xmp标签可以正常工作：

<xmp>
   ...code...
</xmp>

更新时间：截止到撰写此文，所有主流浏览器仍然支持此方法，但正如其他用户所指出的那样，在HTML5中已正式将其废除 [链接]。浏览器随时可能停止渲染它，而不提前警告或通知，因此应避免在生产网站中使用该方法。尽管如此，目前没有任何替代方法，除非手动编码字符串或使用iframe技巧。它仍然有一席之地在我个人的实用工具箱中，但我不会考虑为客户使用。