Question

我正在尝试使用jQuery格式化代码块，特别是在<pre>标记内添加<code>标记：

$(document).ready(function() {
   $("code").wrapInner("<pre></pre>");
});

Firefox正确应用格式，但IE将整个代码块放在一行上。如果我添加提醒

alert($("code").html());

我看到IE已在预标签中插入了一些额外的文字：

<PRE jQuery1218834632572="null">

如果我重新加载页面，jQuery后面的数字会改变。

如果我使用wrap()代替wrapInner()，要将<pre>包裹在<code>标记之外，IE和Firefox都会正确处理它。但是，<pre>不应该在 <code>内工作吗？

我更喜欢使用wrapInner()，因为我可以在<pre>标记中添加CSS类来处理所有格式，但如果我使用wrap()，我必须放置页面格式化<pre>标记中的CSS和<code>标记中的文本/字体格式，或Firefox和IE都会阻塞。没什么大不了的，但我想尽量保持简单。

还有其他人遇到过这个吗？我错过了什么吗？

Answer 1

这是block and inline元素之间的差异。 pre is a block level element。将其放在code标记can only contain inline content。

中是不合法的

因为浏览器必须支持他们可能在真实网络上找到的任何神奇的标签汤，所以Firefox会尝试做你的意思。 IE碰巧以不同的方式处理它，这很好的规范;在这种情况下的行为是未指定的，因为它永远不会发生。

您可以使用code替换替换 pre元素吗？（由于块/内联问题，从技术上说，只有在元素位于an element with "flow" content内时才能工作，但浏览器可能会按照您的意愿执行。）
如果您想要code的行为，为什么它首先是pre元素？
您还可以使用CSS white-space: pre为code元素pre提供保留空白的空白，但显然IE 6 only honors that in Strict Mode。

Answer 2

顺便说一下我不知道它是否相关，但代码标签内的预标签不会在严格模式下验证。

Answer 3

您使用的是最新的jQuery吗？如果你尝试

怎么办？

$("code").wrapInner(document.createElement("pre"));

是否更好，或者你得到相同的结果？

Answer 4

正如markpasc所述，HTML中不允许在CODE元素中使用PRE元素。最佳解决方案是将您的HTML代码更改为使用＆lt; pre＆gt;＆lt; code＆gt; （这意味着包含代码的预格式化的块）直接在HTML中用于代码块。

Answer 5

您可以使用html（）来包装它：

$('code').each(function(i,e)
{
    var self = $(e);
    self.html('<pre>' + self.html() + '</pre>');
});

如上所述，你最好更改你的HTML。但是这个解决方案应该可行。

如何使用jQuery在代码标记内添加pre标记？

5 个答案: