Visualizza il codice HTML in HTML

C’è un modo per mostrare frammenti di codice HTML su una pagina web senza dover sostituire ogni < con < e > con > ?

In altre parole, c’è qualche tag per non rendere HTML fino a quando non si preme il tag di chiusura ?

In HTML corretto, non c’è modo di sfuggire ai personaggi. Tuttavia, in XHTML correttamente dichiarato (che è XML e deve essere dichiarato al browser in quanto tale, in particolare non è sufficiente inserire un DOCTYPE ), è ansible utilizzare una sezione CDATA:

 < ![CDATA[Your  here]]> 

Ma funziona solo in XML, non in HTML.

In HTML, l’unica soluzione garantita per funzionare ovunque è di sfuggire manualmente al codice ( < and & as < and & rispettivamente).

Il metodo provato e vero per HTML:

  1. Sostituisci il carattere & con &
  2. Sostituisci il carattere < con <
  3. Sostituisci il carattere > con >
  4. Opzionalmente racchiudi il tuo esempio HTML con
    
    

    e / o .

miglior modo:

  // your codes ..  

vecchi campioni:

esempio 1 :

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

esempio 2 :

 
  My pre-formatted code here.  

sample 3 : (Se stai effettivamente “citando” un blocco di codice, allora il markup sarebbe)

 
  My pre-formatted "quoted" code here.  

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 syntax (per lavoro professionale):

arcobaleni (molto perfetto)

abbellire

SyntaxHighlighter

evidenziare

JSHighlighter


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?

Una sorta di metodo ingenuo per visualizzare il codice lo includerà in una textarea e aggiungerà l’attributo disabilitato in modo che non sia modificabile.

  

Spero che questo aiuti qualcuno a cercare un modo semplice per ottenere risultati.

Deprecato , ma funziona in FF3 e IE8.

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

Consigliato:

 
 code here, escape it yourself. 

ho usato

proprio così: http://jsfiddle.net/barnameha/hF985/1/

In HTML? No.

In XML / XHTML? Potresti usare un blocco CDATA .

Il tag

deprecato lo fa essenzialmente ma non fa più parte delle specifiche XHTML. Dovrebbe funzionare anche se in tutti i browser correnti.

Ecco un’altra idea, un trucco di hacking / salotto, potresti inserire il codice in una textarea in questo modo:

  

Mettendo parentesi angolari e codice come questo all’interno di un’area di testo non è valido l’HTML e causerà un comportamento indefinito in diversi browser. In Internet Explorer l’HTML viene interpretato, mentre Mozilla, Chrome e Safari non vengono interpretati.

Se vuoi che non sia modificabile e abbia un aspetto diverso, puoi facilmente modificarlo usando i CSS. L’unico problema sarebbe che i browser aggiungeranno quel piccolo handle di trascinamento nell’angolo in basso a destra per ridimensionare la finestra. In alternativa, prova a utilizzare un tag di input.

Ad esempio, il modo giusto per inserire codice nella tua area di testo è utilizzare il linguaggio lato server come questo PHP:

  

Quindi ignora l’interprete html e inserisce il testo non interpretato nella textarea in modo coerente su tutti i browser.

Oltre a questo, l’unico modo è davvero di sfuggire al codice da soli se l’HTML statico o l’utilizzo di metodi lato server come HtmlEncode () di .NET se si utilizza tale tecnologia.

È molto semplice … Usa questo codice xmp

   &lt;xmp &gt; <p>a paragraph</p> &lt;/xmp &gt;  

Il seguente link sarà utile.

http://www.freebits.co.uk/convert-html-code-to-text.html

è molto facile e amichevole.

In definitiva la risposta migliore (anche se noiosa) è “sfuggire al testo”.

Esistono 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 con escape e senza escape …)

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

Presumo:

  • vuoi scrivere HTML5 valido al 100%
  • vuoi inserire lo snippet di codice (quasi) letterale nell’HTML
    • specialmente < non dovrebbe aver bisogno di scappare

