Exile on Keyboard St. - Blog sur Linux et Debian

Aller au contenu | Aller au menu | Aller à la recherche

jeudi 26 décembre 2019

Deux Plugins IDEA pour copier du code en tant qu'image et les utiliser dans des fichiers Markdown

Intégrer quelques lignes de code dans un fichier Markdown, README ou autre, ne pose pas de problème particulier.

On utilise alors:

  • Une indentation de 4 espaces (ou d'une tabulation)
  • Une séquence de code entre deux sections délimitées par trois backticks

Par exemple:

```console
$ sudo curl -L https://git.framasoft.org/grumpyf0x48/liar/raw/0.1/liar -o /usr/local/bin/liar
```

ce qui donne le rendu suivant.

Code in Markdown

Vous noterez qu'ici le caractère $ a été ajouté pour bien matérialiser la présence d'un Shell mais il n'est absolument pas requis dans la syntaxe Markdown.

Malheureusement, lorsque votre moteur de blog, par exemple la version de dotclear utilisée ici par Gandi, ne vous permet pas un rendu sympa des blocs de code, il faut bien trouver une solution !

Créer une image à partir d'une sélection de code dans IntelliJ

On va alors avoir recours à un plugin dans IntelliJ pour créer très rapidement une image à partir d'une section de code que l'on vient de sélectionner.

Ce plugin, c'est Code Screenshots, qui une fois installé va créer une image du code sélectionné chaque fois que vous utiliserez le raccourci: Ctrl+Alt+Shift+A.

L'image en question sera alors placée dans le presse papier (clipboard) du système.

On récupère l'image de la façon suivante:

xclip -selection clipboard -t image/png -o > $HOME/code-snippet.png

Notez qu'il nous faudra ensuite l'uploader sur le site du blog.

Copier une image dans un fichier Markdown depuis IntelliJ

Si maintenant nous avons une image dans le presse papier du système et que nous souhaitons l'intégrer dans un fichier Markdown édité avec IntelliJ, nous allons installer un deuxième plugin, et c'est Paste Images into Makdown.

Une fois installé, le raccourci Ctrl + V utilisé dans un fichier Markdown lorsqu'une image existe dans le presse-papier affichera la boite de dialogue suivante:

Paste Image into Markdown

Il ne nous reste alors qu'à choisir:

  • le nom de l'image
  • le répertoire où l'on souhaite la placer

et le fichier Markdown est alors modifié comme suit:

![](.README_images/040301ad.png)

Il nous reste enfin à donner un titre à cette image dans le Markdown.

samedi 16 novembre 2013

StackEdit: Un éditeur de Markdown en ligne avec synchronisation sur le cloud

Le langage Markdown est un langage de balisage léger permettant d'écrire très simplement des documents formatés, et qui soient aussi facile à lire qu'à écrire.

Son grand avantage, comme celui de tous les langages de Markup, est de pouvoir être lu tel quel ou bien interprété par un logiciel de formatage, puisque c'est un format texte tout simple.

Par exemple, pour mettre une phrase en gras, il suffit de l'entourer des tokens **:

**Un éditeur de Markdown en ligne avec synchronisation sur le cloud**

Si on veut plutôt mettre un texte en italique, un signe * suffit au lieu de deux.

Pour créer une liste à puces ordonnée, on procède comme suit:

1. Premier élément
2. Deuxième élément
3. etc ...

On trouvera la syntaxe complète du langage Markdown sur le site de John Gruber.

Autre avantage du langage Markdown, de plus en plus d'éditeurs de texte disposent de plugins ou d'extensions pour Markdown. Emacs a un mode pour cela: markdown-mode.

Il y a aussi des applications en ligne comme StackEdit, qui permettent d'éditer un fichier .md depuis un navigateur.

StackEdit utilise le stockage de fichiers en local via votre navigateur mais permet aussi de:

  1. Synchroniser vos documents sur Google Drive ou Dropbox,
  2. Les enregistrer / exporter au formats: Markdown, HTML, PDF,
  3. Publier ces documents sur différents sites comme: Blogger, Dropbox, Gist, GitHub, Google Drive, Tumblr, WordPress

Une restriction un peu génante: étant donné que le stockage en local, HTML 5, est utilisé, il semble que StackEdit ne soit capable d'éditer qu'un seul document à la fois par browser.

L'application StackEdit propose également des extensions au langage Markdown pour créer par exemple:

  • des tables,
  • des blocs de code,
  • des notes de bas de page

Par ailleurs, une "application" StackEdit existe pour Google Drive ; je mets des guillemets puisqu'il s'agit simplement d'un lien vers StackEdit depuis le menu Créer de Google Drive, mais c'est bien commode quand même.

Au premier lancement de StackEdit, la permission de stocker des fichiers en local sera demandée et un document d'exemple tenant lieu de documentation sera proposé.