.md
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.
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.
RougeLe 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.
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>
.mdPour avoir index.html , il faut entourer le mot par le caractère `, tel que :
`index.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>
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;
}
Il faut ajouter 4 espaces à chaque ligne :
```html
<div class="table-responsive">
<table class="table">
...
</table>
</div>
```