Markdown et alignement de l'image
Je fais un site qui publie des articles dans les numéros chaque mois. C'est simple, et je pense que l'utilisation d'un éditeur markdown (comme celui d'ADM ici dans StackOverflow) serait parfaite.
Cependant, ils ont besoin de la possibilité d'avoir des images alignées à droite dans un paragraphe donné.
Je ne vois aucun moyen de le faire avec le système actuel est-il possible?
13 réponses
Vous pouvez intégrer HTML dans Markdown, de sorte que vous pouvez faire quelque chose comme ceci:
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
De nombreux processeurs Markdown "extra" prennent en charge les attributs. Vous pouvez donc inclure un nom de classe comme ceci (PHP Markdown Extra):
{.callout}
Ou, alternativement (Maruku, Kramdown, Markdown Python):
{: .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, il vous donne le meilleur des deux mondes: pas de balisage intégré, et une feuille de style suffisamment abstraite pour ne pas avoir besoin d'être modifiée par votre éditeur de contenu.
On me trouve une bonne solution dans pur Markdown avec un peu CSS3 hack :-)
Suivez l'image flottante de code CSS3 à gauche ou à droite, lorsque l'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;
}
J'aime être super paresseux en utilisant des tables pour aligner les images avec la syntaxe verticale pipe (|). Ceci est pris en charge par certaines saveurs markdown (et est également pris en charge par le textile si cela flotte votre bateau)
| I am text to the left |  |
Ou
|  | I am text to the right |
Pas la solution la plus flexible, mais elle est bonne pour la plupart de mes besoins simples, est facile à lire au format markdown, et vous n'avez pas besoin de vous souvenir de CSS ou de HTML brut.
J'ai une alternative sur les méthodes ci-dessus qui utilisaient la balise ALT et un sélecteur CSS sur la balise alt.. au lieu de cela, ajoutez un hachage D'URL comme ceci:
D'abord votre code d'image markdown:
Notez l'url hash #center ajoutée.
Ajoutez maintenant cette règle en CSS à l'aide des sélecteurs d'attributs CSS3 pour sélectionner des 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 définir un nom de classe et ce n'est pas une mauvaise utilisation de la balise ALT comme certaines personnes l'ont fait commenté pour cette solution. Il ne nécessitera pas non plus d'extensions supplémentaires. Faites-en un pour float right et left ou tout autre style que vous pourriez vouloir.
Encore plus propre serait de mettre juste p#given img { float: right } dans la feuille de style, ou dans le <head> et enveloppé dans style balises. Ensuite, utilisez simplement le markdown .
Si vous l'implémentez en Python, il y a une extension {[6] } qui vous permet d'ajouter des paires clé/valeur html et des étiquettes classe/id. La syntaxe est pour ceci est:
{: style="float:right"}
Ou, si le style intégré ne flotte pas sur votre bateau,
{: .floatright}
Avec la feuille de style correspondante stylish.css:
.floatright {
float: right;
/* etc. */
}
J'ai aimé la réponse de learnvst d'utiliser les tables car elle est assez lisible (ce qui est l'un des buts de l'écriture Markdown).
Cependant, dans le cas de L'analyseur Markdown de GitBook, j'ai dû, en plus d'une ligne d'en-tête vide, ajouter une ligne de séparation en dessous, pour que la table soit reconnue et correctement rendue:
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
Les lignes de séparation doivent comporter au moins trois tirets --- .
Comme greg a dit Vous pouvez intégrer html dans markdown.. mais l'un des points de markdown est pour éviter d'avoir d'avoir une (ou toutes) en css/html de balisage connaissance? C'est ce que je fais:
Dans mon fichier markdown, je demande simplement à tous mes éditeurs wiki d'intégrer wrap toutes les images avec quelque chose qui ressemble à ceci
'<div> // put image here </div>`
(bien sûr.. ils donno ce que <div> signifie Mais cela ne devrait pas avoir d'importance)
Donc le fichier markdown ressemble à ce:
<div>
![optional img description][1]
</div>
[1]: /image/path
Et dans le css qui enveloppe toute la page, je peux faire ce que je veux avec la balise image:
img {
float: right;
}
Bien sûr, vous pouvez faire plus avec le css.. (dans ce cas particulier, envelopper l'img avec div empêche tout autre texte de s'enrouler contre l'image.. ce n'est qu'un exemple) mais à mon humble avis, le point de markdown est que vous ne voulez pas que des personnes potentiellement non techniques entrent dans les tenants et les aboutissants de css/html.. c'est à vous en tant que Web-dev de faire votre css cela enveloppe la page aussi générique et propre que possible, mais là encore vos éditeurs n'ont pas besoin de savoir à ce sujet.
J'avais la même tâche, j'ai aligné mes images vers la droite en ajoutant ceci:
<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>
Pour aligner votre image vers la gauche ou le centre, remplacez
<div style="text-align: right">
À
<div style="text-align: center"> <div style="text-align: left">
Le plus simple est d'envelopper l'image dans une balise centrale, comme ceci ...
<center></center>
Tout ce qui a trait à Markdown peut être testé ici - http://daringfireball.net/projects/markdown/dingus
Sûr, <center> peut être obsolète, mais c'est simple et ça fonctionne!