Tutte le tue opzioni sono in questo albero:

  • con syntax HTML
    • ci sono cinque tipi di elementi
    • quelli chiamati "elementi normali" (come

      )

      • non può avere un valore letterale <
      • sarebbe considerato l'inizio del prossimo tag o commento
    • elementi vuoti
      • non hanno contenuto
      • potresti mettere il tuo HTML in un attributo dati (ma questo è vero per tutti gli elementi)
      • che avrebbe bisogno di JavaScript per spostare i dati altrove
      • in attributi a doppia virgola, " e &thing; necessità di escape: " e &thing; rispettivamente
    • elementi di testo grezzi
      • e solo

      • non sono mai resi visibili
      • ma incorporare il tuo testo in Javascript potrebbe essere fattibile
      • Javascript consente stringhe multi-linea con apici inversi
      • potrebbe quindi essere inserito dynamicmente
      • uno letterale non è consentito ovunque in
    • elementi di testo non intercettabili
      • e solo
      • è un buon candidato per inserire il codice
      • è del tutto legale scrivere
      • non legale è la sottostringa per ovvi motivi
        • sfuggi a questo caso speciale con </textarea o simili

      • &thing; ha bisogno di scappare: &thing;
    • elementi estranei
      • elementi dagli spazi dei nomi MathML e SVG
      • almeno SVG consente nuovamente l'incorporamento di HTML ...
      • e CDATA è permesso lì, quindi sembra avere un potenziale
  • con syntax XML
    • coperto dalla risposta di Konrad

Nota: > non ha mai bisogno di scappare. Nemmeno in elementi normali.

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

 < ?php $str = <<     This is the title      EOD; ?> 

quindi scaricare il valore di $str htmlencoded:

 
< ?php echo htmlentities($str); ?>

Ci sono alcuni modi per sfuggire a tutto in HTML, nessuno di loro è bello.

Oppure puoi inserire un iframe che carica un semplice file di testo vecchio.

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

 
 code here, escape it yourself. 

Avrei votato la prima persona che l’ha suggerito, ma non ho reputazione. Mi sentivo in dovere di dire qualcosa anche 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 ""; 
 function escapeHTML(string) { var pre = document.createElement('pre'); var text = document.createTextNode(string); pre.appendChild(text); return pre.innerHTML; }//end escapeHTML 

restituirà l’Html sfuggito

  

funziona bene per me ..

“tenendo presente Alexander's suggerimento Alexander's , ecco perché penso che questo sia un buon approccio”

se semplicemente potrebbe non funzionare sempre poiché potrebbero esserci dei tag di textarea che potrebbero chiudere erroneamente il tag genitore e mostrare il resto del codice HTML sul documento genitore, il che risulterebbe scomodo.

l’utilizzo di htmlentities converte tutti i caratteri applicabili come <> in entity framework HTML che elimina ogni possibilità di perdite.

Ci possono essere vantaggi o carenze a questo approccio o un modo migliore per ottenere gli stessi risultati, in tal caso si prega di commentare come mi piacerebbe imparare da loro 🙂

Potrebbe non funzionare in ogni situazione, ma inserire frammenti di codice all’interno di una textarea li visualizzerà come codice.

Puoi dare uno stile alla textarea con i CSS se non vuoi che assomigli ad una vera e propria textarea.

Se il tuo objective è mostrare una porzione di codice che stai eseguendo altrove nella stessa pagina, puoi usare textContent (è pure-js e ben supportato: http://caniuse.com/#feat=textcontent )

 

hello world

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

Per ottenere una formattazione multilinea nel risultato, è necessario impostare lo stile CSS “white-space: pre;” sul div target e scrivere le righe individualmente usando “\ r \ n” alla fine di ciascuna.

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

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

Potresti provare:

 Hello! Here is some code:  <div id="hello"> </div>  
  //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 $('
').text(value).html(); } html = htmlEncode(html)

Racchiudendo il tuo codice in un div contenteditable e impostando lo white-space: pre-wrap; il rientro viene preservato, il codice viene adattato in base alla larghezza e l’altezza viene impostata automaticamente:

 
// code
.code { white-space: pre-wrap; }