Wyświetl fragmenty HTML w HTML

208

Jak mogę pokazać HTML fragmenty na stronie internetowej bez konieczności wymiany każdego <z&lt; a >z &gt;?

Innymi słowy, czy istnieje tag, aby nie renderować HTML, dopóki nie trafisz tagu zamykającego ?

Steven
źródło

Odpowiedzi:

95

Nie , nie ma. W prawidłowym HTML nie można pominąć niektórych znaków:

  • & tak jak &amp;
  • < tak jak &lt;

(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-Typeheader - jedynie ustawienie! DOCTYPETo 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:

Konrad Rudolph
źródło
Miły. To część standardu HTML? Czy jest głębszy, jak część standardu xml?
aioobe,
7
W HTML spowoduje to wyświetlenie `tutaj]]>`
Dolph
3
Tak, to jest to dobre rozwiązanie, ale nie zapomnij, aby zastąpić >z &gt;
Alan
2
@Alan Zrobiłbym to również, ale tak naprawdę nie jest to konieczne : tylko <i &trzeba je wymienić, nieskalowany >jest ważny w HTML.
Konrad Rudolph
1
@SamWatkins Ale twoje rozwiązanie nie jest łatwiejsze niż moje . Właśnie zmieniłeś to, co trzeba uciec, a twoje rozwiązanie jest hackerskie, jak przyznajesz. Dosłownie nie ma przewagi nad robieniem tego poprawnie. To rozwiązany problem z prawidłowym rozwiązaniem. Nie potrzebujesz hacków, chyba że cała konfiguracja jest zhackowana.
Konrad Rudolph
161

Sprawdzona metoda HTML:

  1. Zastąp & postać na&amp;
  2. Zastąp < postać na&lt;
  3. Zastąp > postać na&gt;
  4. Opcjonalnie możesz otoczyć próbkę HTML tagami <pre>i / lub <code>.
Dolph
źródło
17
Wskazówka: Aby przyspieszyć zamianę kodu HTML, możesz użyć Notepad ++ z rozszerzeniem „TextFX”. Zaznacz tekst, przejdź do menu> TextFX> TextFX Convert> Zakoduj HTML (& <> ") → Gotowe
Kai Noack
2
Czy istnieje jakaś biblioteka JavaScript, która może to zrobić, przypadkiem?
Anderson Green,
9
To nie odpowiada na pytanie, które brzmiało „bez konieczności wymiany ...”. Poza tym zastąpienie „>” nie jest konieczne.
Jukka K. Korpela
2
Ważna jest także kolejność. Upewnij się, że zajmujesz się &pierwszym i <późniejszym.
Tolga Evcimen
151

Najlepszym sposobem:

<xmp>
// your codes ..
</xmp>

stare próbki:

próbka 1 :

<pre>
  This text has
  been formatted using
  the HTML pre tag. The brower should
  display all white space
  as it was entered.
</pre>

próbka 2 :

<pre>
  <code>
    My pre-formatted code
    here.
  </code>
</pre>

próbka 3 : (Jeśli faktycznie „zacytujesz” blok kodu, to znacznikiem byłoby)

<blockquote>
  <pre>
    <code>
        My pre-formatted "quoted" code here.
    </code>
  </pre>
</blockquote>

niezła próbka CSS:

pre{
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  margin-bottom: 10px;
  overflow: auto;
  width: auto;
  padding: 5px;
  background-color: #eee;
  width: 650px!ie7;
  padding-bottom: 20px!ie7;
  max-height: 600px;
}

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?

Erfan Safarpoor
źródło
4
Elementy użyte w odpowiedzi w ogóle nie odpowiadają na pytanie: nie wpływają na interpretację „<” rozpoczynającego tag.
Jukka K. Korpela
7
developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp mówi: „ Nie używaj tego elementu . Został przestarzały od HTML3.2 i nie został zaimplementowany w spójny sposób. Został całkowicie usunięty z język HTML5 ”.
Nick Rice,
50

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ć.

<textarea disabled> code </textarea>

Mam nadzieję, że pomoże to komuś, kto szuka łatwego sposobu na załatwienie rzeczy ...

Krunal
źródło
7
Tylko do odczytu może być lepszym atrybutem niż wyłączony, aby można było podświetlić znajdujący się w nim tekst. Możliwe też dodanie stylu, który usuwa go z wszelkich funkcji, które sprawiają, że wygląda jak element wejściowy, chociaż jest to kwestia dodatkowa.
Tarquin
2
Niesamowite rozwiązanie. Dzięki
Apit John Ismail
1
Znaki handlowe będą nadal interpretowane. np. & nbsp; będą renderowane jako rzeczywista przestrzeń niełamliwa. Niemniej jednak dobra odpowiedź jest idealna do czegoś, co chcę zrobić.
Nick Rice,
1
Próbowałem na wiele sposobów i to jest jedyny sposób, który działa dla mnie. Wielkie dzięki.
William Hou
25

Przestarzałe , ale działa w FF3 i IE8.

<xmp>
   <b>bold</b><ul><li>list item</li></ul>
</xmp>

Zalecana:

<pre><code>
    code here, escape it yourself.
</code></pre>
s_hewitt
źródło
12

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:

<textarea disabled="true" style="border: none;background-color:white;">
    <p>test</p>
</textarea>

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:

<textarea disabled="true" style="border: none;background-color:white;">
    <?php echo '<p>test</p>'; ?>
</textarea>

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.

GShenanigan
źródło
1
to okropny pomysł. Co jeśli wyświetla się dynamiczny HTML, a ktoś wykona następujące czynności. <? php echo '</textarea> <script> alert (\' hello world \ '); </script> <textarea>'; />. Dlatego twój kod jest podatny na xss.
Gary Drocella,
PHP jest po stronie serwera, więc nie zmienia wyniku wyświetlanego przez przeglądarkę. Szczególnie nie omija interpretera HTML.
Robert Siemer
Lubię formatowanie obszaru tekstowego, aby nie wyglądało jak pole wprowadzania. Dodam również szerokość 100%, aby zmniejszyć zawijanie:<textarea disabled="true" style="border: none;background-color:white; width:100%">
Dan King
@GaryDrocella, jeśli wstawisz tagi <script> do tetarei, zostaną one przekonwertowane na & lt; i> automatycznie, więc żaden skrypt nigdy nie jest wykonywany
bluejayke
6

W HTML? Nie.

W XML / XHTML? Możesz użyć CDATAbloku.

Cletus
źródło
6

To bardzo proste ... Użyj tego kodu xmp

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>
Kamlesh
źródło
6

Zakładam:

  • chcesz napisać w 100% poprawny HTML5
  • chcesz umieścić fragment kodu (prawie) dosłowny w kodzie HTML
    • szczególnie <nie powinien potrzebować ucieczki

Wszystkie opcje znajdują się w tym drzewie:

  • ze składnią HTML
    • istnieje pięć rodzajów elementów
    • te zwane „normalnymi elementami” (jak <p> )
      • nie mogę mieć literału <
      • będzie to uważane za początek następnego tagu lub komentarza
    • puste elementy
      • nie mają treści
      • możesz umieścić swój HTML w atrybucie danych (ale dotyczy to wszystkich elementów)
      • wymagałoby JavaScript, aby przenieść dane w inne miejsce
      • w atrybutach podwójnego cudzysłowu "i &thing;wymagają zmiany znaczenia: &quot;i &amp;thing;odpowiednio
    • surowe elementy tekstowe
      • <script>i <style>tylko
      • nigdy nie są widoczne
      • ale osadzenie tekstu w JavaScript może być wykonalne
      • JavaScript pozwala na wieloliniowe ciągi znaków z backticksami
      • można go następnie wstawić dynamicznie
      • dosłownie </scriptnie jest dozwolone w żadnym miejscu<script>
    • nieprzetworzone surowe elementy tekstowe
      • <textarea>i <title>tylko
      • <textarea> jest dobrym kandydatem do owinięcia kodu
      • pisanie </html>tam jest całkowicie legalne
      • podła nie jest legalna </textareaz oczywistych powodów
        • uciec od tego specjalnego przypadku z &lt;/textarealub podobnym
      • &thing; potrzebuje ucieczki: &amp;thing;
    • elementy obce
      • elementy z przestrzeni nazw MathML i SVG
      • przynajmniej SVG pozwala ponownie osadzać HTML ...
      • i CDATA jest tam dozwolone, więc wydaje się, że ma potencjał
  • ze składnią XML

 

Uwaga: >nigdy nie trzeba uciekać. Nawet w normalnych elementach.

Robert Siemer
źródło
1
Podoba mi się kompleksowe podejście do twojej odpowiedzi. Kilka korekt: <script>a <style>może stać się widoczny, wystarczy umieścić je wewnątrz <body>z style="display: block; white-space: pre;"i type="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.
Sam Watkins,
Ciekawy. @SamWatkins <xmp>nie jest prawidłowym HTML5, ale Twoja druga sztuczka wygląda poprawnie!
Robert Siemer
5

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 )

