{"id":652,"date":"2009-09-15T19:28:21","date_gmt":"2009-09-15T17:28:21","guid":{"rendered":"http:\/\/linux.leunen.com\/?p=652"},"modified":"2009-09-15T19:28:21","modified_gmt":"2009-09-15T17:28:21","slug":"colorisation-syntaxique-avec-pygments","status":"publish","type":"post","link":"https:\/\/www.leunen.com\/linux\/2009\/09\/colorisation-syntaxique-avec-pygments\/","title":{"rendered":"Colorisation syntaxique avec pygments"},"content":{"rendered":"

Elle consiste \u00e0 donner \u00e0 chaque \u00e9l\u00e9ment d’un texte un style particulier. En programmation, cela consiste \u00e0 donner une couleur et un style (gras, italique…) \u00e0 chaque \u00e9l\u00e9ment constituant le code source. La colorisation syntaxique rend le code plus lisible donc plus facilement compr\u00e9hensible.<\/p>\n

La plupart des \u00e9diteurs de texte le font automatiquement mais si vous devez formater le texte vous m\u00eame pour l’afficher dans un wiki, une page web ou un blog, c’est une autre paire de manche.
\nJ’utilise par exemple deux scripts qui me permettent de faire la colorisation syntaxique de code C++<\/em> ou python<\/em> et me donnent un fichier html<\/em> que je peux inclure dans une page web. Le probl\u00e8me est que si je veux documenter du code PHP<\/em>, javascript<\/em> ou des requ\u00e8tes SQL<\/em> et faire la colorisation syntaxique moi-m\u00eame, il faudra que je r\u00e9\u00e9crive un nouveau script pour chaque langage. Heureusement pour moi, j’ai d\u00e9couvert une application \u00e9crite en python et trouvable sur http:\/\/pygments.org<\/a>.<\/p>\n

Pygments<\/em> permet la colorisation syntaxique d’un tr\u00e8s grand nombre de langages dont par exemple bash, C,C++, C#, Lisp, Lua, Delphi, PHP, Perl Python, Ruby, Tcl, Java, Javascript … Et je n’ai mis ici que les langages les plus connus. Il ye en a plein d’autres. Pygments<\/em> permet aussi la colorisation syntaxique de fichiers de configuration, ini, css, html, sql, xml, latex,… De surcro\u00eet, on peut choisir le format de sortie: html, latex, rtf…<\/p>\n

Pygments<\/em> peut \u00eatre utilis\u00e9 en ligne de commande ou en tant que librairie dans un projet.<\/p>\n

Pour l’installer, downloadez le fichier Pygments-1.1.tar.gz<\/em> depuis http:\/\/pypi.python.org\/pypi\/Pygments<\/a>
\nEnsuite tapez les commandes suivantes dans un terminal pour extraire de l’archive les fichiers et ex\u00e9cuter le fichier d’installation.<\/p>\n

\r\n$ tar -zxvf Pygments-1.1.tar.gz\r\n$ cd Pygments-1.1\r\n$ sudo python setup.py install\r\n<\/pre>\n
Exemple d’utilisation en ligne de commande pour g\u00e9n\u00e9rer du code html:<\/p>\n
Disons que nous voulons coloriser le bout de code python<\/em> suivant:<\/p>\n
\r\n# Returns the factorial of a number\r\ndef factorial(x):\r\n    if x < 0:\r\n        raise ValueError(\"Factorial is only defined for x >= 0\")\r\n    y = 1\r\n    while x >= 2:\r\n        y *= x\r\n        x -= 1\r\n    return y\r\n<\/pre>\n
Ce bout de code, pla\u00e7ons-le dans un fichier appel\u00e9 test.py<\/em> et tapons la ligne suivante dans notre terminal:<\/p>\n
\r\n$ pygmentize -f html -l python -o test.html test.py\r\n<\/pre>\n
-l<\/em> choix du lexer, c’est \u00e0 dire le module charg\u00e9 de parser le code donn\u00e9 dans le langage sp\u00e9cifi\u00e9 et le s\u00e9parer en ses composants (keywords, comments, cha\u00eenes de caract\u00e8res…)<\/p>\n
-f<\/em> choix du formateur, c’est \u00e0 dire le format sous lequel vous d\u00e9sirez le fichier de sortie (html, latex, rtf…).<\/p>\n
Le r\u00e9sultat obtenu est le fichier html test.html<\/em> ci-dessous:<\/p>\n
\r\n<div class=\"highlight\"><pre><span class=\"c\"># Returns the factorial of a number<\/span>\r\n<span class=\"k\">def<\/span> <span class=\"nf\">factorial<\/span><span class=\"p\">(<\/span><span class=\"n\">x<\/span><span class=\"p\">):<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"n\">x<\/span> <span class=\"o\"><<\/span> <span class=\"mf\">0<\/span><span class=\"p\">:<\/span>\r\n        <span class=\"k\">raise<\/span> <span class=\"ne\">ValueError<\/span><span class=\"p\">(<\/span><span class=\"s\">"Factorial is only defined for x >= 0"<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"n\">y<\/span> <span class=\"o\">=<\/span> <span class=\"mf\">1<\/span>\r\n    <span class=\"k\">while<\/span> <span class=\"n\">x<\/span> <span class=\"o\">>=<\/span> <span class=\"mf\">2<\/span><span class=\"p\">:<\/span>\r\n        <span class=\"n\">y<\/span> <span class=\"o\">*=<\/span> <span class=\"n\">x<\/span>\r\n        <span class=\"n\">x<\/span> <span class=\"o\">-=<\/span> <span class=\"mf\">1<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"n\">y<\/span>\r\n<\/pre><\/div>\r\n<\/pre>\n
Vous remarquerez que chaque constituant du code a son propre style avec sa classe propre. A vous de d\u00e9terminer ce style en donnant au navigateur une feuille de style (css<\/em>) compatible. Vous pouvez vous aider en utilisant la commande suivante qui liste les diff\u00e9rents styles utilis\u00e9s sous forme de css:<\/p>\n
\r\n$ pygmentize -f html -S colorful \r\n\r\n.hll { background-color: #ffffcc }\r\n.c { color: #808080 } \/* Comment *\/\r\n.err { color: #F00000; background-color: #F0A0A0 } \/* Error *\/\r\n.k { color: #008000; font-weight: bold } \/* Keyword *\/\r\n.o { color: #303030 } \/* Operator *\/\r\n.cm { color: #808080 } \/* Comment.Multiline *\/\r\n.cp { color: #507090 } \/* Comment.Preproc *\/\r\n.c1 { color: #808080 } \/* Comment.Single *\/\r\n.cs { color: #cc0000; font-weight: bold } \/* Comment.Special *\/\r\n.gd { color: #A00000 } \/* Generic.Deleted *\/\r\n.ge { font-style: italic } \/* Generic.Emph *\/\r\n.gr { color: #FF0000 } \/* Generic.Error *\/\r\n.gh { color: #000080; font-weight: bold } \/* Generic.Heading *\/\r\n.gi { color: #00A000 } \/* Generic.Inserted *\/\r\n.go { color: #808080 } \/* Generic.Output *\/\r\n.gp { color: #c65d09; font-weight: bold } \/* Generic.Prompt *\/\r\n.gs { font-weight: bold } \/* Generic.Strong *\/\r\n.gu { color: #800080; font-weight: bold } \/* Generic.Subheading *\/\r\n.gt { color: #0040D0 } \/* Generic.Traceback *\/\r\n.kc { color: #008000; font-weight: bold } \/* Keyword.Constant *\/\r\n.kd { color: #008000; font-weight: bold } \/* Keyword.Declaration *\/\r\n.kn { color: #008000; font-weight: bold } \/* Keyword.Namespace *\/\r\n.kp { color: #003080; font-weight: bold } \/* Keyword.Pseudo *\/\r\n.kr { color: #008000; font-weight: bold } \/* Keyword.Reserved *\/\r\n.kt { color: #303090; font-weight: bold } \/* Keyword.Type *\/\r\n.m { color: #6000E0; font-weight: bold } \/* Literal.Number *\/\r\n.s { background-color: #fff0f0 } \/* Literal.String *\/\r\n.na { color: #0000C0 } \/* Name.Attribute *\/\r\n.nb { color: #007020 } \/* Name.Builtin *\/\r\n.nc { color: #B00060; font-weight: bold } \/* Name.Class *\/\r\n.no { color: #003060; font-weight: bold } \/* Name.Constant *\/\r\n.nd { color: #505050; font-weight: bold } \/* Name.Decorator *\/\r\n.ni { color: #800000; font-weight: bold } \/* Name.Entity *\/\r\n.ne { color: #F00000; font-weight: bold } \/* Name.Exception *\/\r\n.nf { color: #0060B0; font-weight: bold } \/* Name.Function *\/\r\n.nl { color: #907000; font-weight: bold } \/* Name.Label *\/\r\n.nn { color: #0e84b5; font-weight: bold } \/* Name.Namespace *\/\r\n.nt { color: #007000 } \/* Name.Tag *\/\r\n.nv { color: #906030 } \/* Name.Variable *\/\r\n.ow { color: #000000; font-weight: bold } \/* Operator.Word *\/\r\n.w { color: #bbbbbb } \/* Text.Whitespace *\/\r\n.mf { color: #6000E0; font-weight: bold } \/* Literal.Number.Float *\/\r\n.mh { color: #005080; font-weight: bold } \/* Literal.Number.Hex *\/\r\n.mi { color: #0000D0; font-weight: bold } \/* Literal.Number.Integer *\/\r\n.mo { color: #4000E0; font-weight: bold } \/* Literal.Number.Oct *\/\r\n.sb { background-color: #fff0f0 } \/* Literal.String.Backtick *\/\r\n.sc { color: #0040D0 } \/* Literal.String.Char *\/\r\n.sd { color: #D04020 } \/* Literal.String.Doc *\/\r\n.s2 { background-color: #fff0f0 } $ pygmentize -O full -o test.html test.py\/* Literal.String.Double *\/\r\n.se { color: #606060; font-weight: bold; background-color: #fff0f0 } \/* Literal.String.Escape *\/\r\n.sh { background-color: #fff0f0 } \/* Literal.String.Heredoc *\/\r\n.si { background-color: #e0e0e0 } \/* Literal.String.Interpol *\/\r\n.sx { color: #D02000; background-color: #fff0f0 } \/* Literal.String.Other *\/\r\n.sr { color: #000000; background-color: #fff0ff } \/* Literal.String.Regex *\/\r\n.s1 { background-color: #fff0f0 } \/* Literal.String.Single *\/\r\n.ss { color: #A06000 } \/* Literal.String.Symbol *\/\r\n.bp { color: #007020 } \/* Name.Builtin.Pseudo *\/\r\n.vc { color: #306090 } \/* Name.Variable.Class *\/\r\n.vg { color: #d07000; font-weight: bold } \/* Name.Variable.Global *\/\r\n.vi { color: #3030B0 } \/* Name.Variable.Instance *\/\r\n.il { color: #0000D0; font-weight: bold } \/* Literal.Number.Integer.Long *\/\r\n<\/pre>\n
Il vous est aussi possible d’ajouter des num\u00e9ros de lignes. Ceci cr\u00e9e en fait un tableau html dont la premi\u00e8re colonne est le num\u00e9ro de la ligne:<\/p>\n
\r\n$ pygmentize -f html -l python -O style=colorful,linenos=1 -o test.html test.py\r\n<\/pre>\n
Si vous pr\u00e9f\u00e9rez un fichier html complet repr\u00e9sentant une page compl\u00e8te avec ent\u00eate et style utilisable directement avec le navigateur:<\/p>\n
\r\n$ pygmentize -O full -o test.html test.py\r\n<\/pre>\n
Le r\u00e9sultat est ci-dessous. Notez l’ent\u00eate, les CSS<\/em> inclus dans le fichier et finalement votre code source format\u00e9:<\/p>\n
\r\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01\/\/EN\"\r\n   \"http:\/\/www.w3.org\/TR\/html4\/strict.dtd\">\r\n\r\n<html>\r\n<head>\r\n  <title><\/title>\r\n  <meta http-equiv=\"content-type\" content=\"text\/html; charset=latin1\">\r\n  <style type=\"text\/css\">\r\ntd.linenos { background-color: #f0f0f0; padding-right: 10px; }\r\nspan.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }\r\npre { line-height: 125%; }\r\nbody .hll { background-color: #ffffcc }\r\nbody  { background: #f8f8f8; }\r\nbody .c { color: #408080; font-style: italic } \/* Comment *\/\r\nbody .err { border: 1px solid #FF0000 } \/* Error *\/\r\nbody .k { color: #008000; font-weight: bold } \/* Keyword *\/\r\nbody .o { color: #666666 } \/* Operator *\/\r\nbody .cm { color: #408080; font-style: italic } \/* Comment.Multiline *\/\r\nbody .cp { color: #BC7A00 } \/* Comment.Preproc *\/\r\nbody .c1 { color: #408080; font-style: italic } \/* Comment.Single *\/\r\nbody .cs { color: #408080; font-style: italic } \/* Comment.Special *\/\r\nbody .gd { color: #A00000 } \/* Generic.Deleted *\/\r\nbody .ge { font-style: italic } \/* Generic.Emph *\/\r\nbody .gr { color: #FF0000 } \/* Generic.Error *\/\r\nbody .gh { color: #000080; font-weight: bold } \/* Generic.Heading *\/\r\nbody .gi { color: #00A000 } \/* Generic.Inserted *\/\r\nbody .go { color: #808080 } \/* Generic.Output *\/\r\nbody .gp { color: #000080; font-weight: bold } \/* Generic.Prompt *\/\r\nbody .gs { font-weight: bold } \/* Generic.Strong *\/\r\nbody .gu { color: #800080; font-weight: bold } \/* Generic.Subheading *\/\r\nbody .gt { color: #0040D0 } \/* Generic.Traceback *\/\r\nbody .kc { color: #008000; font-weight: bold } \/* Keyword.Constant *\/\r\nbody .kd { color: #008000; font-weight: bold } \/* Keyword.Declaration *\/\r\nbody .kn { color: #008000; font-weight: bold } \/* Keyword.Namespace *\/\r\nbody .kp { color: #008000 } \/* Keyword.Pseudo *\/\r\nbody .kr { color: #008000; font-weight: bold } \/* Keyword.Reserved *\/\r\nbody .kt { color: #B00040 } \/* Keyword.Type *\/\r\nbody .m { color: #666666 } \/* Literal.Number *\/\r\nbody .s { color: #BA2121 } \/* Literal.String *\/\r\nbody .na { color: #7D9029 } \/* Name.Attribute *\/\r\nbody .nb { color: #008000 } \/* Name.Builtin *\/\r\nbody .nc { color: #0000FF; font-weight: bold } \/* Name.Class *\/\r\nbody .no { color: #880000 } \/* Name.Constant *\/\r\nbody .nd { color: #AA22FF } \/* Name.Decorator *\/\r\nbody .ni { color: #999999; font-weight: bold } \/* Name.Entity *\/\r\nbody .ne { color: #D2413A; font-weight: bold } \/* Name.Exception *\/\r\nbody .nf { color: #0000FF } \/* Name.Function *\/\r\nbody .nl { color: #A0A000 } \/* Name.Label *\/\r\nbody .nn { color: #0000FF; font-weight: bold } \/* Name.Namespace *\/\r\nbody .nt { color: #008000; font-weight: bold } \/* Name.Tag *\/\r\nbody .nv { color: #19177C } \/* Name.Variable *\/\r\nbody .ow { color: #AA22FF; font-weight: bold } \/* Operator.Word *\/\r\nbody .w { color: #bbbbbb } \/* Text.Whitespace *\/\r\nbody .mf { color: #666666 } \/* Literal.Number.Float *\/\r\nbody .mh { color: #666666 } \/* Literal.Number.Hex *\/\r\nbody .mi { color: #666666 } \/* Literal.Number.Integer *\/\r\nbody .mo { color: #666666 } \/* Literal.Number.Oct *\/\r\nbody .sb { color: #BA2121 } \/* Literal.String.Backtick *\/\r\nbody .sc { color: #BA2121 } \/* Literal.String.Char *\/\r\nbody .sd { color: #BA2121; font-style: italic } \/* Literal.String.Doc *\/\r\nbody .s2 { color: #BA2121 } \/* Literal.String.Double *\/\r\nbody .se { color: #BB6622; font-weight: bold } \/* Literal.String.Escape *\/\r\nbody .sh { color: #BA2121 } \/* Literal.String.Heredoc *\/\r\nbody .si { color: #BB6688; font-weight: bold } \/* Literal.String.Interpol *\/\r\nbody .sx { Colorisation syntaxique avec pygmentscolor: #008000 } \/* Literal.String.Other *\/\r\nbody .sr { color: #BB6688 } \/* Literal.String.Regex *\/\r\nbody .s1 { color: #BA2121 } \/* Literal.String.Single *\/\r\nbody .ss { color: #19177C } \/* Literal.String.Symbol *\/\r\nbody .bp { color: #008000 } \/* Name.Builtin.Pseudo *\/\r\nbody .vc { color: #19177C } \/* Name.Variable.Class *\/\r\nbody .vg { color: #19177C } \/* Name.Variable.Global *\/\r\nbody .vi { color: #19177C } \/* Name.Variable.Instance *\/\r\nbody .il { color: #666666 } \/* Literal.Number.Integer.Long *\/\r\n\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n<h2><\/h2>\r\n\r\n<div class=\"highlight\"><pre><span class=\"c\"># Returns the factorial of a number<\/span>\r\n<span class=\"k\">def<\/span> <span class=\"nf\">factorial<\/span><span class=\"p\">(<\/span><span class=\"n\">x<\/span><span class=\"p\">):<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"n\">x<\/span> <span class=\"o\"><<\/span> <span class=\"mf\">0<\/span><span class=\"p\">:<\/span>\r\n        <span class=\"k\">raise<\/span> <span class=\"ne\">ValueError<\/span><span class=\"p\">(<\/span><span class=\"s\">"Factorial is only defined for x >= 0"<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"n\">y<\/span> <span class=\"o\">=<\/span> <span class=\"mf\">1<\/span>\r\n    <span class=\"k\">while<\/span> <span class=\"n\">x<\/span> <span class=\"o\">>=<\/span> <span class=\"mf\">2<\/span><span class=\"p\">:<\/span>\r\n        <span class=\"n\">y<\/span> <span class=\"o\">*=<\/span> <span class=\"n\">x<\/span>\r\n        <span class=\"n\">x<\/span> <span class=\"o\">-=<\/span> <span class=\"mf\">1<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"n\">y<\/span>\r\n<\/pre><\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Et vous pouvez voir ici<\/a> le r\u00e9sultat de tous vos efforts.<\/p>\n","protected":false},"excerpt":{"rendered":"
Elle consiste \u00e0 donner \u00e0 chaque \u00e9l\u00e9ment d’un texte un style particulier. En programmation, cela consiste \u00e0 donner une couleur et un style (gras, italique…) \u00e0 chaque \u00e9l\u00e9ment constituant le code source. La colorisation syntaxique rend le code plus lisible donc plus facilement compr\u00e9hensible. La plupart des \u00e9diteurs de texte le font automatiquement mais si […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,15,5],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.leunen.com\/linux\/wp-json\/wp\/v2\/posts\/652"}],"collection":[{"href":"https:\/\/www.leunen.com\/linux\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.leunen.com\/linux\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.leunen.com\/linux\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.leunen.com\/linux\/wp-json\/wp\/v2\/comments?post=652"}],"version-history":[{"count":10,"href":"https:\/\/www.leunen.com\/linux\/wp-json\/wp\/v2\/posts\/652\/revisions"}],"predecessor-version":[{"id":663,"href":"https:\/\/www.leunen.com\/linux\/wp-json\/wp\/v2\/posts\/652\/revisions\/663"}],"wp:attachment":[{"href":"https:\/\/www.leunen.com\/linux\/wp-json\/wp\/v2\/media?parent=652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.leunen.com\/linux\/wp-json\/wp\/v2\/categories?post=652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.leunen.com\/linux\/wp-json\/wp\/v2\/tags?post=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}