Vous rédigez des articles avec des exemples de codes auxquels vous voudriez ajouter de la couleur syntaxique, voici 3 outils basés sur du Javascript pour vous aider...

La couleur syntaxique permet de mettre en surbrillance les mots-clés des langages de programmation. Cela rajoute un aspect ergonomique à la lecture de codes.
Voulant intégrer cette fonctionnalité à mon site, j'ai cherché les outils existants et je vous en expose trois :D.

1. Syntaxhighlighter

Syntaxhighlighter existe depuis 2004. Il supporte plutôt des langages de programmation destinés au Web, soit 29 langages différents. Il se configure à l'aide d'un environement NodeJS.

Voici un exemple:
Exemple Syntaxhighlighter

Avantages:

  • Modulable (On peut embarquer un ou plusieurs langages dans le .js)
  • Customisable (On peut créer ses propres thémes ou langages)
  • Numéro de ligne (Pratique !)

Inconvénients:

  • Basé sur NodeJS (N'est pas un inconvénient à proprement parler si l'on surfe sur les nouvelles vagues mais si on n'a pas NodeJS, on ne pourra pas configurer le .js à intégrer)

Intégration:

  1. Construisez votre propre package syntaxhighlighter.js en suivant cette procédure
  2. Ajoutez le fichier à l'aide de <script src="syntaxhighlighter.js" />
  3. Utilisez la balise <pre />:
<script type="text/javascript" src="syntaxhighlighter.js"></script>

<pre class="brush: js">
function foo()
{
}
</pre>

Liens:

2. Highlight.js

Hightlight.js posséde le plus grand nombre de langages (176) et beaucoup de thèmes (79). Il permet aussi la détection automatique des langages. Son utilisation est assez simple. Il est compatible NodeJS.

Voici un exemple:
Exemple highlight.js

Avantages:

  • 176 langages supportés
  • 79 thémes
  • Détection automatique des langages

Inconvénients

  • Ne peut être étendu (Il n'y a pas notion de plugins ou de possibilité d'étendre les fonctionnalités)

Intégration:

  1. Construisez votre package sur cette page ou utilisez le CDN
  2. Téléchargez le .js
  3. Téléchargez votre thème en .css ici
  4. Intégrez le CSS, JS, script de chargement et les balises <code /> à votre page:
<link rel="stylesheet" href="theme.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
...
<pre><code class="html">...</code></pre>

Liens:

3. Prism

Prism supporte 122 langages et peut être étendu à l'aide de plugins. L'intégration est assez simple et peut supporter les balises <pre /> et <code />. Il est compatible NodeJS. C'est celui-là que j'utilise dans mes articles xD.

Voici un exemple:
Exemple Prism

Avantages:

  • 122 langages supportés.
  • Plusieurs thèmes.
  • Possibilité d'intégrer des plugins.
  • Package customisable.

Inconvénients:

  • Je n'en vois pas !

Intégration:

  1. Construisez votre package sur cette page
  2. Téléchargez le .js et le .css.
  3. Insérez le CSS et JS dans votre page.
  4. Intégrez les balises selon l'intégration basique mais aussi les plugins:
<link href="theme.css" rel="stylesheet" />
...
<script src="prism.js"></script>
...
<body>
<pre><code class="language-css">p { color: red }</code></pre>
</body>

L'exemple ci-dessus n'intégre pas de plugins

Liens:

Et plus encore !

Pour conclure, mon préféré est donc Prism vu la modularité et les possibilités !
Mais il en existe plein d'autres. Vous pouvez en consulter une bonne partie sur cette page :).

Previous Post Next Post


Add a comment