Visualizza frammenti HTML in HTML

Come posso mostrare i frammenti HTML su una pagina Web senza bisogno di sostituirli <con <e >con >?

In altre parole, esiste un tag per non eseguire il rendering HTML fino a quando non si preme il tag di chiusura ?

No , non c'è. In HTML, non c'è modo di sfuggire ad alcuni caratteri:

• & come &
• < come <

(Per inciso, non è necessario scappare >ma le persone spesso lo fanno per motivi di simmetria.)

E, naturalmente, dovresti racchiudere il codice HTML risultante sfuggito all'interno <pre><code>…</code></pre>di (a) conservare spazi bianchi e interruzioni di riga e (b) contrassegnarlo come elemento di codice.

Tutte le altre soluzioni, come il wrapping del codice in uno <textarea>o l' <xmp>elemento (deprecato) , verranno interrotte . ¹

L'XHTML dichiarato al browser come XML (tramite l' Content-Typeintestazione HTTP ! - la semplice impostazione di a nonDOCTYPE è sufficiente ) potrebbe in alternativa utilizzare una sezione CDATA:

<![CDATA[Your <code> here]]>

Ma questo funziona solo in XML, non in HTML, e anche questa non è una soluzione infallibile, poiché il codice non deve contenere il delimitatore di chiusura ]]>. Quindi, anche in XML, la soluzione più semplice e robusta è la fuga.

¹ Caso in questione:

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>

Il metodo provato e vero per HTML:

1. Sostituisci il &personaggio con&
2. Sostituisci il <personaggio con<
3. Sostituisci il >personaggio con>
4. Facoltativamente, circonda il tuo esempio HTML con <pre>e / o <code>tag.

miglior modo:

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

vecchi campioni:

campione 1 :

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

campione 2 :

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

esempio 3 : (Se stai effettivamente "citando" un blocco di codice, allora il markup sarebbe)

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

bel campione 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;
}

Codice di evidenziazione della sintassi (per lavoro professionale):

arcobaleni (molto perfetti)

abbellire

SyntaxHighlighter

evidenziare

JSHighlighter

i migliori collegamenti per te:

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/

Come evidenziare il codice sorgente in HTML?

Un tipo di metodo ingenuo per visualizzare il codice lo includerà in un'area di testo e aggiungerà l'attributo disabilitato in modo che non sia modificabile.

<textarea disabled> code </textarea>

Spero che aiuti qualcuno in cerca di un modo semplice per fare cose ..

Obsoleto , ma funziona in FF3 e IE8.

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

Consigliato:

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

ho usato <xmp>proprio così: http://jsfiddle.net/barnameha/hF985/1/

Il deprecato <xmp> tag essenzialmente lo fa, ma non fa più parte delle specifiche XHTML. Dovrebbe funzionare comunque in tutti i browser attuali.

Ecco un'altra idea, un trucco hack / parlor, potresti mettere il codice in una textarea in questo modo:

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

Inserire parentesi angolari e codice come questo all'interno di un'area di testo non è un codice HTML valido e causerà un comportamento indefinito nei diversi browser. In Internet Explorer l'HTML viene interpretato, mentre Mozilla, Chrome e Safari non lo interpretano.

Se vuoi che non sia modificabile e che appaia diverso, puoi facilmente modellarlo usando CSS. L'unico problema sarebbe che i browser aggiungeranno quel quadratino di trascinamento nell'angolo in basso a destra per ridimensionare la casella. In alternativa, prova invece a utilizzare un tag di input.

Il modo giusto per inserire il codice nella tua textarea è usare ad esempio un linguaggio lato server come questo PHP:

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

Quindi ignora l'interprete html e inserisce il testo non interpretato nell'area di testo in modo coerente in tutti i browser.

Oltre a ciò, l'unico modo è davvero quello di sfuggire al codice da soli se HTML statico o usando metodi lato server come HtmlEncode () di .NET se si utilizza tale tecnologia.

In HTML? No.

In XML / XHTML? Potresti usare un CDATAblocco.

È molto semplice .... Usa questo codice xmp

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

Presumo:

• vuoi scrivere HTML5 valido al 100%
• vuoi inserire lo snippet di codice (quasi) letterale nell'HTML
  • soprattutto <non dovrebbe essere necessario scappare

Tutte le opzioni sono in questo albero:

• con sintassi HTML
  • ci sono cinque tipi di elementi
  • quelli chiamati "elementi normali" (come <p>)
    • non può avere un valore letterale <
    • sarebbe considerato l'inizio del prossimo tag o commento
  • elementi vuoti
    • non hanno contenuto
    • potresti inserire il tuo HTML in un attributo di dati (ma questo vale per tutti gli elementi)
    • che avrebbe bisogno di JavaScript per spostare i dati altrove
    • con attributi tra virgolette doppie "e &thing;necessita di escape: "e &thing;rispettivamente
  • elementi di testo non elaborati
    • <script>e <style>solo
    • non sono mai resi visibili
    • ma l'incorporamento del testo in Javascript potrebbe essere fattibile
    • Javascript consente stringhe multilinea con backtick
    • potrebbe quindi essere inserito in modo dinamico
    • un letterale </scriptnon è permesso da nessuna parte<script>
  • elementi di testo non elaborabili evitabili
    • <textarea>e <title>solo
    • <textarea> è un buon candidato per inserire il codice
    • è del tutto legale scrivere </html>lì
    • non legale è la sottostringa </textareaper ovvi motivi
      • sfuggire a questo caso speciale con </textareao simili
    • &thing; ha bisogno di fuggire: &thing;
  • elementi estranei
    • elementi da spazi dei nomi MathML e SVG
    • almeno SVG consente nuovamente l'incorporamento di HTML ...
    • e CDATA è consentito lì, quindi sembra avere potenziale
• con sintassi XML
  • coperto dalla risposta di Konrad

Nota: >non è mai necessario scappare. Nemmeno in elementi normali.

Se il tuo obiettivo è mostrare un pezzo di codice che stai eseguendo altrove nella stessa pagina, puoi usare textContent (è pure-js e ben supportato: 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;

Per ottenere la formattazione multilinea nel risultato, devi impostare lo stile CSS "white-space: pre;" sul div target e scrivere le righe singolarmente usando "\ r \ n" alla fine di ciascuna.

Ecco una demo: https://jsfiddle.net/wphps3od/

Questo metodo presenta un vantaggio rispetto all'utilizzo di textarea: il codice non verrà riformattato come in una textarea. (Cose come  vengono rimosse interamente in una textarea)

In definitiva la risposta migliore (anche se fastidiosa) è "sfuggire al testo".

Ci sono tuttavia molti editor di testo - o anche mini utility stand-alone - che possono farlo automaticamente. Quindi non dovresti mai scappare manualmente se non vuoi (A meno che non sia un mix di codice escape e non escape ...)

La ricerca rapida di Google mi mostra questo, ad esempio: http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

<textarea ><?php echo htmlentities($page_html); ?></textarea>

funziona bene per me ..

"tenendo presente il Alexander'ssuggerimento, ecco perché penso che questo sia un buon approccio"

se proviamo semplicemente <textarea>, potrebbe non funzionare sempre poiché potrebbero esserci dei textareatag di chiusura che potrebbero chiudere erroneamente il tag principale e visualizzare il resto del codice HTML sul documento principale, il che sembrerebbe imbarazzante.

l'utilizzo htmlentitiesconverte tutti i caratteri applicabili come < >entità HTML che elimina qualsiasi possibilità di perdite.

Forse ci sono vantaggi o carenze in questo approccio o un modo migliore per ottenere gli stessi risultati, in tal caso, per favore, commenta come mi piacerebbe imparare da loro :)

È possibile utilizzare un linguaggio lato server come PHP per inserire testo non elaborato:

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

quindi scaricare il valore di $strhtmlencoded:

<div style="white-space: pre">
  <?php echo htmlentities($str); ?>
</div>

Questo è un trucco semplice e l'ho provato in Safari e 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>

