Jak mogę pokazać HTML fragmenty na stronie internetowej bez konieczności wymiany każdego <
z<
a >
z >
?
Innymi słowy, czy istnieje tag, aby nie renderować HTML, dopóki nie trafisz tagu zamykającego ?
Nie , nie ma. W prawidłowym HTML nie można pominąć niektórych znaków:
&
tak jak &
<
tak jak <
(Nawiasem mówiąc, nie ma potrzeby ucieczki >
ale ludzie często robią to ze względu na symetrię).
I oczywiście powinieneś otoczyć wynikowy, uciekający kod HTML wewnątrz, <pre><code>…</code></pre>
aby (a) zachować białe znaki i podział wiersza oraz (b) oznaczyć go jako element kodu.
Wszystkie inne rozwiązania, takie jak owijanie swój kod do <textarea>
lub z (przestarzałe) <xmp>
elementu, złamie . 1
XHTML, która jest zadeklarowana do przeglądarki jako XML (przez HTTP Content-Type
header - jedynie ustawienie! DOCTYPE
To nie wystarczy ) mogłaby ewentualnie użyć sekcji CDATA:
<![CDATA[Your <code> here]]>
Ale działa to tylko w XML, a nie w HTML, a nawet to nie jest niezawodne rozwiązanie, ponieważ kod nie może zawierać ogranicznika zamykającego ]]>
. Tak więc nawet w XML najprostszym i najbardziej niezawodnym rozwiązaniem jest ucieczka.
1 przypadek w punkcie:
>
z>
<
i&
trzeba je wymienić, nieskalowany>
jest ważny w HTML.Sprawdzona metoda HTML:
&
postać na&
<
postać na<
>
postać na>
<pre>
i / lub<code>
.źródło
&
pierwszym i<
późniejszym.Najlepszym sposobem:
stare próbki:
próbka 1 :
próbka 2 :
próbka 3 : (Jeśli faktycznie „zacytujesz” blok kodu, to znacznikiem byłoby)
niezła próbka CSS:
Kod podświetlania składni (dla profesjonalistów):
tęcze (bardzo idealne)
upiększać
syntaxhighlighter
atrakcja
JSHighlighter
najlepsze linki dla Ciebie:
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-any-project/
https://github.com/balupton/jquery-syntaxhighlighter
http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css/
http://alexgorbatchev.com/SyntaxHighlighter/
https://code.google.com/p/jquery-chili-js/
Jak wyróżnić kod źródłowy w HTML?
źródło
Rodzajem naiwnej metody wyświetlania kodu będzie włączenie go do obszaru tekstowego i dodanie atrybutu disabled, aby nie można go było edytować.
Mam nadzieję, że pomoże to komuś, kto szuka łatwego sposobu na załatwienie rzeczy ...
źródło
Przestarzałe , ale działa w FF3 i IE8.
Zalecana:
źródło
użyłem
<xmp>
tak: http://jsfiddle.net/barnameha/hF985/1/źródło
Przestarzałe
<xmp>
znacznik zasadniczo to robi, ale nie jest już częścią specyfikacji XHTML. Powinien nadal działać we wszystkich obecnych przeglądarkach.Oto kolejny pomysł, sztuczka hack / salon, możesz umieścić kod w polu tekstowym w taki sposób:
Umieszczenie nawiasów kątowych i takiego kodu w polu tekstowym jest nieprawidłowym kodem HTML i spowoduje niezdefiniowane zachowanie w różnych przeglądarkach. W Internet Explorerze HTML jest interpretowany, podczas gdy Mozilla, Chrome i Safari pozostawiają go bez interpretacji.
Jeśli chcesz, aby był nieedytowalny i wyglądał inaczej, możesz z łatwością stylizować go za pomocą CSS. Jedynym problemem byłoby to, że przeglądarki dodają ten mały uchwyt przeciągania w prawym dolnym rogu, aby zmienić rozmiar pudełka. Lub alternatywnie spróbuj zamiast tego użyć tagu wejściowego.
Właściwym sposobem na wstrzyknięcie kodu do obszaru tekstowego jest użycie języka po stronie serwera, takiego jak PHP, na przykład:
Następnie omija interpreter html i konsekwentnie umieszcza nieprzeczytany tekst w obszarze tekstowym we wszystkich przeglądarkach.
Poza tym jedynym sposobem jest naprawdę samodzielne uniknięcie kodu, jeśli statyczny HTML lub użycie metod po stronie serwera, takich jak .NET's HtmlEncode () przy użyciu takiej technologii.
źródło
<textarea disabled="true" style="border: none;background-color:white; width:100%">
W HTML? Nie.
W XML / XHTML? Możesz użyć
CDATA
bloku.źródło
To bardzo proste ... Użyj tego kodu xmp
źródło
Zakładam:
<
nie powinien potrzebować ucieczkiWszystkie opcje znajdują się w tym drzewie:
<p>
)<
"
i&thing;
wymagają zmiany znaczenia:"
i&thing;
odpowiednio<script>
i<style>
tylko</script
nie jest dozwolone w żadnym miejscu<script>
<textarea>
i<title>
tylko<textarea>
jest dobrym kandydatem do owinięcia kodu</html>
tam jest całkowicie legalne</textarea
z oczywistych powodów</textarea
lub podobnym&thing;
potrzebuje ucieczki:&thing;
Uwaga:
>
nigdy nie trzeba uciekać. Nawet w normalnych elementach.źródło
<script>
a<style>
może stać się widoczny, wystarczy umieścić je wewnątrz<body>
zstyle="display: block; white-space: pre;"
itype="text/html"
czy coś, jeśli nie ma to być realizowane jako JavaScript. Myślę, że to całkiem niezła sztuczka, dobra do pisania i programowania.<xmp>
Wciąż jest także implementowany w głównych przeglądarkach, choć jest przestarzały.<xmp>
nie jest prawidłowym HTML5, ale Twoja druga sztuczka wygląda poprawnie!Jeśli Twoim celem jest pokazanie fragmentu kodu, który wykonujesz w innym miejscu na tej samej stronie, możesz użyć textContent (jest to czysta js i jest dobrze obsługiwana: http://caniuse.com/#feat=textcontent )
Aby uzyskać wynik formatowania wieloliniowego, musisz ustawić styl css „white-space: pre;” na docelowym div i napisz wiersze osobno, używając „\ r \ n” na końcu każdego.
Oto demo: https://jsfiddle.net/wphps3od/
Ta metoda ma tę przewagę, że używa textarea: kod nie zostanie sformatowany tak, jak w przypadku textarea. (Rzeczy takie
są całkowicie usuwane z obszaru tekstowego)źródło
<template>
czymś, co zwykle nie jest renderowane.Ostatecznie najlepszą (choć irytującą) odpowiedzią jest „ucieczka przed tekstem”.
Istnieje jednak wiele edytorów tekstu - a nawet samodzielnych mini programów narzędziowych - które mogą to zrobić automatycznie. Dlatego nigdy nie powinieneś uciekać od niego ręcznie, jeśli nie chcesz (chyba że jest to kombinacja kodu ucieczki i kodu ucieczki ...)
Szybkie wyszukiwanie Google pokazuje mi ten, na przykład: http://malektips.com/zzee-text-utility-html-escape-regular-expression.html
źródło
działa dobrze dla mnie ..
„pamiętając o
Alexander's
sugestiach, oto dlaczego uważam, że jest to dobre podejście”jeśli spróbujemy po prostu
<textarea>
, może nie zawsze działać, ponieważ mogą istniećtextarea
znaczniki zamykające , które mogą nieprawidłowo zamykać znacznik nadrzędny i wyświetlać resztę źródła HTML w dokumencie nadrzędnym, co wyglądałoby niezręcznie.przy użyciu
htmlentities
konwertuje wszystkie odpowiednie znaki, takie jak< >
jednostki HTML, co eliminuje wszelkie możliwości wycieków.Mogą być zalety lub wady tego podejścia lub lepszy sposób osiągnięcia tych samych wyników, jeśli tak, proszę o komentarz, ponieważ chciałbym się od nich uczyć :)
źródło
Możesz użyć języka po stronie serwera, takiego jak PHP, aby wstawić surowy tekst:
następnie
$str
zrzuć wartość htmlencoded:źródło
To prosta sztuczka i wypróbowałem ją w Safari i Firefox
Wyświetli się tak:
Możesz to zobaczyć na żywo tutaj
źródło
W rzeczywistości jest na to sposób. Ma ograniczenie (jeden), ale jest w 100% standardowy, nie jest przestarzały (jak xmp) i działa.
I to jest banalne. Oto on:
Pozwól mi wyjaśnić. Przede wszystkim zwykły komentarz HTML wykonuje zadanie, aby zapobiec interpretacji całego bloku. Możesz łatwo dodać w nim dowolne tagi, wszystkie zostaną zignorowane. Zignorowany z interpretacji, ale nadal dostępny za pośrednictwem
innerHTML
! Pozostało więc pobrać zawartość i przefiltrować tokeny komentarzy poprzedzających i końcowych.Z wyjątkiem (pamiętaj - ograniczenie), że nie możesz umieszczać w nim komentarzy HTML, ponieważ (przynajmniej w moim Chrome) zagnieżdżanie ich nie jest obsługiwane, a najpierw „->” zakończy przedstawienie.
Cóż, jest to paskudne małe ograniczenie, ale w niektórych przypadkach nie stanowi żadnego problemu, jeśli tekst jest wolny od komentarzy HTML. I łatwiej jest uciec przed jednym konstruktem, a potem całą ich grupą.
Co to za dziwny
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
sznurek? Jest to ciąg losowy, taki jak skrót, który prawdopodobnie nie będzie używany w bloku i użyty? Oto kontekst, dlaczego go użyłem. W moim przypadku wziąłem zawartość jednego DIV, następnie przetworzyłem go za pomocą markdown Showdown, a następnie dane wyjściowe przypisałem do innego diva. Pomysł polegał na tym, aby zapisać przecenę bezpośrednio w pliku HTML i po prostu otworzyć w przeglądarce, aby przekształcić ładunek w locie. Tak więc, w moim przypadku,<!--
został przekształcony<p><!--</p>
, komentarz właściwie uciekł. Działało, ale zanieczyściło ekran. Tak więc, aby łatwo usunąć go za pomocą wyrażenia regularnego, zastosowano losowy ciąg. Oto kod:I to działa.
Jeśli ktoś jest zainteresowany, ten artykuł został napisany przy użyciu tej techniki. Pobierz i zajrzyj do pliku HTML.
To zależy do czego go używasz. Czy to wkład użytkownika? Następnie użyj
<textarea>
i uciec od wszystkiego.W moim przypadku, i prawdopodobnie jest to również twoja sprawa, po prostu użyłem komentarzy i to działa.Jeśli nie używasz Markdown, a chcesz po prostu pobrać go z tagu, jest to jeszcze prostsze:
i kod JavaScript, aby go uzyskać:
źródło
Istnieje kilka sposobów na ucieczkę od wszystkiego w HTML, żaden z nich nie jest miły.
Możesz też wstawić plik,
iframe
który ładuje zwykły stary plik tekstowy.źródło
Jest to zdecydowanie najlepsza metoda w większości sytuacji:
Głosowałbym za pierwszą osobą, która to zasugerowała, ale nie mam reputacji. Czułem się zmuszony do powiedzenia czegoś ze względu na ludzi próbujących znaleźć odpowiedzi w Internecie.
źródło
Oto jak to zrobiłem:
źródło
zwróci uciekający HTML
źródło
Możesz spróbować:
źródło
Może nie działać w każdej sytuacji, ale umieszcza fragmenty kodu w pliku
textarea
spowoduje wyświetlenie ich jako kodu.Możesz stylizować obszar tekstowy za pomocą CSS, jeśli nie chcesz, aby wyglądał jak rzeczywisty obszar tekstowy.
źródło
To trochę hack, ale możemy użyć czegoś takiego:
Za pomocą tego CSS przeglądarka wyświetla skrypty wewnątrz ciała. Nie będzie próbował wykonać tego skryptu, ponieważ ma nieznany typ
text/html
. Użycie znaków specjalnych w środku nie jest konieczne<script>
, chyba że chcesz dołączyć</script>
tag zamykający .Używam czegoś takiego, aby wyświetlić wykonywalny kod JavaScript w treści strony, aby coś w rodzaju „umiejętności programowania”.
W tym pytaniu jest więcej informacji. Kiedy tagi powinny być widoczne i dlaczego? .
źródło
źródło
Kombinacja kilku odpowiedzi, które tutaj działają razem:
źródło