CSS

CSS - Simuler une fenêtre bash dans un blog

Martin ABADIE

• 4 min read
CSS - Simuler une fenêtre bash dans un blog

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

Sign up for more like this.

Enter your email
Subscribe