Utiliser Chroma 

Choisissez votre thème sur la page Chroma styles.

Paramétrez le fichier config.toml :

pygmentsUseClasses = true

Générez votre style (tango pour l’exemple) :

$ hugo gen chromastyles --style=tango > chroma-styles.css

Copier ce nouveau CSS dans /static/css.

Ajoutez dans le fichier config.toml :

customCSS = ["/css/chroma-styles.css"]

Tester la nouvelle coloration syntaxique avec le shortcode {{< highlight >}}
Doublez les premiers crochets pour que le code soit interprêté.

Les commandes 

Une commande bash 

{< highlight  bash >}} 
# apt update
{</ highlight>}}
# apt update

Du code html 

{< highlight  html >}} 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{</ highlight>}}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Du code PHP 

Une deuxième façon d’afficher du code (sans options) : encadrer le code par ```

~~~php
<?php
  header('Location: http://www.votresite.com/pageprotegee.php');
  exit();
?>
~~~
<?php
  header('Location: http://www.votresite.com/pageprotegee.php');
  exit();
?>

Du code CSS 

Il suffit d’ajouter "linenos=inline,linenostart=933" pour afficher la numérotation des lignes et à choisir le début (933 ici).

933.highlight {
934  border-radius: 5px;
935  margin-bottom: 1rem;
936  margin-top: 1rem;
937  border: 1px solid #8a8a8a6b;
938 overflow-x: auto;
939}

Surligner des lignes 

Il suffit d’ajouter hl_lines=5-7 au shortcode pour surligner les lignes de 5 à 7.
Voici un exemple avec Java.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
class Application1
{
   static void main(String[ ] args)
   { /* inverse d'une suite de caractère dans un tableau par
       permutation des deux extrêmes */
    char [ ] Tablecar ={'a','b','c','d','e','f'} ;
    int i, j ;
    System.out.println("tableau avant : " + String.valueOf(Tablecar));
    for ( i = 0 , j = 5 ;  i<j ; i++ , j-- )
     { char car ;
       car = Tablecar[i];
       Tablecar[i ]= Tablecar[j];
       Tablecar[j] = car;
     }
    System.out.println("tableau après : " + String.valueOf(Tablecar));
  }
}