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

I'm trying to use jQuery to format code blocks, specifically to add a <pre> tag inside the <code> tag:

我正在尝试使用jQuery格式化代码块,特别是在标记内添加

标记:

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

Firefox applies the formatting correctly, but IE puts the entire code block on one line. If I add an alert

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

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

I see that IE has inserted some additional text into the pre tag:

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

<PRE jQuery1218834632572="null">

If I reload the page, the number following jQuery changes.

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

If I use wrap() instead of wrapInner(), to wrap the <pre> outside the <code> tag, both IE and Firefox handle it correctly. But shouldn't <pre> work inside <code> as well?

如果我使用wrap()而不是wrapInner(),将

包装在标记之外,IE和Firefox都会正确处理它。但是不应该在里面工作吗?

I'd prefer to use wrapInner() because I can then add a CSS class to the <pre> tag to handle all formatting, but if I use wrap(), I have to put page formatting CSS in the <pre> tag and text/font formatting in the <code> tag, or Firefox and IE both choke. Not a huge deal, but I'd like to keep it as simple as possible.

我更喜欢使用wrapInner(),因为我可以在

标签中添加一个CSS类来处理所有格式,但是如果我使用wrap(),我必须将页面格式化CSS放在标签中, 标签中的文本/字体格式,或Firefox和IE都窒息。没什么大不了的,但我想尽量保持简单。

Has anyone else encountered this? Am I missing something?

有人遇到过这种情况么?我错过了什么吗?

5 个解决方案

#1

That's the difference between block and inline elements. pre is a block level element. It's not legal to put it inside a code tag, which can only contain inline content.

这是块和内联元素之间的区别。 pre是块级元素。将它放在代码标记中是不合法的,代码标记只能包含内联内容。

Because browsers have to support whatever godawful tag soup they might find on the real web, Firefox tries to do what you mean. IE happens to handle it differently, which is fine by the spec; behavior in that case is unspecified, because it should never happen.

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

Could you instead replace the code element with the pre? (Because of the block/inline issue, technically that should only work if the elements are inside an element with "flow" content, but the browsers might do what you want anyway.)

你可以用pre替换代码元素吗? (由于块/内联问题,从技术上说,只有当元素位于具有“流”内容的元素内时,才应该有效,但浏览器可能会做你想要的。)

Why is it a code element in the first place, if you want pre's behavior?

如果你想要pre的行为,为什么它首先是一个代码元素?

You could also give the code element pre's whitespace preserving power with the CSS white-space: pre, but apparently IE 6 only honors that in Strict Mode.

您还可以使用CSS white-space:pre给代码元素pre的空白保留功能,但显然IE 6仅在严格模式下表示尊重。

#2

Btw I don't know if it is related but pre tags inside code tags will not validate in strict mode.

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

#3

Are you using the latest jQuery ? What if you try

你在使用最新的jQuery吗?如果你尝试怎么办?

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

Is it any better or do you get the same result ?

它是更好还是你得到相同的结果?

#4

As markpasc stated, a PRE element inside CODE element is not allowed in HTML. The best solution is to change your HTML code to use <pre><code> (which means a preformatted block that contains code) directly in your HTML for code blocks.

正如markpasc所述,HTML中不允许在CODE元素中使用PRE元素。最佳解决方案是将HTML代码更改为直接在HTML中使用

 (这意味着包含代码的预格式化块)以获取代码块。

#5

You could use html() to wrap it:

您可以使用html()来包装它:

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

As mentioned above, you'd be better off changing your html. But this solution should work.

如上所述,你最好更改你的HTML。但这个解决方案应该有效。

#1