<div id="myCode">
    <p>
        hello world
    </p>
</div>

<div id="loadHere"></div>


document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;

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 &nbsp;są całkowicie usuwane z obszaru tekstowego)

Timothy Kanski
źródło
To całkiem miłe podejście, aby użyć JavaScript i DOM API do wykonania dla nas ucieczki. Możemy użyć go razem z <template>czymś, co zwykle nie jest renderowane.
Sam Watkins,
3

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

Stephen R.
źródło
3
<textarea ><?php echo htmlentities($page_html); ?></textarea>

działa dobrze dla mnie ..

„pamiętając o Alexander'ssugestiach, 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ć textareaznaczniki 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 htmlentitieskonwertuje 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ć :)

Anupam
źródło
2
Chociaż ten kod może odpowiedzieć na pytanie, zapewnienie dodatkowego kontekstu dotyczącego tego, jak i dlaczego rozwiązuje problem, poprawiłoby długoterminową wartość odpowiedzi.
Alexander
1
Jeśli używasz htmlentities () w ten sposób, <textarea> staje się zbędny. Po prostu umieść to w div lub coś takiego. OP nie sugeruje jednak, że w ogóle używają PHP.
Nick Rice,
@Nick no cóż, moim zdaniem textarea służy jako naturalny pojemnik, ponieważ automatycznie dodaje paski przewijania i rzeczy, które inaczej wymagają stylizacji, jeśli umieścimy to w div czegoś ..
Anupam
2

