11 novembre 2016

Jekyll pygments markdown

La coloration syntaxique :

On a deux colorateurs syntaxique rouge et pygments (pour la coloration du code dans les snippets sur une page html).
Pour configurer Jekyll il vaut mieux utiliser rouge qui est en ruby comme Jekyll (pygments a été construit en python). D’autre part rouge contient le lexer pour markdown en natif. rouge est 100% compatible avec pygment donc on peut utiliser les feuilles de style css destinées à pygment.

Markdown :

Markdown est une façon simple d’écrire des pages web sans avoir à taper du code html. Un traducteur est utilisé par la suite pour convertir la syntaxe Markdown en code html. Pour Jekyll les deux principaux sont redcarpet et kramdown. Mais là aussi il est conseillé d’utiliser kramdown qui est plus rapide et en ruby.

En conclusion on doit utiliser kramdown et rouge car on peut avoir des incompatibilités avec redcarpet et on aura un système plus rapide.
\

Configuration de Jekyll:

Il suffit de mettre dans le _config.yml : highlighter: rouge # rouge ou null à la place de pygments. ()rouge est de toute façon utilisé par défaut.)
Pour mettre en valeur du code : { % highlight lexer_name % } { % endhighlight % } //lexer_name c’est le nom du code utilisé etc…(javascript, php,) On peut simplifier par :
```js
le code ….
``` ce qui donne :

    //le code ....

Les styles de pygments:
Quand on installe le programme on a un ensembe de styles (pas des css) pour chaque language. On doit donc générer un fichier css en tapant la commande pygmentize -S default -f html > default.css. Il faut le faire pour chaque style. Mais on peut tous les retrouver déjà compilé sur github et voir également la démo
Sur ce site, j’ai utilisé le monokai.css que j’ai configuré de la façon suivante :
Il faut remplacer tous les .codehilite par des .highlight et il faut supprimer la ligne contenant le style .hll en remplaçant :

.highlight .hll { background-color: #49483e } /* Pas bon */
.highlight { background-color: #49483e } /* Ok */
Mais il faut aussi changer la couleur du texte pour le style monokai.
Donc au final on aura :
.highlight { background-color: #49483e; color: white; }