Aujourd'hui je vous propose de vous présenter deux solutions pour rendre plus sexy les instructions bash que vous insérez dans vos articles web.

Deux solutions se présentent à vous :

  • Termynal.js une bibliothèque permettant de créer des animations réalistes que l'on retrouverait dans une fenêtre bash ordinaire, mais attention elle n'est pas maintenue !
  • Créer son propre design comme fait ici

1-Termynal

Créé par Ines Montani, cette bibliothèque évoquée lors de l'édition 2019 du Devoxx France a attiré mon attention car elle permet de dynamiser ses guides d'installation.

Pour commencer il faut importer le fichier de style de la bibliothèque :

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="termynal.css">
    </head>
    <body>

    ...

    </body>
</html>

Puis le script JS en spécifiant l'id de la balise contenant le code Termynal

<!doctype html>
<html lang="fr">
    <head>
    
        ...
        
    </head>
    <body>
    
    ...
    
    <script src="termynal.js" data-termynal-container="#termynal"></script>
    </body>
</html>

Enfin il faut écrire la structure de la fenêtre bash :

<!doctype html>
<html lang="fr">
    <head>
    
        ...
        
    </head>
    <body>
            <div id="termynal" data-termynal data-ty-typeDelay="40" data-ty-lineDelay="700">
            <span data-ty="input" data-ty-prompt="▲">npm uninstall react</span>
            <span data-ty>Are you sure you want to uninstall 'react'?</span>
            <span data-ty="input" data-ty-typeDelay="1000" data-ty-prompt="(y/n)">y</span>
            <span data-ty="progress" data-ty-progressChar="·"></span>
            <span data-ty>Uninstalled 'react'</span>
            <span data-ty="input" data-ty-prompt="▲">node</span>
            <span data-ty="input" data-ty-prompt=">">Array(5).fill('🦄 ')</span>
            <span data-ty>['🦄', '🦄', '🦄', '🦄', '🦄']</span>
            <span data-ty="input" data-ty-prompt="▲">cd ~/repos</span>
            <span data-ty="input" data-ty-prompt="▲ ~/repos"> git checkout branch master</span>
            <span data-ty="input" data-ty-prompt="▲ ~/repos (master)">git commit -m "Fix things"</span>
        </div>
    
    ...
    
    </body>
</html>

Résultat :

npm uninstall react Are you sure you want to uninstall 'react'? y Uninstalled 'react' node Array(5).fill('🦄 ') ['🦄', '🦄', '🦄', '🦄', '🦄'] cd ~/repos git checkout branch master git commit -m "Fix things"

Avantages :

  • Dynamic

Points négatifs :

  • Non responsive
  • Utilisant les fonctions await et async ce ne sera pas compatible avec tous les navigateurs

2-Style CSS

La deuxième solution est de créer son propre thème. Ça demande un peu plus de temps et d'investissement mais voici une base :

Récupérez le style depuis le dépôt GitLab : https://git.martin-abadie.fr/MartinAbadie/terminal-style

Ajoutez-le directement dans le header de votre page :

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="console.css">
    </head>
    <body>

    ...

    </body>
</html>

Créez la structure de la fenêtre bash :

<!doctype html>
<html lang="fr">
    <head>

        ...

    </head>
    <body>

        <div console-window>
            <div console-head>
                <div console-dot="close"></div>
                <div console-dot="reduce"></div>
                <div console-dot="extend"></div>
            </div>
            <div console-body>
                <span console="input" console-prompt="> ~/devs/my-project (develop)">node -v</span>
                <span console>v12.18.1</span>
                <span console="input" console-prompt="> ~/devs/my-project">cd ..</span>
                <span console="input" console-prompt="> ~/devs">sudo apt upgrade</span>
                <span console="input" console-prompt="[sudo] password for user:"></span>
                <span console="input" console-prompt="Reading package lists... Done"></span>
                <span console="input" console-prompt="Building dependency tree"></span>
                <span console="input" console-prompt="Reading state information... Done"></span>
                <span console="input" console-prompt="Calculating upgrade... Done"></span>
                <span console="input" console-prompt="The following packages will be upgraded:"></span>
                <span console="input" console-prompt="  azure-cli"></span>
                <span console="input" console-prompt="1 upgraded, 0 newly installed, 0 to remove and 0 not upgraded."></span>
                <span console="input" console-prompt="Need to get 174 MB of archives."></span>
                <span console="input" console-prompt="After this operation, 11.8 MB of additional disk space will be used."></span>
                <span console="input" console-prompt="Do you want to continue? [Y/n]">y</span>
                <span console="input" console-prompt="[########################################&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;] 80%"></span>
            </div>
        </div>

    </body>
</html>

Et voici le résultat :

node -v v12.18.1 cd .. sudo apt upgrade y

Avantages :

  • Responsive
  • Le prompt est non sélectionnable et donc seul les instructions à jouer pourront être copiées par les lecteurs

Points négatifs :

  • Non dynamique