Prism - coloration syntaxique

Astucejavascript

Publié par jojaba le 20 Août 2012 (36592 lectures)

Encore un outil de coloration syntaxique me direz-vous ! Il est vrai qu'on en trouve pas mal sur le Web : GeSHi (php), SyntaxHighlighter (JavaScript), Pygments (Python). Mais Prism (JavaScript et CSS) apporte d'indéniables avantages par rapport à ces concurrents : il est léger, très simple d'utilisation, facile à styler et extensible par l'ajout de plugins. De plus, il favorise l'utilisation d'une syntaxe HTML sémantiquement correcte : ce sont les éléments code qui sont utilisés pour repérer le code à mettre en évidence.

Description et utilisation

Téléchargement

Prism est composé de deux fichiers uniquement : prism.css et prism.js. Ils sont paramétrables et téléchargeables sur la page de téléchargement de Prism.

Prism

Sur cette page vous pouvez choisir (à l'heure ou nous écrivons cet article) :

un des 3 thèmes proposés,
d'utiliser des fichiers optimisés (réduits) ou non (pour pouvoir les modifier facilement),
les langages reconnus (CSS, HTML/XML et/ou JavaScript),
les plugins à ajouter.

Appel des fichiers Prism

Dans le fichier HTML sur lequel vous souhaitez mettre en service l'outil, vous aurez à insérer deux lignes de code :

Une première ligne sera localisée dans l'entête :

<!DOCTYPE html>
<html>
<head>
	...
	<link href="prism.css" rel="stylesheet" />
</head>

Une deuxième ligne devra se placer en fin de fichier :
```
<body>
	...
	<script src="prism.js"></script>
</body>
</html>
```
Bien entendu, on peut également placer cette ligne juste après le dernier code à coloriser si on ne peut l'ajouter en toute fin de page.

Balisage des éléments à mettre en évidence

C'est là que Prism apporte un plus par rapport aux autres outils de coloration syntaxique. Pour la plupart des autres systèmes de coloration syntaxique, il faut ajouter à la balise <pre> (obligatoire en général) une classe qui permet d'identifier le bloc dont la syntaxe doit être mise en exergue. Prism se comporte de manière bien plus souple et standard, il s'occupe exclusivement des éléments entre les balises <code> (même ceux en ligne et pas forcément ceux qui se trouvent dans des <pre>).

Autre particularité, la classe utilisée par Prism est conforme aux spécifications W3C de l'élément <code> : elle commence par le mot-clé language-. Voici donc les différentes classes que l'on peut utiliser (si on a bien intégré les trois langages dans le fichier téléchargé) :

class="language-css" : concerne le code css.
class="language-markup" : concerne le HTML ou le XML.
class="language-javascript" : concerne le code JavaScript.
class="language-java" : concerne le code Java.

La reconnaissance de code intégré dans un autre langage est pris en charge également (CSS dans HTML ou JavaScript dans HTML par exemple).

Mais où placer ce code d'identification ? Fort logiquement, on pourra l'ajouter aux balises <code>. Mais une autre alternative, et c'est là encore un des grands atout de Prism, s'offre à vous. Vous pouvez indiquer un type de coloration syntaxique pour toute une partie de la page en plaçant la classe dans un des éléments ancêtre. Voici deux exemples fonctionnels qui seront plus parlant que de longs discours.

Identification dans les balises <code>

Coloration syntaxique de code HTML en plaçant l'identificateur dans chaque balise <code>. Vous constaterez que pour le bloc de code final, le balisage avec l'élément pre ne suffit pas, il doit contenir un élément code pour respecter les spécifications.

<section>
	<header>
		<h1>Quoi de neuf en HTML5 ?</h1>
	</header>
	<p>De nouvelles balises font leur apparition : <code class="language-markup"><audio></code>, <code class="language-markup"><video></code>, <code class="language-markup"><article></code>, <code class="language-markup"><nav></code>…. Vous découvrirez également de nouvelles valeurs d'attributs dans les éléments de formulaire : <code class="language-markup"><input type="email" name="email"></code>, <code class="language-markup"><input type="url" name="adresseweb"></code>,…. La structure de la page HTML change également :</p>
	<pre><code class="language-markup"><!DOCTYPE html>
	<html>
		<head>
		<title>titre</title>
			<link rel="stylesheet" type="text/css" href="style.css" />
			<script type="text/javascript" src="script.js"></script>
			<meta charset="utf-8" />
			...
		</head>
		<body>
		...	
		</body>
	</html></code></pre>
</section>

Le marquage de chaque balise <code> est relativement fastidieux dans ce cas. Il vaut mieux opter pour la solution proposée ci-après.

Identification dans une balise ancêtre

Ici, seule la balise <section> sera affublée de la classe language-markup ce qui entraînera la coloration de toutes les parties encadrées par la balise <code>. Beaucoup moins de travail, ne trouvez-vous pas ? Voici donc le même exemple avec la simplification proposée.

<section class="language-markup">
	<header>
		<h1>Quoi de neuf en HTML5 ?</h1>
	</header>
	<p>De nouvelles balises font leur apparition : <code><audio></code>, <code><video></code>, <code><article></code>, <code><nav></code>…. Vous découvrirez également de nouvelles valeurs d'attributs dans les éléments de formulaire : <code><input type="email" name="email"></code>, <code><input type="url" name="adresseweb"></code>,…. La structure de la page HTML change également :</p>
	<pre><code><!DOCTYPE html>
	<html>
		<head>
		<title>titre</title>
			<link rel="stylesheet" type="text/css" href="style.css" />
			<script type="text/javascript" src="script.js"></script>
			<meta charset="utf-8" />
			...
		</head>
		<body>
		...	
		</body>
	</html></code></pre>
</section>

Evolutions possibles : langages et plugins

Prism est prévu pour être évolutif. On peut définir de nouveaux langages reconnus et on peut ajouter des fonctionnalités à l'aide de plugins.

De nouvelles règles de coloration syntaxique pour d'autres langages (PHP, Python, Rub…) peuvent être élaborées. Il suffit d'être à l'aise avec les expressions rationnelles pour en créer. Pour de plus amples informations au sujet de la création de règles définissant la coloration d'un langage, veuillez vous rendre à la page de définitions de langages pour Prism.

Les plugins ajoutent des fonctionnalités supplémentaires à l'outil. En voici trois à disposition :

Line Highlight : permet de mettre en surbrillance une ou plusieurs lignes.
Show Invisibles : affiche les caractères invisibles.
Autolinker : permet de transformer les url en liens cliquables.

Si vous ne trouvez pas votre bonheur dans ces extensions, rien ne vous empêche de créer un plugin vous-même ;)

Conclusion

Prism ne se place pas comme concurrent des grands outils de coloration syntaxique apportant une prise en charge d'une liste de langages bien plus étendue mais se veut une solution légère et respectant les standards. Il apporte des plus-values certaines : légèreté et rapidité, simplicité de mise en service, facilité de modifier/faire évoluer. Mais un point négatif pourra vous freiner : peu de langages sont reconnus pour l'instant. Vous constaterez que le développeur de Prism est Lea Verou (avec l'aide de contributeurs), auteur de -prefix-free notamment et embauchée récemment par le W3C.