Coloration syntaxique du code
Configurez la coloration syntaxique des blocs de code dans Jekyll à l'aide de Rouge et Kramdown.
Table of Contents
Coloration syntaxique du code
Configurez la coloration syntaxique des blocs de code sur votre site Jekyll.
Configuration par défaut
Le thème Zer0-Mistakes utilise Kramdown avec Rouge pour la coloration syntaxique :
# _config.yml
markdown: kramdown
highlighter: rouge
kramdown:
input: GFM
syntax_highlighter: rouge
Utilisation
Blocs de code de base
Indiquez le langage après les guillemets d’ouverture :
```python
def hello_world():
print("Hello, World!")
```
Langages pris en charge
Rouge prend en charge de nombreux langages, notamment :
- Ruby, Python, JavaScript, TypeScript
- HTML, CSS, SCSS, YAML, JSON
- Bash, Shell, PowerShell
- Java, C, C++, Go, Rust
- SQL, GraphQL, Markdown
Consultez la liste complète des langages pris en charge.
Alternative : highlight.js
Pour davantage de personnalisation, vous pouvez utiliser highlight.js :
Installation
Ajoutez à la <head> de votre mise en page :
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css"
/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>
Numéros de ligne
Ajoutez des numéros de ligne avec le plugin highlightjs-line-numbers.js :
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>
hljs.initLineNumbersOnLoad();
</script>
Styles personnalisés
Ajoutez du CSS pour les numéros de ligne :
table.hljs-ln {
width: auto;
border-width: 0px;
}
table.hljs-ln td {
border-width: 0px;
}
.hljs-ln-numbers {
text-align: center;
color: #ccc;
border-right: 1px solid #ccc !important;
padding-right: 5px !important;
}
.hljs-ln-code {
padding-left: 10px !important;
}
Thèmes
Thèmes Rouge
Rouge inclut plusieurs thèmes intégrés. Générez le CSS avec :
rougify style monokai > syntax.css
Thèmes disponibles : base16, colorful, github, monokai, thankful_eyes, et plus encore.
Thèmes highlight.js
highlight.js prend en charge plus de 89 styles. Parcourez les thèmes sur la page de démonstration.
Thèmes populaires :
atom-one-lightatom-one-darkgithubmonokaivs2015
Bonnes pratiques
- Indiquez toujours le langage — active une coloration correcte
- Utilisez des blocs de code délimités — plus lisibles que les balises
⟦15⟧⟦16⟧⟦17⟧ - Gardez le code lisible — coupez les lignes trop longues lorsque c’est possible
- Harmonisez avec votre thème — choisissez une coloration qui complète le design de votre site
Référence
Voir aussi
- [[Jekyll]]
- [[Syntax Highlighting]]
- [[Code Copy Button]]