Coloration syntaxique de code dans une page HTML
Par MD3804-GANDI le mardi 10 novembre 2009, 10:20 - Divers - Lien permanent
En regardant les extraits de code de mon blog, je me suis dit que cela
serait plus fun, si j'y mettait de la coloration syntaxique.
Ne voulant pas réinventer la roue, je me suis mis à la recherche d'une solution
"out of the box", et je suis tombé sur syntaxhighlighter qui me semble vraiment
utile au vue du nombre de langages supportés : Bash, Cpp, CSharp, Css, Delphi,
Diff, Groovy, Java, JScript, Php, Plain, Python, Ruby, Perl, Scala, Sql, Vb,
Xml, AS3, JavaFX, PowerShell, Erlang, ColdFusion.
Voici comment l'utiliser : Vous devez importer les fichiers javascript selon les langages supportés ansi que les css qui vont bien
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"/>Il suffit ensuite de déclarer un balise avec <pre></pre> en spécifiant le language contenu entre les deux balises via la class (pas très beau mais permet d'être W3C compliant). Exemple :
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" id="shTheme"/>
<script language="javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<script language="javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js"></script><script type="text/javascript">SyntaxHighlighter.all(); </script>
<pre class="brush : js">
/**
* SyntaxHighlighter
*/
function foo(){
// it works!
}
</pre>
Vous pouvez ajouter tout un tas d'options , comme le fait de ne pas rendre les URLs clicables, ou de numéroter les lignes.