Afficher du code

Comment afficher correctement des exemples de code; comment se faire des manuels.

Afficher les lignes de code? Surligner un mot-clé? Préciser si on est en administrateur ou non?

J’expliquerai au maximum comment faire tout cela dans ce tuto. Avec en prime, l’utilisation de prismjs pour rendre plus facile la lecture du code.

Et accessoirement, comment afficher du markdown sur un site fait en markdown :laughing:

{{< details summary="See the details" >}}
This is a **bold** word.
{{< /details >}}

See the details

This is a bold word.

  
    ./MASUPERCOMMANDE


public class Program
{
    public static void Main(string[] args)
    {
        System.Console.WriteLine("Hello, World!");
    }
}

Explication de l’utilisation de Prims.

Je montre un exemple de chaque utilisation possible sur ce blog de l’affichage du code. Un exemple simple à copier puis à remplir de ce que l’on veut.

Afficher du code sans arguments

Afficher du code HTML

Donnera à l’affichage

  <p>Exemple</p>

Afficher du code C#

Donnera à l’affichage

public class Program
{
    public static void Main(string[] args)
    {
        System.Console.WriteLine("Hello, World!");
    }
}

Affichage de fichier en mode arborescence

La documentations de treeview

Ce que je tape dans mon fichier markdown:

```treeview
root_folder/
|-- a first folder/
|   |-- holidays.mov
|   |-- javascript-file.js
|   `-- some_picture.jpg
|-- documents/
|   |-- spreadsheet.xls
|   |-- manual.pdf
|   |-- document.docx
|   `-- presentation.ppt
|       `-- test    
|-- empty_folder/
|-- going deeper/
|   |-- going deeper/
|   |   `-- going deeper/
|   |        `-- going deeper/
|   |            `-- .secret_file
|   |-- style.css
|   `-- index.html
|-- music and movies/
|   |-- great-song.mp3
|   |-- S01E02.new.episode.avi
|   |-- S01E02.new.episode.nfo
|   `-- track 1.cda
|-- .gitignore
|-- .htaccess
|-- .npmignore
|-- archive 1.zip
|-- archive 2.tar.gz
|-- logo.svg
`-- README.md
```

Donnera à l’affichage

root_folder/
|-- a first folder/
|   |-- holidays.mov
|   |-- javascript-file.js
|   `-- some_picture.jpg
|-- documents/
|   |-- spreadsheet.xls
|   |-- manual.pdf
|   |-- document.docx
|   `-- presentation.ppt
|       `-- test    
|-- empty_folder/
|-- going deeper/
|   |-- going deeper/
|   |   `-- going deeper/
|   |        `-- going deeper/
|   |            `-- .secret_file
|   |-- style.css
|   `-- index.html
|-- music and movies/
|   |-- great-song.mp3
|   |-- S01E02.new.episode.avi
|   |-- S01E02.new.episode.nfo
|   `-- track 1.cda
|-- .gitignore
|-- .htaccess
|-- .npmignore
|-- archive 1.zip
|-- archive 2.tar.gz
|-- logo.svg
`-- README.md

Les différentes possibilités avec arguments

Afficher les numéros de ligne

La documentations de line-numbers

Ce que je tape dans mon fichier markdown:

<pre class="line-numbers language-none" data-start="42">
  <code>
    Hello,
    World!

    Foo
    Bar
  </code>
</pre>

Donnera à l’affichage

  
    Hello,
    World!

    Foo
    Bar

Affichage comme sur un terminal

La documentations de command-line

Commandes effectuées en root sur sa machine nommée “localhost”

Ce que je tape dans mon fichier markdown:

<pre class="command-line language-bash" data-user="root" data-host="localhost">
  <code>
    cd /usr/local/etc
    cp php.ini php.ini.bak
    vi php.ini
  </code>
</pre>

Donnera à l’affichage

  
    cd /usr/local/etc
    cp php.ini php.ini.bak
    vi php.ini

Commandes avec un résultat effectuées avec un utilisateur nommé “renaud” sur une machine nommée “remotehost”

Ce que je tape dans mon fichier markdown:

<pre
  class="command-line language-bash"
  data-user="renaud"
  data-host="remotehost"
  data-output="2, 4-8"
>
  <code>
    pwd
    /usr/home/renaud/bin
    ls -la
    total 2
    drwxr-xr-x   2 renaud  renaud     11 Jan 10 16:48 .
    drwxr--r-x  45 renaud  renaud     92 Feb 14 11:10 ..
    -rwxr-xr-x   1 renaud  renaud    444 Aug 25  2013 backup
    -rwxr-xr-x   1 renaud  renaud    642 Jan 17 14:42 deploy
  </code>
</pre>

Donnera à l’affichage

  
    pwd
    /usr/home/renaud/bin
    ls -la
    total 2
    drwxr-xr-x   2 renaud  renaud     11 Jan 10 16:48 .
    drwxr--r-x  45 renaud  renaud     92 Feb 14 11:10 ..
    -rwxr-xr-x   1 renaud  renaud    444 Aug 25  2013 backup
    -rwxr-xr-x   1 renaud  renaud    642 Jan 17 14:42 deploy

