Afficher le code HTML en HTML

Question

Existe-t-il un moyen d'afficher des extraits de code HTML sur une page Web sans avoir à remplacer chaque <avec < et> avec > ?

En d'autres termes, existe-t-il une balise qui indique simplement "Ne restituez pas le code HTML tant que vous n'avez pas appuyé sur la balise de fermeture"?

Answer 1

La méthode éprouvée pour le HTML:

1. Remplacer l' & de caractère avec &
2. Remplacer l' < de caractère avec <
3. Remplacer l' > de caractère avec >
4. Éventuellement entourer votre exemple de code HTML avec <pre> et/ou <code> tags.

Answer 2

exemple 1:

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

exemple 2:

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

exemple 3: (Si vous êtes réellement ", citant" un bloc de code, puis le balisage)

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

nice CSS, exemple:

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

La coloration syntaxique de code (Pour les pro):

arcs-en-ciel (très Parfait)

embellir

syntaxhighlighter

mettre en évidence

JSHighlighter

---

les meilleurs liens pour vous:

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/

Comment mettre le code source en HTML?

Answer 3

Vous pouvez utiliser une section CDATA:

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

Mais cela ne fonctionne qu'en XML (et donc en XHTML, mais tous les navigateurs ne le prennent pas en charge), pas en HTML.

En HTML, la seule solution garantie pour fonctionner partout est d'échapper au code ( < et & en < et & , respectivement) manuellement.

Answer 4

Déconseillé , mais fonctionne dans FF3 et IE8.

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

Conseillé:

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

Answer 5

J'ai utilisé <xmp> comme ceci: http://jsfiddle.net/barnameha/hF985/1/