Comment utiliser la coloration syntaxique du plugin RainLab.Blog dans un thème

Si vous souhaitez simpement savoir comment faire, naviguez directement à la fin de l'article

Le colorateur syntaxique utilisé par le plugin RainLab.Blog

OctoberCMS utilise l'éditeur de code ACE sur une majeur partie du CMS lorsqu'il est nécessaire d'éditer du code depuis le panneau d'administration. Google Code Prettify y est intérgé lorsqu'il s'agît de visualiser ce même code.

Il est donc tout à fait logique que RainLab, l'équipe de développement de plugins officiels d'OctoberCMS l'ai aussi choisi pour le plugin RainLab.Blog.

Cette librairie permet en quelques lignes de générer un colorateur syntaxique pour vos articles de blogs ou autre contenus susceptible de contenir du code. Il est compatible avec tous les langages principaux et détecte seul le langage qu'il doit colorer, ce qui le rends utilisable sur une large communauté de site très facilement.

Le plugin RainLab.Blog

Le plugin Blog fourni par RainLab, est aujourd'hui de loin le module de blog le plus utilisé du CMS et est le plugin #2 le plus utilisé sur l'ensemble des plugins, avec aujourd'hui plus de 102k installations.

Le plugin permet de faire tout ce que l'on peut attendre d'un plugin de blog:

• Gestion des catégories
• Rédaction d'article avec prévisualisation en direct
• Gestion des états et date de publications
• Gestion d'un court texte et d'une image de promotion de l'article

Le plugin étant très populaire, nombre de plugins additionnels sont proposé sur la marketplace pour améliorer ses fonctionnalités. Vous retrouverez ainsi une extension permettant l'intégration de Gutenberg, éditeur de texte initialement conçu pour WordPress, des plugins d'optimisation du référencement, de commentaires et autres fonctionnalités additionnelles d'un blog.

Utiliser le colorateur syntaxique du système directement dans votre thème

Quelle frustration, lors de la rédaction de votre premier article relatant vos derniers exploits en programmation que de voir que le code que vous visualisiez de façon très colorée lors de sa rédaction, se retrouver totallement nu lorsqu'il s'agît de l'afficher au public.

Pour y remédier et coller parfaitement avec ce que vous voyez visuellement lors de la rédaction de l'article, quoi de mieux que d'y intégrer les fichiers de configuration du système? Vous pouvez le faire directement depuis la page affichant les contenus devant être colorés:

title = "Article de blog"
url = "/blog/post/:slug"
layout = "default"
description = "Affichage d'un article seul"

[blogPost]
slug = "{{ :slug }}"
categoryPage = "blog/category"
==
    function onStart()
    {
        // Intégration des fichiers de styles de script du système.
        // les mêmes qu'utiliser par le prévisualisateur
        $this->addCss('/modules/system/assets/vendor/prettify/theme-desert.css');
        $this->addJs('/modules/system/assets/vendor/prettify/prettify.js');

        // Intégration d'un fichier d'initialisation de Prettify
        $this->addJs('/assets/js/init-prettify.js'|theme);
    }
==
// Ajout de la class "prettyprint" à toutes les balises "<pre>", généré par l'éditeur markdown
{{ post.content_html | replace({'<pre>': '<pre class = "prettyprint">'}) | raw }}

le fichier /assets/js/init-prettify.js est à créer dans votre thème, et sers uniquement à l'initialisation de la coloration syntaxique:

prettyPrint()

Restez connectés et retrouvez plus d'astuces en suivant le compte Twitter d'OctoberCMS.fr!