Tutoriel : Intégrer un colorateur syntaxique avec CKEditor et Symfony2

Elliott Chiaradia |14-12-2015

Après avoir intégré CKEditor et y avoir ajouté un gestionnaire de fichiers, je vous propose de terminer cette petite série de tutoriels "CKEditor et Symfony2" en y ajoutant une fonctionnalité permettant d'ajouter de la coloration syntaxique. En effet, elle est très intéressante à implémenter si vous voulez pouvoir afficher, dans votre contenu, du code de manière propre et visible.

CkEditor ayant un catalogue de plugins conséquent, un addon s'occupant de faire ce travail de coloration syntaxique est d'ores et déjà disponible, elle n'est pas belle la vie ? Ce plugin s'appelle : "Codesnippet". Dans ce tutoriel, nous allons apprendre à configurer ce plugin, mais aussi à colorer le code du côté de l'affichage du contenu. A la fin de ce tuto, vous serrez en mesure afficher du code de cette manière là :

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

 

1. Codesnippet

Je vous invite à télécharger le plugin "Codesnippet" via ce lien. Celui-ci a deux dépendances, si vous ne les avez pas encore ajoutées à votre CKEditor, vous devez également les télécharger.

Il va falloir configurer votre bundle gérant CKEditor, à savoir IvoryCKEditorBundle. Pour cela, modifiez le fichier config.yml de votre bundle (dans mon cas, je travaille directement dans le fichier config de mon application ; app/config/config.yml). Dans mon exemple, les plugins ont été placés dans le répertoire web/ckeditor/plugins/.

ivory_ck_editor:
    plugins:
        lineutils:
            path:                       '/ckeditor/plugins/lineutils/'
            filename:                   'plugin.js'
        widget:
            path:                       '/ckeditor/plugins/widget/'
            filename:                   'plugin.js'
        codesnippet:
            path:                       '/ckeditor/plugins/codesnippet/'
            filename:                   'plugin.js'
    default_config: default
    configs:
        default:
            extraPlugins: 'lineutils,widget,codesnippet'

 

Ouvrez la page contenant un de vos formulaires CKEditor, vous devriez apercevoir l'icône suivante dans votre barre d'outils.

icone_codesnippet

Pour rajouter du code à votre contenu, il vous suffit de cliquer sur ce bouton, de sélectionner le langage correspondant à votre code, puis d'y insérer le code que vous voulez afficher. Cependant, cet affichage n'est effectif que dans votre zone de texte CKEditor, car concrètement le plugin codesnippet ne fait presque que de rajouter une balise <code> autour du code, comme ceci :

<code class="language-html">...</code>

 

Il va donc falloir gérer cette balise <code> du côté de l'affichage de notre contenu. Pas de panique ! HighlightJS s'occupe de tout !

 

2. HighlightJS

HighlightJS interprète les balises <code> afin d'afficher une coloration syntaxique correcte. De plus, vous allez pouvoir choisir le thème de couleurs qui vous convient le mieux, car cet addon en contient une bien jolie collection qui n'a sans doute rien à envier à celle votre éditeur de texte favori.

Téléchargez highlightjs et dézippez le fichier downloadé dans votre répertoire public ou dans le répertoire web. Dans notre exemple, nous allons placer le répertoire highlight dans /web/js/.

Il ne vous reste plus qu'à appeler, dans vos vues, les feuilles de styles, le script, ainsi que l'appel à la fonction de chargement de highlightJS..

<link rel="stylesheet" href="{{asset('js/highlight/styles/obsidian.css')}}">
<script src="{{asset('js/highlight/highlight.pack.js')}}"></script>
<script>hljs.initHighlightingOnLoad();</script>

 

Et voilà, le tour est joué ! Dans cet exemple, j’utilise le style obsidian en appelant le fichier obsidian.css, vous pouvez bien évidemment choisir un autre thème. Pour tester les différents styles, rendez-vous à la page suivante : https://highlightjs.org/static/demo/.

Après avoir trouvé un style qui vous convient, vous devez modifier la ligne suivante en y ajoutant la feuille de styles correspondant au thème voulu.

<link rel="stylesheet" href="{{asset('js/highlight/styles/theme_voulu.css')}}">

 

Conclusion

La série "CKEditor et Symfony2" touche à sa fin. Si vous avez suivi ces trois tutoriels, vous êtes maintenant capable d'intégrer un éditeur de contenu complet dans vos projets symfony2, toutes mes félicitations :)

Série CKEditor et Symfony2 :

  1. Intégrer CKEditor avec Symfony2
  2. Ajouter un gestionnaire de fichiers à CKEditor avec Symfony2
  3. Intégrer un colorateur syntaxique