Pico CMS - Ajout de la coloration syntaxique

Pour mettre en place ce site, je voulais un CMS "simple" et léger, qui utilise la syntaxe markdown pour la rédaction de pages, et également sans base de donnée, je me suis donc tourné vers Pico CMS que j'ai trouvé parfaitement adapté à mes besoins.

Cependant, un petit quelque chose me manque, la coloration syntaxique de code, par défaut, Pico CMS met déjà à notre disposition la possibilité d'utiliser des codeblocks:

   #include

Ici par exemple, si ma ligne en markdown commence par 4 espaces, la ligne est considérée comme du code.

Pico CMS utilise la librairie PHP Parsedown, après avoir rapidement lu un peu du code de cette librairie, j'ai trouvé ce qui m'intéresse dans le fichier Parsedown.php:

    protected function blockCode($Line, $Block = null)
    {
        if (isset($Block) and $Block['type'] === 'Paragraph' and ! isset($Block['interrupted']))
        {
            return;
        }

        if ($Line['indent'] >= 4)
        {
            $text = substr($Line['body'], 4);

            $Block = array(
                'element' => array(
                    'name' => 'pre',
                    'element' => array(
                        'name' => 'code',
                        'text' => $text,
                    ),
                ),
            );

            return $Block;
        }
    }

Cette fonction est très simple, elle va chercher dans notre page MarkDown, les lignes qui commencent par 4 espaces, et les modifie pour leur ajouter les balises pre et code, basiquement, un bloc de code sera constitué comme ceci:

<pre>
    <code>
        MON CODE
    </code>
</pre>

Cette syntaxe est très bien en ce qui me concerne, étant donné que je vais utiliser highlight.js pour mettre en place ma coloration syntaxique ! En effet, sur leur documentation on apprend que l'utilisation est la suivante:

<pre><code class="html">...</code></pre>

Donc nous n'avons que très peu de modification à effectuer dans le code de Pico CMS, j'ai commencé par installer la librairie et ses CSS dans mon dossier vendor, ensuite j'ai juste eu à aller modifier le template index.twig par défaut pour y ajouter la librairie de la manière suivante, j'ai commencé par ajouter le CSS dans la balise head:

<link rel="stylesheet" href="{{ base_url }}/vendor/highlightjs/styles/default.css" type="text/css" />

Notez que je peux utiliser les variables twig définies par Pico, ici j'ai par exemple utilisé base_url qui me permet d'ajouter le chemin racine de mon site facilement.

Puis le JS avant le /body:

<script src="{{ theme_url }}/js/modernizr-3.3.1-custom.min.js" type="text/javascript"></script>
<script src="{{ theme_url }}/js/utils.js" type="text/javascript"></script>
<script src="{{ theme_url }}/js/pico.js" type="text/javascript"></script>
<script src="{{ base_url }}/vendor/highlightjs/highlight.pack.js" type="text/javascript"></script>
<script>hljs.initHighlightingOnLoad();</script>

C'est à peu près tout, vos blocs de code Pico CMS devraient maintenant permettre la coloration syntaxique, comme c'est le cas sur cette page 😄

J'ai cependant ajouté une dernière petite modification, highlight.js permet de détecter le langage utilisé, mais il arrive que le langage détecté ne soit pas le bon, cependant, je peux utiliser par exemple ~~~php, cette syntaxe est déjà gérée par ParseDown, mais les noms de classes CSS ne correspondent pas avec celles de highlight.js, en effet, ParseDown utilise 'class' => "language-$language", je vais simplement le modifier pour que le code PHP insère la bonne classe CSS qui correspond à highlight.js dans ParseDown.php (L486):

//$Element['attributes'] = array('class' => "language-$language");
$Element['attributes'] = array('class' => "$language");

Je peux maintenant définir le langage utilisé dans un bloc de code dans PicoCMS avec la syntaxe suivante:

~~~php
<?php
    echo 'Hello, world !';
?>
~~~