Markdown et alignement des images

Question

Je suis en train de créer un site qui publie des articles par numéro chaque mois. C'est simple, et je pense que l'utilisation d'un éditeur Markdown (comme le ADM un ici dans Stack Overflow) serait parfait.

Cependant, ils ont besoin de la possibilité d'aligner les images à droite dans un paragraphe donné. .

Je ne vois pas de moyen de le faire avec le système actuel - est-ce possible ?

Answer 1

Vous pouvez intégrer du HTML dans le format Markdown, ce qui vous permet de faire quelque chose comme ceci :

<img style="float: right;" src="whatever.jpg">

Continue markdown text...

Answer 2

J'ai trouvé une solution intéressante dans Markdown pur avec un peu Piratage de CSS 3 :-)

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

Suivez le code CSS 3 flotter l'image à gauche ou à droite, lorsque le image alt se termine par < o > .

img[alt$=">"] {
  float: right;
}

img[alt$="<"] {
  float: left;
}

img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none!important;
}

Answer 3

De nombreux processeurs Markdown "extra" supportent les attributs. Vous pouvez donc inclure un nom de classe comme ceci (PHP Markdown Extra) :

![Flowers](/flowers.jpeg){.callout}

ou, alternativement (Maruku, Kramdown , Python Markdown ):

![Flowers](/flowers.jpeg){: .callout}

Ensuite, bien sûr, vous pouvez utiliser une feuille de style de la manière appropriée :

.callout {
    float: right;
}

Si la vôtre prend en charge cette syntaxe, elle vous offre le meilleur des deux mondes : pas de balisage intégré et une feuille de style suffisamment abstraite pour ne pas devoir être modifiée par votre éditeur de contenu.

Answer 4

J'ai une alternative aux méthodes ci-dessus qui utilisent la balise ALT et un sélecteur CSS sur la balise alt... À la place, ajoutez un hachage d'URL comme ceci :

D'abord votre code d'image Markdown :

![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)

Notez l'ajout du hash URL #center.

Ajoutez maintenant cette règle dans CSS en utilisant les sélecteurs d'attributs de CSS 3 pour sélectionner les images avec un certain chemin.

img[src*='#left'] {
    float: left;
}
img[src*='#right'] {
    float: right;
}
img[src*='#center'] {
    display: block;
    margin: auto;
}

Vous devriez être en mesure d'utiliser un hachage d'URL de cette manière, presque comme si vous définissiez un nom de classe, et il ne s'agit pas d'une utilisation abusive de la balise ALT comme certaines personnes l'ont fait remarquer pour cette solution. Cela ne nécessite pas non plus d'extensions supplémentaires. Faites-en une pour le flottement à droite et à gauche, ainsi que pour tout autre style que vous souhaitez.

Answer 5

J'aime être super paresseux en utilisant des tableaux pour aligner les images avec le tuyau vertical ( | ). Cette syntaxe est prise en charge par certaines versions de Markdown (et également par la syntaxe Textile si cela vous convient) :

| I am text to the left  | ![Flowers](/flowers.jpeg) |

o

| ![Flowers](/flowers.jpeg) | I am text to the right |

Ce n'est pas la solution la plus flexible, mais elle répond à la plupart de mes besoins simples, elle est facile à lire au format markdown et vous n'avez pas besoin de vous souvenir des CSS ou du HTML brut.