Publié le par Sandrine Martinez

Librairie de coloration syntaxique

J’ai fait une petite recherche pour pouvoir trouver une librairie qui colore la syntaxe des différents langage pour la création d’article qui présente du code.

Librairies

J’ai trouvé deux librairies :

Finalement j’ai opté pour Prism. Elle semble plus facile d’utilisation et c’est cette dernière que je vais vous présenter.

Utilisation de Prism

En allant sur la page download nous pouvons sélectionner toutes les options dont nous avons besoin :

  • Version minifiée ou pas (juste pour le js le css n’est pas minifié)
  • 8 thèmes de couleurs
  • Une bonne panoplie de languages
  • Différents plugins

Une fois votre choix effectuer télécharger le fichier prism.js et le fichier prism.css qui sera généré. Les installer dans votre environnement enfin de faire appel à eux dans vos pages.

<!DOCTYPE html>
<html>
<head>
    // Appel de la feuille de style prism.css
    <link href="prism.css" rel="stylesheet" />
</head>
<body>
    // Balise pour coloration syntaxique du code
    <pre class="language-markup">
        <code>
            <!DOCTYPE html>
            <html>
                <head>
                ...
        </code>
    </pre>
    // Appel du script prism.js en fin de fichier
    <script src="prism.js"></script>
</body>
</html>

Pour appeler la mise en forme du langage souhaité ajouter la class « language- » suivi du nom du langage.

Exemples :

  • Pour le html et le xml cela donnera « language-markup »
  • Pour le css : « language-css »
  • Pour le JavaScript : « language-javascript »
  • …

Le plugins « Line numbers »

Le  plugin « Line numbers » permet de rajouter les numéros de lignes en face du code.

Ajouter la class « line-numbers » pour qu’elles soient visibles.

This raw text
is an exemple
of the line numbers plugin

 

Il est possible de spécifier le numéro de départ.

This raw text
is an exemple
of the line numbers plugin
with start line defined at -2

Le plugin « Command line »

Le plugin « Command line » permet de simuler l’écran d’une console de commandes.

Ajouter la class « command-line » à la balise <pre>. Il est possible de définir l’utilisateur et l’hote en utilisant les attributs data-user et data-host.

Exemple avec utilisateur root :

Ajout des attributs :

  • data-user= « root »
  • data-host= « localhost »
cd /usr/local/etc
cp php.ini php.ini.bak
vi php.ini

 

Exemple sans utilisateur root :

Ajout des attributs :

  • data-user= « chris »
  • data-host= « remotehost »
pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .
drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..
-rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup
-rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy

 

Exemple pour Windows PowerShell :

Ajout de l’attribut :

  • data-prompt= « PS C:\Users\Chris> »
dir


    Directory: C:\Users\Chris


Mode                LastWriteTime     Length Name
----                -------------     ------ ----
d-r--        10/14/2015   5:06 PM            Contacts
d-r--        12/12/2015   1:47 PM            Desktop
d-r--         11/4/2015   7:59 PM            Documents
d-r--        10/14/2015   5:06 PM            Downloads
d-r--        10/14/2015   5:06 PM            Favorites
d-r--        10/14/2015   5:06 PM            Links
d-r--        10/14/2015   5:06 PM            Music
d-r--        10/14/2015   5:06 PM            Pictures
d-r--        10/14/2015   5:06 PM            Saved Games
d-r--        10/14/2015   5:06 PM            Searches
d-r--        10/14/2015   5:06 PM            Videos

Sources de l’article :