Jak dodać znacznik pre wewnątrz znacznika kodu za pomocą jQuery?

Question

Próbuję użyć jQuery formatowania bloków kodu, specjalnie dodać <pre> tag wewnątrz znacznika <code>:

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

Firefox stosuje formatowanie prawidłowo, ale IE stawia cały blok kodu w jednej linii. Gdybym Dodaj ostrzeżenie

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

widzę, że IE wprowadził pewne dodatkowe tekst w tagu pre:

<PRE jQuery1218834632572="null"> 

Gdybym przeładować stronę, liczbę następujące zmiany jQuery.

Jeśli używam wrap() zamiast wrapInner(), zawinąć <pre> poza znacznikiem <code> zarówno IE i Firefox obsługiwać go prawidłowo. Ale czy nie powinienem również wykonywać ustawień wewnątrz <pre>?

wolałbym używać wrapInner() bo można następnie dodać klasę CSS do znacznika <pre> obsługiwać formatowanie, ale jeśli mogę użyć wrap(), muszę umieścić CSS formatowania strony w znaczniku <pre> i formatowanie tekstu/font w tagu <code> lub Firefox i IE dławią się. Nie jest to wielka sprawa, ale chciałbym, aby było to tak proste, jak to tylko możliwe.

Czy ktoś jeszcze to napotkał? Czy czegoś brakuje?

Answer 1

To jest różnica między elementami block and inline. pre is a block level element. Nie jest dozwolone umieszczanie go wewnątrz znacznika code, który to kod to can only contain inline content.

Przeglądarki muszą obsługiwać dowolną zupę tagów, które mogą znaleźć w prawdziwym Internecie, Firefox próbuje zrobić to, co masz na myśli. IE dzieje się inaczej, co jest w porządku dzięki specyfikacji; zachowanie w tym przypadku jest nieokreślone, ponieważ nigdy nie powinno się zdarzyć.

• mógłbyś zamiast zastąpić elementu code z pre? (Z powodu problemu blokowego/liniowego, to technicznie powinno działać tylko wtedy, gdy elementy znajdują się wewnątrz an element with "flow" content, ale przeglądarki mogą robić to, co chcesz.)
• Dlaczego jest to element code, jeśli chcesz pre zachowanie?
• Można również nadać białą, zachowującą moc białą przestrzenią code element, z CSS , ale podobno jest to IE 6 only honors that in Strict Mode.

Answer 2

Czy używasz najnowszej wersji jQuery? Co jeśli spróbujesz

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

Czy to lepiej czy też uzyskać ten sam wynik?

Answer 3

Btw Nie wiem, czy jest on powiązany, ale znaczniki pre wewnątrz znaczników kodu nie będą sprawdzane w trybie ścisłym.

Answer 4

Jak zaznaczono markpasc, element PRE wewnątrz elementu CODE nie jest dozwolony w HTML. Najlepszym rozwiązaniem jest zmiana kodu HTML na kod < pre> <> (co oznacza wstępnie sformatowany blok zawierający kod) bezpośrednio w kodzie HTML dla bloków kodu.

Answer 5

Można użyć html(), aby go owinąć:

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

Jak wspomniano powyżej, byłbyś lepiej zmieniając html. Ale to rozwiązanie powinno działać.