我想显示原始 HTML。我们都知道,必须在每个 "<" 和 ">" 之间转义,就像这样
<PRE> this is a test <DIV> </PRE>
但是,我不想这样做。我希望有一种方法可以保持 HTML 代码的原样(因为它更容易阅读(在编辑器内),而且我可能想复制它并将其作为实际的 HTML 代码再次使用,而不想再次修改它或有两个版本的相同代码,一个转义,一个不转义)。
有没有其他比 PRE 更原始的环境允许这样做? 这样人们就不必在每次要显示原始 HTML 代码(可能是 HTML5)时都要不停地编辑 HTML 并更改所有内容?
类似于 <REALLY_REALLY_VERBATIM> ...... </<REALLY_REALLY_VERBATIM>
这样。
屏幕截图
JavaScript 解决方案在 FF 21 上不起作用,以下是屏幕截图 ![此处输入图片描述][1]
屏幕截图 2
第一个解决方案仍然无法在 Firefox 上运行,以下是屏幕截图 ![此处输入图片描述][2]
您可以使用 xmp
元素,请参见 https://stackoverflow.com/questions/4545/what-was-the-xmp-tag-used-for。它从一开始就出现在 HTML 中,所有浏览器都支持它。规范对它不屑一顾,但 HTML5 CR 仍对它进行了描述,并要求浏览器支持它(虽然它也告诉作者不要使用它,但实际上并不能阻止你使用)。
除了元素本身的结束标记""外,
xmp`内的所有内容都被视为如此,不识别任何标记(标记或字符引用)。
否则,"xmp "就会像 "pre "一样被渲染。
在使用 "真正的 XHTML"(即使用 XML 媒体类型的 XHTML,这种情况很少见)时,特殊的解析规则并不适用,因此 xmp
被当作 pre
处理。但在 "真正的 XHTML "中,可以使用 CDATA 部分,这意味着类似的解析规则。它没有特殊格式,因此您可能希望将它包在pre
元素内:
<pre><![CDATA[
This is a demo, tags like <p> will
appear literally.
]]></pre>
我不知道如何将 xmp
和 CDATA 部分结合起来实现所谓的多语言标记
致编辑:请不要使用标点符号,它们很重要 -->; 从本质上讲,原始问题可以分为两个部分:
"some "data" here"
或 <i>...close italics with '</i>'-tag</i>
,很明显,我们应该在 </i
和 "
中转义/编码(或将 container'quote character 从 "
改为 '
)。(解析字符数据):将扩展实体,必须 转义
<、
&(和
>取决于标记语言/版本)。 大多数标记,如
body、
div、
pre等,以及
textarea(直到 HTML5)都属于这种类型。 因此,您不仅需要在代码段中对所有容器的结尾字符序列进行编码,还需要在代码段中对所有容器的结尾字符序列进行编码。 还必须对所有
<,
&(,
>`) 字符进行编码。
(至少)。(可替换字符数据):不会不把文本内的标记视为标记(但仍然是标记)。 文本中的标记不视为标记(但仍受规则 1 的约束),因此不需要对
'进行编码。
编码 <
(>
)。 但实体仍被扩展,因此它们和 '模棱两可的
(&
) 需要特别注意。RCDATA
字段和(引用):
生文本 "和 "RCDATA "元素中的文本不得包含任何
出现字符串 "</"
(U+003C LESS-THAN SIGN, U+002F SOLIDUS)后跟的字符大小写不敏感地匹配该元素的标记名 元素后跟 U+0009 字符制表符(制表符)之一、 U+000A 行馈(LF),U+000C 格式馈送(FF),U+000D 回车(CARRIAGE RETURN (CR)、U+0020 空格、U+003E 大号 (>) 或 U+002F 空格 (/)。 因此,无论如何,文本区域都需要一个强大的实体翻译处理程序,否则 它*终会对实体产生 Mojibake!
"
和 '
)的编码/换码问题,因此需要使用一些 javascript 来获取/翻译代码段,并将其设置在另一个(可见)元素中(或简单地将其设置为文本区域的值)。不知为什么,这给我在 FF 中使用实体带来了问题(就像在文本区域中一样)。但这并不重要,因为必须转义/编码嵌套引号的代价比(HTML5)文本区域更高(引号在源代码中很常见......)。
那么尝试(ab)使用 <![CDATA[<tag>bla&bla</tag>]]>
如何?"来封装原始代码段(脚本标记可以有一个 "id",您可以通过计数来访问它们)。但是,由于这显然会给原始代码段中的
/、
]]>和
</script` 带来转义问题,这似乎也不是一个解决方案。
请在本答案的评论中发表其他可行的'容器'。
顺便说一下,在注释标记"<!---> "中编码或计算"-"字符的数量并使其平衡,对于这个目的来说简直是疯了(除了规则 1)。
<hr>;
这样一来,我们就只能使用 Jukka K. Korpela'excellent answer:<xmp>
标签似乎是最好的选择!*
'被遗忘的' <xmp>
标签包含 CDATA
,就是为了这个目的而设计的,而且确实仍然[在当前的 HTML 5 规范中]5(至少从 HTML3.2 开始就是这样);这正是我们所需要的!它还受到广泛支持,甚至在 IE6 中也是如此(也就是说......直到它出现与滚动表体相同的退步)。pre
),而且 xmp
标记仍必须遵守第 1 条规则。但这是唯一的规则。<!-- ATTENTION: replace any occurrence of </xmp with </xmp -->
<xmp id="snippet-container">
<div>
<div>this is an example div & holds an xmp tag:<br />
<xmp>
<html><head> <!-- indentation col 0!! -->
<title>My Title</title>
</head><body>
<p>hello world !!</p>
</body></html>
</xmp> <!-- note this encoded/escaped tag -->
</div>
This line is also part of the snippet
</div>
</xmp>
上面的代码框展示了一个原始的标记,其中 <xmp id="snippet-container">
包含一个(几乎原始的)代码片段(包含 div>div>xmp>html-document
)。
注意到这个标记中编码的结束标记了吗?为了遵守第 1 条规则,这已被编码/转码)。
这样,嵌入/传输(有时几乎是)原始代码的问题就解决了。
那么显示/渲染该代码段(以及编码后的")呢? 浏览器将(或应该)完全按照您在上述代码块中看到的方式显示片段(
snippet-container内的内容)(不同浏览器对片段是否以空行开始存在一些差异)。 这*包括*格式化/缩进、实体(如字符串"&
)、完整标记、注释和编码后的结尾标记"`(就像在标记中编码一样)。根据浏览器(版本)的不同,甚至可以尝试使用属性 contenteditable="true"
来编辑该代码段(所有这些都不启用 javascript)。使用textarea.value=xmp.innerHTML
之类的操作也是轻而易举的。
因此,您可以...如果片段不包含容器的结尾字符序列。
但是,如果原始代码段包含结尾字符序列"</xmp"(因为它是 xmp 本身的一个示例或包含一些 regex 等),您必须接受在原始代码段中对该序列进行编码/解码,并且需要一个 javascript 处理程序来转换该编码,以显示/渲染编码后的"&.lt;/xmp>";lt;/xmp>,如
内的
textarea(用于编辑/张贴)或(例如)
pre,以便正确呈现代码段'代码(似乎如此)。 这里有一个非常简单的 [jsfiddle 示例][6]。请注意,即使在 IE6 中,获取/嵌入/显示/检索到文本区域也能完美运行。但是,设置
xmp'
innerHTML` 后,IE'发现了一些有趣的'智能'行为。在 fiddle 中有更详细的说明和解决方法。
但现在是重要的关键(这也是你只能非常接近*的另一个原因):
举个过于简单的例子,想象一下这个兔子洞*:
原始代码片段:
<!-- remember to translate between </xmp> and </xmp> -->
<xmp>
<p>a paragraph</p>
</xmp>
那么,为了遵守第 1 条规则,我们只需要对这些 </xmp[> \n\rt\f\/]
序列进行编码,对吗?
因此,我们可以得到下面的标记(仅使用一种可能的编码):
<xmp id="container">
<!-- remember to translate between </xmp> and </xmp> -->
<xmp>
<p>a paragraph</p>
</xmp>
</xmp>
嗯......我该拿水晶球还是掷硬币?不,让计算机看一下它的系统时钟,然后说明得出的数字是随机的''。是的,应该这样做。 使用类似*的 regex:xmp.innerHTML.replace(/<(?=//xmp[>\n\rt\f\/])/gi,'<');`,将翻译为'返回':
<!-- remember to translate between </xmp> and </xmp> -->
<xmp>
<p>a paragraph</p>
</xmp>
嗯......看来这个随机生成器坏了...休斯顿......?
如果你错过了这个笑话/问题,请从 '原始代码片段'开始再读一遍。
等等,我知道,我们(还)需要将 .... 编码为 ....
好了,倒回去从'原代码片段'开始再读一遍。
不知怎的,这一切开始有了SO 上著名的搞笑但真实的 rexgex 答案的味道,对于精通 mojibake 的人来说,这是一本不错的读物。
也许有人知道解决这个问题的巧妙算法或方案,但我认为内嵌的原始代码会变得越来越晦涩难懂,以至于你最好像其他人一样,只对 <
、&
(和 >
)进行适当的转义/编码。
结论: (使用 xmp
标记)
希望对您有所帮助!
PS:
如果您觉得这个解释有用,我将感激不尽,但我认为 Jukka'答案应该是公认的答案(如果没有更好的选择/答案出现的话),因为是他记住了 xmp 标记(多年来我已经忘记了这个标记,并被 pre
、textarea
等常用的 PCDATA 元素分散了注意力)。
本答案旨在解释为什么不能这样做(使用任何未知的原始片段),并解释其他一些答案(现已删除)在建议嵌入/传输文本区域时忽略的一些明显隐患。我扩展了现有的解释,也支持并进一步解释了 Jukka' 的答案(因为所有实体和 *CDATA 的东西几乎比代码页还难)。