Idee su come visualizzare/presentare tag HTML su una pagina Web

C'è un modo per scrivere HTML su una pagina Web, ma renderlo visualizzato come testo?Idee su come visualizzare/presentare tag HTML su una pagina Web

Lasciatemi spiegare: Voglio creare una pagina Web con una discussione sull'HTML. Quindi ci saranno sezioni come

<div> 
    <p> 
     <span>Hello world</span> 
    </p> 
</div>

vorrei che per formattata correttamente con indentazione, e forse anche avere le modifiche in uno schema di colore diverso.

Sono pienamente consapevole che potrei scrivere lo stile per questo, ma sicuramente qualcuno ha già scritto e reso disponibile un foglio di stile, un mixino LESS o forse un plugin jQuery che riconosce e formatta per me?

AGGIORNAMENTO: Solo per rendere le persone consapevoli, mi rendo conto che devo codificare in HTML i tag (& lt e & gt;). Ma questo non aiuta con la formattazione/presentazione, ed è la formattazione/presentazione che sto cercando aiuto.

fonte

2011-12-09 awj

> = > <= < o PHP: 'echo htmlspecialchars ('tuo html qui');' – Yoshi

e utilizzare

per il rientro – ptriek

Stai cercando SyntaxHighlighter. Vedere demo page here

fonte

2011-12-09 09:27:34 robasta

È necessario convertire < e> a HTML entities.

&lt;div&gt; 
    &lt;p&gt; 
     &lt;span&gt;Hello world&lt;/span&gt; 
    &lt;/p&gt; 
&lt;/div&gt;

Per quanto riguarda la codifica a colori, guardare in Google Code Prettify. Ecco alcuni examples.

fonte

2011-12-09 09:25:47 bookcasey

Come sopra ho è sempre una buona idea di utilizzare i caratteri HTML per visualizzare la dimostrazione di HTML in modo sempre utilizzare **<** per < e **>** per < o se si vuole essere un po 'più utile al tuo utente di destinazione quindi potresti usare un evidenziatore di codice come Code Highlighter

Spero che questo aiuti!

fonte

2011-12-09 09:28:06

Per quanto riguarda i personaggi in fuga, che cosa avete bisogno di fuggire sono “<” (come <) e “&” (come &). Se utilizzi strumenti automatici, assicurati che gestiscano questi caratteri.

Per preservare la formattazione (interruzioni di riga e spaziatura), è possibile utilizzare il markup <pre>. È consigliabile utilizzarlo in modo che la prima riga inizi immediatamente (sulla stessa riga) dopo il tag <pre> e che l'ultima riga sia immediatamente (senza interruzione di riga) seguita dal tag di chiusura </pre>. In caso contrario alcuni browser potrebbero visualizzare linee vuote supplementari.

Il markup <pre> implica un font monospazio dipendente dal sistema per impostazione predefinita. Questo può naturalmente essere cambiato in CSS. Il markup implica anche la riduzione della dimensione del font sulla maggior parte dei browser, presumibilmente per far fronte alle proprietà dei font monospace; potresti quindi voler impostare la dimensione del carattere su un valore (forse 100%) che corrisponda al tuo design.

In alternativa, è possibile avvolgere il codice all'interno di qualsiasi elemento di blocco (come <div>) e impostare white-space: pre in CSS. Ciò significa che la formattazione è preservata ma la dimensione e il carattere del font sono gli stessi del testo circostante (a meno che non lo si imposti esplicitamente).

È inoltre possibile utilizzare il markup <code> per indicare il contenuto come codice del computer.Inoltre, imposta il font su monospace e dimensioni ridotte, ma è altrimenti puramente logico. Se si desidera indicare la lingua utilizzata, class = language-html sarebbe il modo suggerito nelle bozze HTML5. Questo non ha impatto diretto in quanto tale; semplifica lo stile dei campioni di codice HTML in modo coerente e li riconosce nell'elaborazione JavaScript, se necessario.

Esempio:

<pre><code class=language-html>&lt;div> 
    &lt;p> 
     &lt;span>Hello world&lt;/span> 
    &lt;/p> 
    &lt;/div></code></pre>

fonte

2011-12-09 11:11:49

Utilizzare la <xmp> tag invece di <pre>.

E.g.

<xmp> 

<html> 
<body>This is my html inside html.</body> 
</html> 

</xmp>

fonte

2013-06-01 02:14:42 fuzzyanalysis

'davvero lavorato per me .. grande grazie – Chella

come vedete tag sono in colore rosso e testo in nero come si fa ..? –

Si noti che 'xmp' è obsoleto ed è stato rimosso da HTML5: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp –

Idee su come visualizzare/presentare tag HTML su una pagina Web

risposta

Problemi correlati