Możesz użyć języka po stronie serwera, takiego jak PHP, aby wstawić surowy tekst:

<?php
  $str = <<<EOD
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Minimal HTML5">
    <meta name="keywords" content="HTML5,Minimal">
    <title>This is the title</title>
    <link rel='stylesheet.css' href='style.css'>
  </head>
  <body>
  </body>
  </html>
  EOD;
?>

następnie $strzrzuć wartość htmlencoded:

<div style="white-space: pre">
  <?php echo htmlentities($str); ?>
</div>
kta
źródło
2

To prosta sztuczka i wypróbowałem ją w Safari i Firefox

<code>
    <span><</span>meta property="og:title" content="A very fine cuisine" /><br>
    <span><</span>meta property="og:image" content="http://www.example.com/image.png" />
</code>

Wyświetli się tak:

wprowadź opis zdjęcia tutaj

Możesz to zobaczyć na żywo tutaj

Ramtin
źródło
2

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:

<div id="mydoc-src" style="display: none;">
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
</div>

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średnictweminnerHTML ! 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 LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJosznurek? 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:

    var converter = new showdown.Converter();
    converter.setOption('simplifiedAutoLink', true);
    converter.setOption('tables', true);
    converter.setOption('tasklists', true);
    var src = document.getElementById("mydoc-src");
    var res = document.getElementById("mydoc-res");
    res.innerHTML = converter.makeHtml(src.innerHTML)
            .replace(/<p>.{0,10}LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo.{0,10}<\/p>/g, "");
    src.innerHTML = '';

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:

<div id="mydoc-src" style="display: none;">
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
</div>

i kod JavaScript, aby go uzyskać:

    var src = document.getElementById("mydoc-src");
    var YOUR_CODE = src.innerHTML.replace(/(<!--|-->)/g, "");
Leonid Titov
źródło
1

Istnieje kilka sposobów na ucieczkę od wszystkiego w HTML, żaden z nich nie jest miły.

Możesz też wstawić plik, iframektóry ładuje zwykły stary plik tekstowy.

BCS
źródło
1

Jest to zdecydowanie najlepsza metoda w większości sytuacji:

<pre><code>
    code here, escape it yourself.
</code></pre>

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.

xdaxdb
źródło
1

Oto jak to zrobiłem:

$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";
techiegirl
źródło
ten kod jest podatny na xss. każdy może ustawić $ str = "</textarea> <textarea>"
Gary Drocella
Cześć, to może rozwiązać problem ... ale dobrze by było, gdybyś mógł podać małe wyjaśnienie, jak i dlaczego to działa :) Nie zapomnij - na przepełnieniu stosu jest mnóstwo nowych graczy, którzy mogliby się uczyć kilka rzeczy z twojej wiedzy specjalistycznej - to, co dla ciebie oczywiste, może nie być dla nich takie.
Taryn East
1
function escapeHTML(string)
    { 
        var pre = document.createElement('pre');
        var text = document.createTextNode(string);
        pre.appendChild(text);
        return pre.innerHTML;
}//end escapeHTML

zwróci uciekający HTML

Govind Singh
źródło
1

Możesz spróbować:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

Brendan
źródło
0

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.

Drew Thomas
źródło
0

To trochę hack, ale możemy użyć czegoś takiego:

body script {
    display: block;
    font-family: monospace;
    white-space: pre;
}
<script type="text/html">
<h1>Hello World</h1>

<ul>
    <li>Enjoy this dodgy hack,
    <li>or don't!
</ul>
</script>

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? .

Sam Watkins
źródło
-1
 //To show xml tags in table columns you will have to encode the tags first

function htmlEncode(value) {
    //create a in-memory div, set it's inner text(which jQuery automatically encodes)
    //then grab the encoded contents back out.  The div never exists on the page.
    return $('<div/>').text(value).html();
}

html = htmlEncode(html)
Preetika
źródło
-2

Kombinacja kilku odpowiedzi, które tutaj działają razem:

function c(s) {
    return s.split("&lt;").join("<").split("&gt;").join(">").split("&amp;").join("&")
}

displayMe.innerHTML = ok.innerHTML;
console.log(
  c(ok.innerHTML)
)
<textarea style="display:none" id="ok">
<script>
console.log("hello", 5&9);
</script>
</textarea>
<div id="displayMe">

</div>

bluejayke
źródło