Affichage de la différence d’un fichier

La documentations de diff-highlight

Ce que je tape dans mon fichier markdown:

<pre class="language-diff-javascript diff-highlight">
  <code>
    @@ -4,6 +4,5 @@
    -    let foo = bar.baz([1, 2, 3]);
    -    foo = foo + 1;
    +    const foo = bar.baz([1, 2, 3]) + 1;
         console.log(`foo: ${foo}`);
  </code>
</pre>

Donnera à l’affichage

  
    @@ -4,6 +4,5 @@
    - let foo = bar.baz([1, 2, 3]);
    - foo = foo + 1;
    + const foo = bar.baz([1, 2, 3]) + 1;
         console.log(`foo: ${foo}`);

Trois façons de montrer du code html

La documentations de unescaped-markup

Par script

Ce que je tape dans mon fichier markdown:

<script type="text/plain" class="language-html">
  <p>Exemple</p>
</script>

Donnera à l’affichage

Par pre

Ce que je tape dans mon fichier markdown:

  <pre class="language-markup"><code><!--
  <p>Exemple</p>
--></code></pre>

Donnera à l’affichage

En une ligne seulement

Ce que je tape dans mon fichier markdown:

<code class="language-js"><!-- demoBtn.addEventListener("click", () => { ... }); --></code>

Donnera à l’affichage

Les plugins obligatoires pour que le reste fonctionne

Normalise les espaces ainsi que les retour à la ligne

La documentations de normalize-whitespace

Pas besoin de l’activer dans la page.

Ajoute la possibilité d’avoir des boutons avec action possible à l’affichage

La documentations de toolbar

Permet d’ajouter des boutons et des actions dans la partie pre et code

Obligatoire pour avoir le copier-coller.

Copier le contenu de la partie code

La documentations de copy-to-clipboard

Permet de copier/coller le contenu qui se trouve dans le pre ou code

Couleur pour les mots-clé

La documentations de highlight-keywords

Chaque mot-clé peut être configuré pour avoir une couleur différente.

Afficher le nom du language utilisé

La documentations de show-language

Ne pas utiliser

keep-markup

Ne pas utiliser car pour l’instant, il casse les couleurs modifiées du css en mode clair.

Configuration à mettre dans le hugo.toml

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

#https://prismjs.com/#supported-languages
#mais limité par la version du thème gruvbox
#https://hugo-theme-gruvbox.schnerring.net/blog/prism-code-highlighting-showcase/#languages
[params.prism]
    languages = [
      "markup",
      "yaml", "toml",
      "css",
      "clike",
      "aspnet", "csharp",
      "bash",
      "javascript",
      "diff"
    ]
    plugins = [
      "normalize-whitespace", #https://prismjs.com/plugins/normalize-whitespace/
      # Doit être avant le copy-to-clipboard pour que celui-ci fonctionne
      "toolbar", # https://prismjs.com/plugins/toolbar/
      "copy-to-clipboard",#https://prismjs.com/plugins/copy-to-clipboard/
      "line-numbers", # https://prismjs.com/plugins/line-numbers/
      "command-line", #https://prismjs.com/plugins/command-line/
      "diff-highlight", #https://prismjs.com/plugins/diff-highlight/
      "highlight-keywords", #https://prismjs.com/plugins/highlight-keywords/
      # Casse les couleurs du css
      #"keep-markup", #https://prismjs.com/plugins/keep-markup/
      "show-language", #https://prismjs.com/plugins/show-language/
      "treeview", #https://prismjs.com/plugins/treeview/
      "unescaped-markup", #https://prismjs.com/plugins/unescaped-markup/
    ]

Afficher du code

Afficher du code sans arguments#

Affichage de fichier en mode arborescence#

Les différentes possibilités avec arguments#

Afficher les numéros de ligne#

Affichage comme sur un terminal#

Commandes avec un résultat effectuées avec un utilisateur nommé “renaud” sur une machine nommée “remotehost”#

Affichage de la différence d’un fichier#

Trois façons de montrer du code html#

Les plugins obligatoires pour que le reste fonctionne#

Normalise les espaces ainsi que les retour à la ligne#

Ajoute la possibilité d’avoir des boutons avec action possible à l’affichage#

Copier le contenu de la partie code#

Couleur pour les mots-clé#

Afficher le nom du language utilisé#

Ne pas utiliser#

Configuration à mettre dans le hugo.toml#

Afficher du code sans arguments

Affichage de fichier en mode arborescence

Les différentes possibilités avec arguments

Afficher les numéros de ligne

Affichage comme sur un terminal

Commandes avec un résultat effectuées avec un utilisateur nommé “renaud” sur une machine nommée “remotehost”

Affichage de la différence d’un fichier

Trois façons de montrer du code html

Les plugins obligatoires pour que le reste fonctionne

Normalise les espaces ainsi que les retour à la ligne

Ajoute la possibilité d’avoir des boutons avec action possible à l’affichage

Copier le contenu de la partie code

Couleur pour les mots-clé

Afficher le nom du language utilisé

Ne pas utiliser

Configuration à mettre dans le hugo.toml