Markdown et alignement d'image
Je crée un site qui publie des articles dans des numéros tous les mois. C'est simple, et je pense qu'utiliser un éditeur Markdown (comme le WMD ici dans Stack Overflow) serait parfait.
Cependant, ils ont besoin de la possibilité d’aligner des images dans un paragraphe donné .
Je ne vois pas comment faire cela avec le système actuel - est-ce possible?
Vous pouvez incorporer du HTML dans Markdown pour pouvoir faire quelque chose comme ceci:
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
De nombreux processeurs "supplémentaires" de Markdown prennent en charge les attributs. Vous pouvez donc inclure un nom de classe comme celui-ci (PHP Markdown Extra):
{.callout}
ou alternativement (Maruku, Kramdown , Python Markdown ):
{: .callout}
Ensuite, bien sûr, vous pouvez utiliser une feuille de style de la manière appropriée:
.callout {
float: right;
}
Si le vôtre prend en charge cette syntaxe, elle vous offre le meilleur des deux mondes: pas de balisage incorporé et un résumé de feuille de style suffisant pour ne pas avoir à être modifiés par votre éditeur de contenu.
J'ai trouvé une belle solution dans pure Markdown avec un peu CSS 3 hack :-)
Suivez l’image flottante du code CSS 3 à gauche ou à droite lorsque le image alt se termine par < ou >.
img[alt$=">"] {
float: right;
}
img[alt$="<"] {
float: left;
}
img[alt$="><"] {
display: block;
max-width: 100%;
height: auto;
margin: auto;
float: none!important;
}
L'intégration de CSS est mauvaise:
CSS dans un autre fichier:
img[alt=Flowers] { float: right; }
J'aime être super paresseux en utilisant des tableaux pour aligner les images sur le tuyau vertical (|) syntaxe. Ceci est supporté par certaines variantes de Markdown (et est également soutenu par Textile si cela flotte sur votre bateau):
| I am text to the left |  |
ou
|  | I am text to the right |
Ce n’est pas la solution la plus flexible, mais c’est bon pour la plupart de mes besoins simples, elle est facile à lire au format Markdown et vous n’avez pas besoin de vous souvenir de CSS ni de HTML brut.
J'ai une alternative aux méthodes ci-dessus qui utilisait la balise ALT et un sélecteur CSS sur la balise alt ... Au lieu de cela, ajoutez un hachage URL comme ceci:
D'abord votre code d'image Markdown:
Notez le hash ajouté dans l'URL #center.
Ajoutez maintenant cette règle en CSS en utilisant les sélecteurs d'attributs 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 pouvoir utiliser un hachage d'URL comme celui-ci presque comme pour définir un nom de classe et il ne s'agit pas d'une utilisation abusive de la balise ALT, contrairement à ce que certaines personnes avaient commenté pour cette solution. De plus, il ne nécessitera aucune extension supplémentaire. Faites-en une pour les flottes droite et gauche ou pour tout autre style que vous souhaitez.
Encore plus propre serait de simplement mettre p#given img { float: right } Dans la feuille de style, ou dans les balises <head> Et encapsulé dans les balises style. Ensuite, utilisez simplement le démarquage .
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
L'attribut markdown possibilité dans Markdown.
J'ai aimé réponse de learnvst d'utiliser les tables car elles sont assez lisibles (ce qui est l'un des objectifs de l'écriture de Markdown).
Cependant, dans le cas de l'analyseur Markdown de GitBook, je devais, en plus d'une ligne d'en-tête vide, ajouter une ligne de séparation sous celle-ci, pour que la table soit reconnue et restituée correctement:
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
Les lignes de séparation doivent comporter au moins trois tirets ---.
Si vous l'implémentez en Python, il existe ne extension qui vous permet d'ajouter des paires clé/valeur HTML et des étiquettes de classe/id. La syntaxe est la suivante:
{: style="float:right"}
Ou, si le style intégré ne flotte pas votre bateau,
{: .floatright}
avec une feuille de style correspondante, stylish.css:
.floatright {
float: right;
/* etc. */
}
En tant que greg dit vous pouvez incorporer du contenu HTML dans Markdown, mais l'un des objectifs de Markdown est d'éviter d'avoir à posséder de vastes connaissances en matière de balisage CSS/HTML, n'est-ce pas? C'est ce que je fais:
Dans mon fichier Markdown, je demande simplement à tous mes éditeurs de wiki d’incorporer à toutes les images un élément ressemblant à ceci:
'<div> // Put image here </div>`
(bien sûr .. ils ne savent pas quoi <div> signifie, mais cela ne devrait pas avoir d'importance)
Donc, le fichier Markdown ressemble à ceci:
<div>
![optional image description][1]
</div>
[1]: /image/path
Et dans le contenu CSS qui enveloppe la page entière, je peux faire ce que je veux avec la balise image:
img {
float: right;
}
Bien sûr, vous pouvez en faire plus avec le contenu CSS ... (dans ce cas particulier, le fait d'encapsuler la balise img avec div empêche que le texte soit renvoyé à l'image ... ceci n'est cependant qu'un exemple), mais à mon humble avis l’intérêt de Markdown est que vous ne voulez pas que des personnes potentiellement non techniques se familiarisent avec les tenants et les aboutissants de CSS/HTML. À vous, développeur Web, de rendre votre contenu CSS qui enveloppe la page aussi générique et propre que possible, mais là encore, vos rédacteurs n’ont pas besoin de le savoir.
J'avais la même tâche et j'ai aligné mes images à droite en ajoutant ceci:
<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>
Pour aligner votre image à gauche ou au centre, remplacez
<div style="text-align: right">
avec
<div style="text-align: center">
<div style="text-align: left">