Afficher du code avec SyntaxHighlighter dans vos pages web

jeudi 5 mai 2011 - 23:47 par David - Synoptic Productions


Comme pour la plupart des blogs de web designer/developper, certains articles nécessitent d'afficher du code de différents langages (php, javascript, css, ...).


Pour faciliter la lecture de ce code, un affichage syntaxique peut alors être utile. Plusieurs méthodes sont possibles, mais j'ai choisi de présenter aujourd'hui SyntaxHighlighter qui repose sur un script Javascript très simple à utiliser et que l'on retrouve sur de nombreux sites (Apache, Wordpress, Mozilla, Yahoo, ...).



Installation

Pour utiliser ce plugin Javascript, il vous faudra tout d'abord récupérer les différents fichiers de SyntaxHighlighter et les installer sur un serveur qui pourra les héberger.

Parmi les fichiers, 3 sont importants :
  • le script principal "shCore.js"
  • la feuille de style "shCore.css"
  • la feuille de style pour le thème par défaut "shThemeDefault.css"
  • au moins un fichier Brush (ex: "shBrushPlain.js") pour adapter l'affichage du code au langage du code

Ensuite il vous faudra incorporer ces fichiers dans votre page, entre les balises "<head></head>"

<!-- Styles CSS -->
<link rel="stylesheet" type="text/css" href="/styles/shCore.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/styles/shThemeDefault.css" media="screen" />

<!-- Scripts Javascript -->
<script src="/js/shCore.js" type="text/javascript"></script>
<script src="/js/shBrushPlain.js" type="text/javascript"></script>

Configuration et utilisation

Une fois les scripts et feuilles de styles insérés dans votre page vous pouvez insérer alors le code que vous souhaitez afficher.

Deux méthodes pour insérer votre code :
  • entre des balises <pre></pre>
  • entre des balises <script></script>

Précisions :
  • pour l'usage des balises <pre>, il faudra échapper les caractères HTML du code avant de l'insérer. De nombreux outils en ligne existent pour cela : Accessify, Htmlescape, ...
  • pour l'usage des balises <script>, il faudra insérer le code dans un bloc CDATA

Ensuite, il faudra ajouter dans la balise le langage du code, ce que l'on appelle des alias de brush du type "brush: html" pour afficher du code "html". Cette information sera ajoutée dans l'attribut "class" de la balise.

<pre class="brush: html">
<!-- VOTRE CODE ICI-->
</pre>

<script type="syntaxhighlighter" class="brush: js">
<![CDATA[
/* VOTRE CODE ICI */
]]></script>

Enfin, il faudra exécuter le script SyntaxHighlighter pour formater le code inséré.

<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

Personnalisation

Il est possible d'apporter différentes personnalisations de ce plugin :
  • style d'affichage du code avec les thèmes (Django, Eclipse, Emacs, FadeToGrey, Midnight, Dark)
  • langages de code à afficher avec les scripts et styles associés (ActionScript, Bash/shell, C++, CSS, Javascript, PHP, SQL, et bien d'autres...)

Toutes les informations, documentations détaillées ainsi que les fichiers à télécharger sont disponibles sur le site du développeur :  http://alexgorbatchev.com/SyntaxHighlighter


Catégories :

0 commentaires

Enregistrer un commentaire