Markdown et alignement d'image
https://stackoverflow.com/questions/255170
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je crée un site qui publie des articles dans des numéros tous les mois. C'est simple, et je pense en utilisant un éditeur Markdown (comme le WMD , ici dans la pile < !> nbsp; Overflow) serait parfait.
Toutefois, ils ont besoin de pouvoir aligner les images dans un paragraphe donné . .
Je ne vois pas comment le faire avec le système actuel - est-ce possible?
La solution
Vous pouvez incorporer du HTML dans Markdown pour pouvoir faire quelque chose comme ceci:
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
Autres conseils
Nombreux Markdown & "extra &"; les processeurs supportent 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 supporte cette syntaxe, elle vous donne le meilleur des deux mondes: pas de balisage incorporé, et un résumé de feuille de style suffisant pour ne pas avoir besoin d'être modifié par votre éditeur de contenu.
J'ai trouvé une bonne solution dans Markdown pur avec un peu de CSS & nbsp; 3 bidouille : -)
.
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 incorrecte:
CSS dans un autre fichier:
img[alt=Flowers] { float: right; }
J'aime être super paresseux en utilisant des tableaux pour aligner les images sur la syntaxe du tube vertical (|). Ceci est supporté par certaines variantes de Markdown (et est également soutenu par Textile si cela flotte 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, il est facile à lire au format Markdown et vous n’avez pas besoin de vous souvenir de CSS ni de code 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 ... A la place, ajoutez un hachage d'URL comme celui-ci:
D'abord votre code d'image Markdown:
Notez le hash ajouté dans l'URL #center.
Ajoutez maintenant cette règle dans CSS à l'aide de CSS & nbsp; 3 sélecteurs d'attributs 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, un peu comme définir un nom de classe. 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. Choisissez-en un pour les flottes droites et gauches ou pour tout autre style souhaité.
Même plus propre serait de simplement mettre p#given img { float: right } dans la feuille de style ou dans les balises <head> et enveloppées dans des 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é la réponse de learnvst d'utiliser les tableaux car ils sont très 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 le tableau soit reconnu et restitué correctement:
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
Les lignes de séparation doivent inclure au moins trois tirets ---.
Si vous l'implémentez en Python, il existe une extension qui vous permet d'ajouter Paires clé / valeur HTML et étiquettes de classe / id. La syntaxe est la suivante:
{: style="float:right"}
Ou, si le style intégré ne fait pas flotter votre bateau,
{: .floatright}
avec une feuille de style correspondante, stylish.css:
.floatright {
float: right;
/* etc. */
}
Comme greg a déclaré , vous pouvez incorporer du contenu HTML dans Markdown, mais l'un des avantages de Markdown est d'éviter d'avoir à avoir une connaissance étendue (ou aucune, d'ailleurs) des balises CSS / HTML, non? Voici 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 ce que <div> signifie, mais cela ne devrait pas avoir d'importance)
Le fichier Markdown se présente ainsi:
<div>
![optional image description][1]
</div>
[1]: /image/path
Et dans le contenu 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 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. cette page est aussi générique et propre que possible, mais vos éditeurs n’ont pas besoin de le savoir.
J'ai eu 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">
Le plus simple consiste à envelopper l'image dans une balise centrale, comme si ...
<center></center>
Tout ce qui a trait à Markdown peut être testé ici - http://daringfireball.net/projects/markdown/ dingus
Bien sûr, <center> est peut-être obsolète, mais c’est simple et ça marche!
