Javascript - Coloration syntaxique dans vos pages web

Si vous avez un site web contenant des exemples de code (php, javascript, C#, Delphi, Python...), il peut être intéressant d'avoir une coloration syntaxique.

C'est parfois pénible à réaliser, mais il existe une librairie Javascript qui permet de colorer automatiquement votre code C#, Delphi, Javascript, php, Python, Sql, VB, SQL et XML: dp.SyntaxHighlighter

C'est bien fait, léger, efficace, et en plus ça ne pose pas de problèmes sur les machines qui ne possèdent pas Javascript.

Homepage:
http://code.google.com/p/syntaxhighlighter/

Exemple:




Voici comment la mettre en place:

1)
Copiez SyntaxHighlighter.css et tous les fichiers .js dans le même répertoire que votre page.


2)
Inclure la feuillle de style fournie dans le head de votre page:

<link type="text/css" rel="stylesheet" href="SyntaxHighlighter.css">

3)
Ajouter le code Javascript suivant à la fin de votre page:

<script language="JavaScript" src="shCore.js" type="text/javascript"></script>
<script language="JavaScript" src="shBrushPython.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">dp.SyntaxHighlighter.HighlightAll('code');</script>

(Là on a inclus le Javascript pour le langage Python. A vous d'inclure celui du langage qui vous intéresse parmi ceux disponibles.)


4)
Placez votre code à colorer dans un <textarea>.
Par exemple:

<textarea name="code" class="python">
class client:

    def __init__(self,number,name):
        self.number = number  # Client number
        self.name = name      # Full client name
        
    def __repr__(self):
        return '<client id="%s" name="%s">' % (self.number, self.name)        
</textarea>

name="code" sert à indiquer que ce bloc de code devra être coloré.
class="Python" indique quel langage utiliser.



Vous avez la possibilité d'utiliser des options, telles que:

nogutter : ne pas afficher les numéros de ligne.
nocontrols: retirer la barre "view plain | print | copy to clipborard"
collapse: masquer le code (cliquer pour afficher le code)
firstline[n]: indique le numéro de la première ligne (permet de changer la numérotation, pratique pour des extraits de sources)


Les options s'ajoutent à la class, par exemple:
<textarea name="code" class="python:nogutter:nocontrols">

Vous pouvez facilement customiser les couleurs de la coloration en modifiant la feuille de style SyntaxHighlighter.css


Une autre alternative, si votre site est en PHP, est d'utiliser l'excellentissime GesHI, aussi très simple et efficace http://qbnz.com/highlighter/. Il possède, par défaut, plusieurs dizaines de langages et est extensible presqu'à l'infini.

Voir aussi

• Afficher facilement le code php/xhtml de vos pages

Ce document intitulé « Javascript - Coloration syntaxique dans vos pages web » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.