Intégrer du code dans une page Markdown

A l'aide de Rouge ou PrismJS

Posté par GraineDigitale le 10 mars 2018

Préalables

L’insertion de lignes de code dans un site internet peut parfois s’avérer être une mission très laborieuse si l’on souhaite poster ses articles dans un blog Wordpress, Drupal, ou autres CMS car le code que l’on souhaite présenter peut aisement entrer en conflit avec la page elle-meme raison pour laquelle il y a beaucoup de caractères interdit et des déclarations complexes à effectuer. D’un point de vue de la maintenance, démarrer un blog souhaitant afficher du code sera vite un vrai casse tete avec un CMS, ce qui décourarent plus d’une personne de maintenir à jour ses notes sur un site en ligne.

Les générateurs de site du type Jekyll utilisant la syntaxe markdown semblent alors apporter des réponses très interessantes. Plus rapide à ecrire, plus facile a comprendre, la rédaction d’article devient un jeu d’enfant.


Configuration du Syntax Highlighter pour Jekyll

En faisant une installation par défaut d’un site Jekyll (avec une version > 3.0 ), la fonctionnalite est automatique. Il n’y a aucune configuration particulière à faire, les blocs de code apparaissent déja formatés. Mais dans le cas où vous souhaité personnaliser votre site Jekyll, modifier le _config.yml ou bien ajouter vos propres feuilles de style Css, vous pourriez perdre la mise en page. Deux options s’offrent à nous, passer par le plugin Rouge à installer via les Gems Ruby ou bien utiliser PrismJs.

1ère option : Ajouter le Gem Ruby , Rouge

Le surlignage du code “highlighting” sur Jekyll peut s’effectuer à l’aide du plugin Rouge, pour cela il faut installer la gem Ruby : rouge et configurer le _config.yml comme cela est très bien détaillé dans cet article : Syntax Highlighting in Jekyll.

2ème option : Passer par PrismJs, l’autre Syntax Highlighter pour Jekyll

Dans certains cas, il peut arriver que l’utilisation de Rouge ne soit pas fonctionnelle. Il existe alors une solution de remplacement, tout aussi efficace : PrismJs . Depuis le site, il suffit alors de télécharger les scripts css et js et de les déclarer dans le corps des pages html template utilisées pour générer les pages et posts présent dans le dossier _layouts. Dans une page _layouts\default.html, on ajoute la ligne pour la feuille css :

  <link rel="stylesheet" href="/css/prism.css">

On ajouterra ensuite en fin de page juste après </footer> la ligne pour le script js :

<script src="/js/prism.js"></script>

L’intégration des lignes de codes dans un .md

Insérer un bout de code sur une ligne

Pour avoir index.htlm , il faut entourer le mot par le caractère `, tel que :

`index.html`

Insérer un bloc de code HTML

En intégrant les lignes suivantes :

```html
<div class="table-responsive">
<table class="table">
 ...
</table>
</div>
```

nous avons :

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Insérer un bloc de code c++

En intégrant les lignes suivantes :

```c++
#include <iostream>
using namespace std;

int main()
{
 cout << "Hello, World!";
 return 0;
}
```

nous avons :

#include <iostream>
using namespace std;

int main()
{
    cout << "Hello, World!";
    return 0;
}

Insérer un bloc de code contenant les ```

Il faut ajouter 4 espaces à chaque ligne :

```html
<div class="table-responsive">
<table class="table">
 ...
</table>
</div>
```

Sources