Mostrerà così:

Puoi vederlo dal vivo qui

In realtà non v'è un modo per farlo. Ha un limite (uno), ma è standard al 100%, non deprecato (come xmp) e funziona.

Ed è banale. Ecco qui:

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

Per favore, lasciami spiegare. Prima di tutto, il normale commento HTML fa il lavoro, per impedire che l'intero blocco venga interpretato. Puoi facilmente aggiungere qualsiasi tag, tutti verranno ignorati. Ignorato dall'interpretazione, ma ancora disponibile tramiteinnerHTML ! Quindi ciò che resta è ottenere i contenuti e filtrare i token di commento precedenti e finali.

Tranne (ricordate - la limitazione) non è possibile inserire commenti HTML all'interno, poiché (almeno nel mio Chrome) l'annidamento di essi non è supportato e il primo '->' terminerà lo spettacolo.

Bene, è una brutta piccola limitazione, ma in alcuni casi non è affatto un problema, se il tuo testo è privo di commenti HTML. Ed è più facile sfuggire a un costrutto, poi a un sacco di essi.

Ora, cos'è quella strana LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJostringa? È una stringa casuale, come un hash, che è improbabile che venga utilizzata nel blocco e utilizzata per? Ecco il contesto, perché l' ho usato. Nel mio caso, ho preso il contenuto di un DIV, quindi l'ho elaborato con il markdown Showdown e quindi l'output assegnato in un altro div. L'idea era di scrivere markdown in linea nel file HTML e aprirlo in un browser e si sarebbe trasformato al volo al volo. Quindi, nel mio caso, <!--si è trasformato in <p><!--</p>, il commento è sfuggito correttamente. Funzionava, ma inquinava lo schermo. Quindi, per rimuoverlo facilmente con regex, è stata utilizzata la stringa casuale. Ecco il codice:

    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 = '';

E funziona

Se qualcuno è interessato, questo articolo è scritto usando questa tecnica. Sentiti libero di scaricare e guarda all'interno del file HTML.

Dipende da cosa lo stai usando. È l'input dell'utente? Quindi usa <textarea>e scappa da tutto.Nel mio caso, e probabilmente è anche il tuo caso, ho semplicemente usato i commenti e fa il lavoro.

Se non usi markdown e vuoi semplicemente ottenerlo com'è da un tag, allora è ancora più semplice:

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

e codice JavaScript per ottenerlo:

    var src = document.getElementById("mydoc-src");
    var YOUR_CODE = src.innerHTML.replace(/(<!--|-->)/g, "");

Ci sono alcuni modi per sfuggire a tutto in HTML, nessuno dei quali è carino.

Oppure potresti inserire un file iframeche carica un semplice vecchio file di testo.

Questo è di gran lunga il metodo migliore per la maggior parte delle situazioni:

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

Avrei votato la prima persona che l'ha suggerito, ma non ho reputazione. Mi sono sentito in dovere di dire qualcosa per il bene delle persone che cercavano di trovare risposte su Internet.

Ecco come l'ho fatto:

$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

restituirà l'Html con escape

Puoi provare:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

Potrebbe non funzionare in ogni situazione, ma posizionando i frammenti di codice all'interno di un textareali verranno visualizzati come codice.

Puoi dare uno stile alla textarea con CSS se non vuoi che assomigli ad una textarea reale.

Questo è un po 'un trucco, ma possiamo usare qualcosa come:

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>

Con quel CSS, il browser mostrerà gli script all'interno del corpo. Non tenterà di eseguire questo script, poiché ha un tipo sconosciuto text/html. Non è necessario sfuggire a caratteri speciali all'interno di a <script>, a meno che non si desideri includere una chiusura</script> tag di .

Sto usando qualcosa del genere per visualizzare JavaScript eseguibile nel corpo della pagina, per una sorta di "programmazione letterata".

Ci sono altre informazioni in questa domanda Quando dovrebbero essere visibili i tag e perché possono? .

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

Una combinazione di una coppia risponde che lavora insieme qui:

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>