在 HTML 中显示 HTML 片段

Display HTML snippets in HTML

提问by Steven

How can I show HTML snippets on a webpage without needing to replace each <with <and >with >?

我怎样才能显示，而无需替换每个网页上的HTML片段<与<和>用>？

In other words, is there a tag for don't render HTML until you hit the closing tag?

换句话说，是否有一个标签用于在您点击结束标签之前不呈现 HTML？

采纳答案by Konrad Rudolph

No, there is not. In HTML proper, there's no way short of escaping some characters:

不，没有。在 HTML 中，有一些字符可以转义：

• &as &
• <as <

• &作为 &
• <作为 <

(Incidentally, there is no need to escape >but people often do it for reasons of symmetry.)

（顺便说一句，没有必要逃跑，>但出于对称的原因，人们经常这样做。）

And of course you should surround the resulting, escaped HTML code within <pre><code>…</code></pre>to (a) preserve whitespace and line breaks, and (b) mark it up as a code element.

当然，您应该将生成的转义 HTML 代码括起来<pre><code>…</code></pre>以 (a) 保留空格和换行符，以及 (b) 将其标记为代码元素。

All other solutions, such as wrapping your code into a <textarea>or the (deprecated) <xmp>element, will break.¹

所有其他解决方案，例如将您的代码包装到 a<textarea>或（不推荐使用的）<xmp>元素中，都将中断。¹

XHTML that is declared to the browser as XML (via the HTTP Content-Typeheader! —?merely setting a DOCTYPEis not enough) could alternatively use a CDATA section:

向浏览器声明为 XML 的 XHTML（通过 HTTPContent-Type标头！—？仅仅设置 aDOCTYPE是不够的）也可以使用 CDATA 部分：

<![CDATA[Your <code> here]]>

But this only works in XML, not in HTML, and even this isn't a foolproof solution, since the code mustn't contain the closing delimiter ]]>. So even in XML the simplest, most robust solution is via escaping.

但这仅适用于 XML，不适用于 HTML，甚至这也不是万无一失的解决方案，因为代码不能包含结束分隔符]]>。因此，即使在 XML 中，最简单、最健壮的解决方案也是通过转义。

---

---

¹Case in point:

¹典型案例：

textarea {border: none; width: 100%;}

<textarea readonly="readonly">
  <p>Computer <textarea>says</textarea> <span>no.</span>
</textarea>

<xmp>
  Computer <xmp>says</xmp> <span>no.</span>
</xmp>

回答by Dolph

The tried and true method for HTML:

久经考验的 HTML 方法：

1. Replace the &character with &
2. Replace the <character with <
3. Replace the >character with >
4. Optionally surround your HTML sample with <pre>and/or <code>tags.

1. 将&字符替换为&
2. 将<字符替换为<
3. 将>字符替换为>
4. 可选择用<pre>和/或<code>标签包围您的 HTML 示例。

回答by Erfan Safarpoor

best way:

最好的办法：

<xmp>
// your codes ..
</xmp>

---

---

old samples:

旧样品：

sample 1:

示例 1：

<pre>
  This text has
  been formatted using
  the HTML pre tag. The brower should
  display all white space
  as it was entered.
</pre>

sample 2:

示例 2：

<pre>
  <code>
    My pre-formatted code
    here.
  </code>
</pre>

sample 3: (If you are actually "quoting" a block of code, then the markup would be)

