Des snippets VS Code pour le blog

Une série de petits bouts de code qui me facilitent un peu la vie quand j’écris mes articles.

Palliatif

Cobalt ne possède pas encore de shortcodes permettant d’insérer des bouts de HTML dans le markdown de manière transparente. Par exemple :

{{ youtube(id="some_id") }}

Cela générerait le code HTML nécessaire à l’encapsulation d’une vidéo YouTube dont l’identifiant est some_id.

Je souhaite implémenter cette fonctionnalité un jour, mais en attendant, VS Code m’aide bien grâce aux snippets. Ce sont des raccourcis qui sont remplacés par du texte qu’on a préalablement défini.

Paramètres

Pour écrire vos snippets, appelez le launcher de VS Code (F1 par défaut), tapez « snippet » et choisissez « Preferences: Configure User Snippets ». Cela va ouvrir le fichier de configuration qui contiendra vos snippets.

Un snippet se définit comme suit:

"nom du snippet": {
        "prefix": "rs", // raccourci
        "body": [
      "corps avec position ${1:nom-entrée1}",
      "et seconde position ${2:nom-entrée2}",
            "$0"
    ],
    "description": "explication éventuelle"
    },

On commence par donner un nom au snippet, puis le raccourci par lequel il sera invoqué dans prefix. Le champ description est facultatif et permet de noter ce qu’on veut dedans. Enfin, le champ body est le texte qui remplacera le raccourci après invocation.

Ce texte peut contenir des placements de curseur commençant par $. ${1:nom-entrée1} va placer le curseur ici après expansion du snippet et écrire en grisé le texte après les :, nom-entrée1. Ça permet d’indiquer ce qu’on attend de l’utilisateur. Vous l’aurez compris, le ${2:nom-entrée2} va placer le curseur à cet endroit après avoir fait tab. Enfin, le $0 est la position finale du curseur après avoir visité les différents paramètres.

Mes snippets

Pour finir, voici les quelques snippets qui m’aident dans l’écriture des articles.

"embed_youtube": {
        "prefix": "yt",
        "body": [
            "<div class=\"embed-video\">",
            "<iframe src=\"https://www.youtube.com/embed/${1:video-id}\"",
            "webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder=\"0\">",
            "</iframe></div>",
            "$0"
        ]
    },
    "image_with_caption": {
        "prefix": "pic",
        "body": [
            "<p class=\"alignright\" style=\"width: 300px\">",
            "<img src=\"${1:src}\" />",
            "<em>${2:caption}</em></p>",
            "$0"
        ]
    },
    "image": {
        "prefix": "img",
        "body": [
            "<img class=\"alignright\" style=\"width: 300px\" src=\"${1:src}\" />",
            "$0"
        ]
    }

embed_youtube permet d’intégrer une vidéo YouTube, et je pense qu’il est possible de l’adapter à d’autres plates-formes vidéo. Pour le faire fonctionner, il faut cette définition Sass:

.embed-video {
  position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-bottom: 1em;

    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
}

image_with_caption insère une image avec une légende tandis que image en est dépourvue. Là encore, il faut un peu de Sass pour que la colle prenne :

.alignright {
  float: right;
  margin: 5px 0 4px 15px !important;
}

.alignleft {
  float: left;
  margin: 5px 15px 0px 0px !important;
}

.aligncenter {
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

Sans surprise, ça permet d’aligner l’image relativement au paragraphe.

Conclusion

Évidemment, les snippets peuvent servir à plein d’autres choses, notamment lorsqu’on code. Votre imagination est la seule limite !