Wyświetl fragmenty HTML w HTML

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

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.

¹ przypadek w punkcie:

textarea {border: none; width: 100%;}

<textarea readonly="readonly">
  <p>Computer <textarea>says</textarea> <span>no.</span>
</textarea>

<xmp>
  Computer <xmp>says</xmp> <span>no.</span>
</xmp>

Sprawdzona metoda HTML:

1. Zastąp & postać na&
2. Zastąp < postać na<
3. Zastąp > postać na>
4. Opcjonalnie możesz otoczyć próbkę HTML tagami <pre>i / lub <code>.

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?

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

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>

użyłem <xmp>tak: http://jsfiddle.net/barnameha/hF985/1/

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.

W HTML? Nie.

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

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

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

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: "i &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 </textarealub podobnym
    • &thing; potrzebuje ucieczki: &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
  • objęte odpowiedzią Konrada

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

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

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

<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ć :)

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>

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:

Możesz to zobaczyć na żywo tutaj

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, "");

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.

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.

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>";

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

Możesz spróbować:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

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.

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

 //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)

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>