Question

我想在不处理标记的情况下放置代码示例？

Answer 1

Xmp标签可以工作：

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

ETA：在撰写本文时，这仍然可以在所有主流浏览器中使用，但正如其他人已经指出的那样，它已经在HTML5 [link]中正式废弃。浏览器可以在没有任何警告或通知的情况下随时停止呈现它，生产站点应该避免使用它。尽管如此，没有替代品不会涉及HTML手动编码字符串或使用iframe技巧。它仍然在我的个人实用工具页面工具带中占有一席之地，但我不会为客户考虑它。

Answer 2

<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>也完成了这项任务：它还允许复制代码。

Answer 3

要以HTML格式呈现代码，通常会使用<code>代码。

你的问题不是很清楚，我不知道你的意思是“没有处理标签”。如果您说要在HTML页面中显示HTML片段作为代码（例如），那么您需要“转义”HTML标记，以便Web客户端不会尝试解析它们。

为此，您应该将实体>用于大于括号的范围，将<用于小于括号。

Answer 4

将它放在一个文本区域，它是一个html标记，可以防止其中的所有文本被渲染

Answer 5

如果您使用的是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标题提供这些文档。

Answer 6

我唯一能想到的就是将所有'＆lt;'和'＆gt;'分别转换为'＆amp; lt'和'＆amp; gt'

Answer 7

尝试：

<xmp></xmp>

或

<code></code>

例如：

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

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

再见

Answer 8

除了将您的代码放入'pre'标签并转义'＆lt;'之外和＆gt;'您可能希望看起来像语法高亮。一个很好的图书馆是由Alex Gorbachev写的。

http://alexgorbatchev.com/SyntaxHighlighter/

Answer 9

通过htmlspecialchars()运行您希望显示的HTML，以正确转义您希望显示的代码（如果您正在使用PHP）。请勿使用htmlentities()，因为您的浏览器会阻塞扩展字符。如果您要输出<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">，请确保在UTF-8中正确设置了网页的编码。

祝你好运。

Answer 10

你可以用这种方式使用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类和行属性。

Answer 11

这就像一颗宝石。我正在尝试在HTML页面上获取代码。我们需要使用以下组合。我也对此进行了测试。

    <xpm>
        <pre>
        #include&lt;stdio.h&gt;
        void fun(){
            printf("%s","yooo");
        }
        fun();
         </pre>
    </xpm>

Answer 12

发表评论。

<p>This will be rendered.</p>
<!-- from here on, this is a comment
<p>This won't be rendered.</p>
end of comment -->
<p>This will be rendered too.</p>

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

12 个答案: