En utilisant une légende d'image dans Markdown Jekyll

Question

Je héberge un blog Jekyll sur Github et j'écris mes articles avec Markdown. Lorsque j'ajoute des images, je le fais de la manière suivante :

![nom de l'image](http://lien.com/image.jpg)

Cela affiche alors l'image dans le texte.

Cependant, comment puis-je dire à Markdown d'ajouter une légende qui est présentée en dessous ou au-dessus de l'image ?

Answer 1

Pour Kramdown, vous pouvez utiliser {:refdef: style="text-align: center;"} pour aligner le centre

{:refdef: style="text-align: center;"}
![exemple](https://upload.wikimedia.org/wikipedia/en/a/a9/Exemple.jpg){: width="50%" .shadow}
{: refdef}
{:refdef: style="text-align: center;"}
*Fig.1: Ceci est un exemple d'image. [Source](https://upload.wikimedia.org/wikipedia/en/a/a9/Exemple.jpg)*
{: refdef}

Vous devez ajouter {::options parse_block_html="true" /} au début de l'article pour que cela fonctionne.

Answer 2

Cette option peut sembler compliquée à première vue, mais ce n'est pas du tout le cas et résout d'autres problèmes que le rendu markdown de Jekyll (Kramdown) présente. Fondamentalement, cette option change le rendu pour un rendu fait avec python qui est extensible, vous permettant d'installer des extensions (il y en a beaucoup, markdown-captions par exemple) et de l'étendre (il a une API d'extension).

1. La première étape consiste à définir un processeur markdown personnalisé. Vous devrez ajouter markdown: CustomProcessor au fichier _config.yml.

2. Ensuite, nous devons créer le CustomProcessor. Créez un dossier appelé _plugins et ajoutez un fichier appelé MyConverter.rb avec ce contenu :

   class Jekyll::Converters::Markdown::CustomProcessor

   def initialize(config)
   
   end
   
   def matches(ext)
       ext =~ /^\.(md|markdown)$/i
   end
   
   def output_ext(ext)
       ".html"
   end
   
   def convert(content)
   
     puts "EXECUTED"
   
     md_path = "./_plugins/temp/temp.md"
     html_path = "./_plugins/temp/temp.html"
   
     File.write(md_path, content, mode: "w")
     system("python ./_plugins/MyConverter.py")
   
     content = File.read(html_path)
     content
   end

Vous devrez également créer un dossier temp à l'intérieur de plugins.

Tout ce que ce code fait, c'est écrire tout le contenu du fichier que nous traitons dans temp.md, appeler un script python, attendre qu'il se termine, lire temp.html et le renvoyer en sortie du convertisseur.

3. Il est maintenant temps de créer notre convertisseur en python. J'ai choisi d'utiliser Python-Markdown. Il est facile à utiliser et possède de nombreuses extensions. Pour utiliser le convertisseur, nous devons créer un fichier appelé MyConverter.py à l'intérieur du dossier _plugins et y mettre ce contenu :

   import markdown

   markdown_extensions = [ 'markdown_captions', 'def_list', 'nl2br', 'tables', 'codehilite', 'fenced_code', 'md_in_html', 'attr_list' ]

   md_file = open("./_plugins/temp/temp.md", "r") md_string = md_file.read() md_file.close()

   html_string = markdown.markdown(md_string, extensions=markdown_extensions, extension_configs =extension_configs)

   html_file = open("./_plugins/temp/temp.html", "w") html_file.write(html_string) html_file.close()

Ce code charge simplement les extensions, lit le fichier temp.md, le convertit en html et l'écrit dans temp.html. Utiliser toutes ces extensions devrait générer une sortie similaire au rendu markdown de jekyll par défaut. La seule extension qui n'est pas incluse dans python-markdown est markdown_captions, celle qui fait la magie. Pour installer le rendu python et l'extension, il vous suffit d'exécuter pip install Markdown markdown-captions.

Cela devrait fonctionner, maintenant votre markdown est traduit par Python-Markdown. Certains éléments html peuvent être différents maintenant (d'après mon expérience seulement quelques-uns), alors peut-être que vous devrez apporter de petites modifications au css.

Voici le css que j'utilise avec les légendes :

figure{
  margin: 0px;
}

figcaption { 
  color: gray;
  font-size: 0.8rem;
}

Le processus essaie d'être aussi simple que possible pour le rendre facile à comprendre et à modifier. J'ai décrit le processus aussi bien que je puisse me souvenir. Si quelqu'un a un problème, laissez simplement un commentaire et je mettrai la réponse à jour.

Answer 3

Ajoutez la configuration suivante dans le fichier _config.yml

# Configuration pour prose.io
prose:
  rooturl: '_posts'
  media: 'img'
  ignore:
    - 404.html
    - LICENSE
    - feed.xml
    - _config.yml
    - /_layouts
    - /_includes
    - /css
    - /img
    - /js
  metadata:
    _posts:
      - name: "layout"
        field:
          element: "hidden"
          value: "post"
      - name: "title"
        field:
          element: "text"
          label: "Titre de l'article"
          placeholder: "Titre"
          alterable: true
      - name: "subtitle"
        field:
          element: "textarea"
          label: "Sous-titre"
          placeholder: "Une description de votre article."
          alterable: true
      - name: "date"
        field:
          element: "text"
          label: "Date"
          help: "Entrez la date de l'article."
          placeholder: "aaaa-mm-jj"
          alterable: true
      - name: "image"
        field:
          element: "text"
          label: "Image"
          help: "Ajoutez une image miniature à votre article."
          placeholder: "Miniature"
          alterable: true
      - name: "published"
        field:
          element: "checkbox"
          label: "Publier"
          help: "Cochez pour publier l'article, décochez pour le masquer."

Answer 4

Vous pouvez utiliser ce javascript qui génère automatiquement un figcaption à partir de l'attribut alt de l'image.

Vous pouvez ajouter du css pour rendre le texte du bas plus réaliste.

La même chose s'applique au markdown. Peu importe le texte que vous mettez ![ICI](), il apparaît en dessous de l'image.

var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
    var altText = images[i].getAttribute("alt");
    var figcaption = document.createElement("figcaption");
    figcaption.innerHTML = altText;
    images[i].insertAdjacentElement("afterend", figcaption);
}

var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
    var altText = images[i].getAttribute("alt");
    var figcaption = document.createElement("figcaption");
    figcaption.innerHTML = altText;
    images[i].insertAdjacentElement("afterend", figcaption);
}