示例 3:(如果您实际上是在“引用”一段代码，那么标记将是）

<blockquote>
  <pre>
    <code>
        My pre-formatted "quoted" code here.
    </code>
  </pre>
</blockquote>

nice CSS sample:

漂亮的 CSS 示例：

pre{
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  margin-bottom: 10px;
  overflow: auto;
  width: auto;
  padding: 5px;
  background-color: #eee;
  width: 650px!ie7;
  padding-bottom: 20px!ie7;
  max-height: 600px;
}

Syntax highlighting code (For pro work):

语法高亮代码（对于专业工作）：

rainbows(very Perfect)

彩虹（非常完美）

prettify

美化

syntaxhighlighter

语法高亮

highlight

强调

JSHighlighter

JSHighlighter

---

---

best links for you:

最适合您的链接：

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-any-project/

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-any-project/

https://github.com/balupton/jquery-syntaxhighlighter

https://github.com/balupton/jquery-syntaxhighlighter

http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css/

http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css/

http://alexgorbatchev.com/SyntaxHighlighter/

http://alexgorbatchev.com/SyntaxHighlighter/

https://code.google.com/p/jquery-chili-js/

https://code.google.com/p/jquery-chili-js/

How to highlight source code in HTML?

如何突出显示 HTML 中的源代码？

回答by Krunal

Kind of a naive method to display code will be including it in a textarea and add disabled attribute so its not editable.

一种显示代码的天真方法将其包含在文本区域中并添加禁用属性使其不可编辑。

<textarea disabled> code </textarea>

Hope that help someone looking for an easy way to get stuff done..

希望能帮助那些正在寻找一种简单的方法来完成工作的人..

回答by s_hewitt

Deprecated, but works in FF3 and IE8.

已弃用，但适用于 FF3 和 IE8。

<xmp>
   <b>bold</b><ul><li>list item</li></ul>
</xmp>

Recommended:

受到推崇的：

<pre><code>
    code here, escape it yourself.
</code></pre>

回答by barnameha

i used <xmp>just like this : http://jsfiddle.net/barnameha/hF985/1/

我<xmp>是这样用的：http: //jsfiddle.net/barnameha/hF985/1/

回答by GShenanigan

The deprecated <xmp>tag essentially does that but is no longer part of the XHTML spec. It should still work though in all current browsers.

deprecated<xmp>标签本质上是这样做的，但不再是 XHTML 规范的一部分。它应该仍然可以在所有当前浏览器中工作。

Here's another idea, a hack/parlor trick, you could put the code in a textarea like so:

这是另一个想法，一个 hack/parlor 技巧，你可以像这样将代码放在 textarea 中：

<textarea disabled="true" style="border: none;background-color:white;">
    <p>test</p>
</textarea>

Putting angle brackets and code like this inside a text area is invalid HTML and will cause undefined behavior in different browsers. In Internet Explorer the HTML is interpreted, whereas Mozilla, Chrome and Safari leave it uninterpreted.

将尖括号和这样的代码放在文本区域中是无效的 HTML，并且会在不同的浏览器中导致未定义的行为。在 Internet Explorer 中，HTML 被解释，而 Mozilla、Chrome 和 Safari 不解释它。

If you want it to be non-editable and look different then you could easily style it using CSS. The only issue would be that browsers will add that little drag handle in the bottom-right corner to resize the box. Or alternatively, try using an input tag instead.

如果您希望它不可编辑并且看起来不同，那么您可以使用 CSS 轻松设置样式。唯一的问题是浏览器会在右下角添加那个小拖动手柄来调整框的大小。或者，尝试改用输入标签。

The right way to inject code into your textarea is to use server side language like this PHP for example:

将代码注入 textarea 的正确方法是使用服务器端语言，例如这样的 PHP：

<textarea disabled="true" style="border: none;background-color:white;">
    <?php echo '<p>test</p>'; ?>
</textarea>

Then it bypasses the html interpreter and puts uninterpreted text into the textarea consistently across all browsers.

然后它绕过 html 解释器并将未解释的文本在所有浏览器中一致地放入 textarea。

Other than that, the only way is really to escape the code yourself if static HTML or using server-side methods such as .NET's HtmlEncode() if using such technology.

除此之外，如果使用静态 HTML 或使用服务器端方法（如 .NET 的 HtmlEncode()），则唯一的方法是自己转义代码。

回答by cletus

In HTML? No.

在 HTML 中？不。

In XML/XHTML? You could use a CDATAblock.

在 XML/XHTML 中？你可以使用一个CDATA块。

回答by Kamlesh

It's vey simple .... Use this xmp code

它非常简单......使用这个xmp代码

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

回答by Robert Siemer

I assume:

我假设：

• you want to write 100% valid HTML5
• you want to place the code snippet (almost) literal in the HTML
  • especially <should not need escaping

• 您想编写 100% 有效的 HTML5
• 您想将代码片段（几乎）文字放在 HTML 中
  • 特别是<不需要逃避

All your options are in this tree:

您的所有选项都在此树中：

• with HTML syntax
  • there are five kinds of elements
  • those called "normal elements" (like <p>)
    • can't have a literal <
    • it would be considered the start of the next tag or comment
  • void elements
    • they have no content
    • you could put your HTML in a data attribute (but this is true for all elements)
    • that would need JavaScript to move the data elsewhere
    • in double-quoted attributes, "and &thing;need escaping: "and &thing;respectively
  • raw text elements
    • <script>and <style>only
    • they are never rendered visible
    • but embedding your text in Javascript might be feasable
    • Javascript allows for multi-line strings with backticks
    • it could then be inserted dynamically
    • a literal </scriptis not allowed anywhere in <script>
  • escapable raw text elements
    • <textarea>and <title>only
    • <textarea>is a good candidate to wrap code in
    • it is totally legal to write </html>in there
    • not legal is the substring </textareafor obvious reasons
      • escape this special case with </textareaor similar
    • &thing;needs escaping: &thing;
  • foreign elements
    • elements from MathML and SVG namespaces
    • at least SVG allows embedding of HTML again...
    • and CDATA is allowed there, so it seems to have potential
• with XML syntax
  • covered by Konrad's answer

• 使用 HTML 语法
  • 有五种元素
  • 那些被称为“普通元素”的（比如<p>）
    • 不能有文字 <
    • 它将被视为下一个标签或评论的开始
  • 空元素
    • 他们没有内容
    • 你可以把你的 HTML 放在一个 data 属性中（但这适用于所有元素）
    • 这将需要 JavaScript 将数据移动到其他地方
    • 双引号的属性，"并&thing;需要转义："和&thing;分别
  • 原始文本元素
    • <script>并且<style>只有
    • 它们永远不会被渲染为可见
    • 但是在 Javascript 中嵌入你的文本可能是可行的
    • Javascript 允许带反引号的多行字符串
    • 然后可以动态插入它
    • 在</script任何地方都不允许使用文字<script>
  • 可转义的原始文本元素
    • <textarea>并且<title>只有
    • <textarea>是包装代码的好选择
    • </html>在那里写是完全合法的
    • </textarea出于显而易见的原因 ，子字符串不合法
      • 使用</textarea或类似的方法来逃避这种特殊情况
    • &thing;需要转义： &thing;
  • 外来元素
    • 来自 MathML 和 SVG 命名空间的元素
    • 至少 SVG 允许再次嵌入 HTML ......
    • 并且 CDATA 被允许在那里，所以它似乎有潜力
• 使用 XML 语法
  • 康拉德的回答涵盖了

 

 

Note: >never needs escaping. Not even in normal elements.

注意：>永远不需要转义。甚至在普通元素中也不行。