Markdown et l'alignement des images

Je fais un site qui publie des articles dans les questions de chaque mois. Il est simple, et je pense que l'aide d'un éditeur Markdown (comme le ADM un ici à Pile Overflow), ce serait parfait.

Cependant, ils n'ont besoin de la capacité d'avoir des images alignées à droite dans un paragraphe.

Je ne peux pas voir un moyen de le faire avec le système actuel est-il possible?

Note que, selon la plate-forme, vous pouvez ajouter des filtres de markdown. De sorte qu'il peut être possible d'ajouter une syntaxe qui spécifie l'alignement.
Pourquoi ne pas poser la question, sans le "je suis aidé un ami à but non lucratif site qui publie des articles dans les questions de chaque mois"?
Parce que je voulais que cela soit clair, je n'avais pas le contrôle complet sur le système, je n'ai d'avoir la possibilité d'acheter n'importe quel type de solution. Je suis d'accord que je pourrais avoir formulé la question différemment.
Concernant les éditeurs markdown, vous pouvez utiliser le grand stackedit.io/éditeur# , il est génial pour écrire 🙂
si seulement elle avait été disponible en 2008 🙂
2008! .. ouch, je ne l'ai pas vu venir 🙂
Double Possible de github README.md centre de l'image
Comment peut une question à partir de 2008 d'un double d'une question posée, 4 ans plus tard (2012)?

InformationsquelleAutor Jedidja | 2008-10-31

171

Vous pouvez incorporer HTML en Markdown, de sorte que vous pouvez faire quelque chose comme ceci:
```
<img style="float: right;" src="whatever.jpg">

Continue markdown text...
```
- Nettoyer & normaliser par strippnig inutile div et en ajoutant une barre oblique de fermeture de la img tag, respectivement, c'est à dire `<img style="float:right" src="whatever.jpg" />
- Au lieu de div, je préfère utiliser span en ligne mise en retrait. Pour le paragraphe entier de centrage div est bon, ou même de simples p.
- Cela fonctionne mieux avec certains aseptisé interprètes comme le GitHub est un: <img align="right" src="whatever.jpg" />
- La fermeture des barres obliques ne sont pas nécessaires. Que du XHTML, pas en HTML.
- j'ai essayé ce que pour intégrer une image dans un fantôme blog post; à l'aide de <div style="float:right"><img ...></div> coulait le paragraphe suivant autour de l'image correctement, alors que <img style="float: right" ...> mettre au point et de l'image en side-by-side cases.
InformationsquelleAutor Greg Hewgill
53

De nombreux Markdown "extra" les processeurs prennent en charge les attributs. Donc, vous pouvez inclure un nom de classe comme (PHP Markdown Extra):
```
![Flowers](/flowers.jpeg){.callout}
```
ou, alternativement (Maruku, Kramdown, Python Markdown):
```
![Flowers](/flowers.jpeg){: .callout}
```
Puis, bien sûr, vous pouvez utiliser une feuille de style de la bonne façon:
```
.callout {
    float: right;
}
```
Si le vôtre soutient cette syntaxe, il vous donne le meilleur des deux mondes: pas intégré de balisage, et une feuille de style abstrait, assez pour ne pas avoir besoin d'être modifié par votre éditeur de contenu.
- Par le temps de vous écrire tout cela: !les Fleurs{: .légende} vous pouvez aussi bien avoir écrit <img src="/flowers.jpeg" class="légende"/>
- Je suis d'accord, mais Markdown est souvent choisi pour les utilisateurs qui ne sont pas *ML-alphabètes, donc il n'y a aucune raison de préférer le HTML sur toute autre arbitraire de la syntaxe.
- ("Aucune raison" est de simplifier à l'excès bien sûr. Il y a beaucoup de UX raisons que vous pourriez voulez que votre rédacteurs de vous rapprocher, ou plus loin de la finale de rendu HTML. Ou vous pourriez être opposés à l'introduction d'un code HTML de dépendance dans votre contenu, si vous avez choisi de Markdown pour résumé la technique de rendu.)
InformationsquelleAutor gerwitz
43

J'ai trouvé une solution sympa dans pur Markdown avec un peu de CSS 3 hack 🙂
```
![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)
```
Suivre le CSS 3 code de flotter sur l'image de gauche ou de droite, lorsque le image alt se termine avec < ou >.
```
img[alt$=">"] {
  float: right;
}

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

img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none!important;
}
```
- Merci!!!! Cela a fonctionné pour moi avec un Mkdocs site. +1
- Où les CSS être placé dans la MkDocs répertoire? @YannDuran
- juste assurez-vous d'ajouter un extra.css de fichier comme par le MkDocs de la documentation, et de mettre le css dans le fichier.
- Ne devrait pas être centré ><, depuis la flèche pointe vers le vers l'alignement?
InformationsquelleAutor OzzyCzech
23

Intégration CSS est mauvais:
```
![Flowers](/flowers.jpeg)
```
CSS dans un autre fichier:
```
img[alt=Flowers] { float: right; }
```
- Quoi? Maintenant, tout d'un coup, vous devez modifier un fichier externe chaque fois que vous changez la démarque de contenu? Ne sonne pas comme une bonne solution pour moi.
- Tout le monde ici a écrit un programme composé de plus d'un fichier où est la logique de propagation, organisée sur de nombreux sites. Nous le faisons sur le but pour la maintenabilité. Pourquoi est-ce si douloureusement et terriblement différent?
- Markdown permet de non-programmeur utilisateurs de créer du contenu et il ne devrait pas être dépendante sur les fichiers qui doivent être directement consulté et modifié sur le serveur. Un autre exemple: je pense que c'est tout à fait normal de coder en dur le noms de champs dans une base de données dans votre code, mais une erreur de code en dur basé sur le valeur d'un champ dans votre base de données (c'est à dire if product.name == 'Tulips') parce que vous ne pouvez pas dépendre de la stabilité de la valeur. Tout ce qu'il faut c'est quelqu'un changement de Flowers à Flower et soudain, l'image saute hors de vue. Aussi, ils ont de vous appeler à chaque fois qu'ils ajouter une image!
- Merci, j'ai trouvé cela très pratique. La solution retenue ne semble pas fonctionner sur un Jekyll basée sur github-site hébergé. J'ai mis le texte alt pour être "floatright", car je n'aime pas ce alttext est, c'est une belle façon de contrôler facilement mon positionnement de l'image dans le format markdown.
- C'est grave de mauvaise utilisation de la balise alt. Il est censé être une description textuelle de l'image pour les personnes qui ne peuvent pas voir l'image.
- En effet, il est, je suis entièrement d'accord. Mais, voyant que très peu de personnes prennent la peine, y compris le texte alt ces jours (c'est à dire des exemples dans cette liste), je pense que le fait d'avoir alttext que vous dit il y a un floatright image n'est pas bien pire que de ne pas alttext, et que je donne de CAP'- accessoires pour la créativité ici. Le markdown est toujours valide démarque de cette façon.
- Je suis étonné de voir tant de gens pleurer sur cette solution. C'est une belle hack, nécessaire pour la résolution d'un problème pour certains services d'hébergement. L'affiche qui a donné cette belle hack est maintenant disparu et à la place de la communauté est à gauche avec des pleurnichards.
- Pour l'conforme-les monstres de là-haut, l'utilisation ![My incredibly useful alt text -right] et img[alt$="-right"] { float: right }. De cette façon, vous vous retrouvez avec 100% compatible Markdown, HTML, personnes à mobilité accrue XHTML5 et dieu sait quoi encore.
- Christophe: Merci de voir Nathan Grigg commentaire de comprendre pourquoi c'est une mauvaise idée. Vous êtes de mélange afficher des informations avec vos données, ce qui est mauvais, mais vous êtes aussi le faire d'une façon qui sera réellement visible pour les utilisateurs qui planent ou qui utilisent des navigateurs en mode texte.
- Si vous aimez cette solution voir mon alternative en utilisant une autre méthode qui n'a pas de boue avec l'attribut ALT et utilise à la place un #hachage de l'image src.
InformationsquelleAutor
23

J'ai une solution de rechange aux méthodes ci-dessus qui ont utilisé la balise ALT et un sélecteur CSS sur la balise alt... au Lieu de cela, ajouter une URL de hachage comme ceci:

D'abord votre Markdown code image:
```
![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)
```
Constater l'URL de hachage #centre.

Maintenant ajouter cette règle CSS utilisation du CSS 3 sélecteur d'attribut 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 être en mesure d'utiliser une URL de hachage comme ceci près, comme la définition d'un nom de classe et il n'est pas une mauvaise utilisation de la balise ALT comme certaines personnes ont fait des commentaires au sujet de cette solution. Il ne nécessite aucune des extensions supplémentaires. Faire un pour flotter à droite et à gauche ainsi ou tout autres styles que vous pourriez vouloir.
- Exactement ce que je cherchais. Vous êtes un sauveur de vie. Une chose que je voudrais ajouter, est `` h1 h2{ clear: both }`` de Sorte que la prochaine rubrique commence dans une nouvelle ligne (ne chevauche pas avec l'image)
- ressemble à ce que je suis en train de regarder pour, mais... comment puis-je faire une CSS? et comment dois-je l'appeler en Markdown?
- c'est également la solution idéale même que la mienne 🙂
- non, pas vraiment, votre solution abuse de l'image "alt" de la balise qui pourrait être mauvais pour la conformité de l'accessibilité sur une page, où cette solution utilise une non-invasion, par le biais de la src de la balise.
- Semble que ce n'est pas de travailler avec des fichiers Pdf
InformationsquelleAutor tremor
22

J'aime être super paresseux à l'aide de tables pour aligner des images avec le tuyau vertical (|) de la syntaxe. C'est pris en charge par certains Démarque des saveurs (et qui est également pris en charge par Textile si qui flotte votre bateau):
```
| I am text to the left  | ![Flowers](/flowers.jpeg) |
```
ou
```
| ![Flowers](/flowers.jpeg) | 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 en format markdown, et vous n'avez pas besoin de vous souvenir de CSS ou HTML brut.
- J'aime ce style, très markdown-y. Dommage qu'il ne fonctionne pas sur github (pas encore en tout cas.)
- J'ai juste essayé cette syntaxe sur GitHub et il semble fonctionner maintenant.
- C'est intéressant à pirater, mais c'est de détourner des tableaux pour la mise en page. Bienvenue à 1999.
- Pour le github aromatisé markdown, ajouter une ligne avec |- | -|. Il indique à l'analyseur qu'il y a une table, et la première ligne est un en-tête. Ex: goo.gl/xUCRiK
InformationsquelleAutor learnvst
10

Même 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, il suffit d'utiliser le markdown ![Alt text](/path/to/img.jpg).

InformationsquelleAutor ma11hew28
8
```
<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>
```
L'attribut markdown possibilité à l'intérieur de Markdown.
- Nope. Pas sur github markdown.
- Travaillé pour moi. Je ne suis pas à l'aide de github. Merci @raphox.
- Fonctionne très bien avec michelf de l' la vanille analyseur PHP markdown
- C'est Markdown Extra fonctionnalité, qui est inclus dans certains systèmes de gestion de contenu (par exemple, Drupal), mais n'est pas inclus des fonctionnalités en Démarque en soi.
InformationsquelleAutor
7

J'ai aimé learnvst réponse de l'aide des tables, car il est tout à fait lisible (ce qui est un objectif de la rédaction de Markdown).

Toutefois, dans le cas de GitBook du Markdown analyseur j'ai dû, en plus de vide en-tête de ligne, ajouter une ligne de séparation sous elle, pour la table, pour être reconnu et rendu:
```
| - | - |
|--- | ---|
| I am text to the left  | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |
```
Séparateur de lignes doivent inclure au moins trois traits --- .

InformationsquelleAutor icarito
7

Si vous l'implémenter en Python, il n'y a une extension qui vous permet d'ajouter du code HTML de paires clé/valeur, et de la classe/étiquettes d'identification. La syntaxe est la suivante:
```
![A picture of a cat](cat.png){: style="float:right"}
```
Ou, si incorporé le style n'est pas flotter votre bateau,
```
![A picture of a cat](cat.png){: .floatright}
```
avec un correspondant de la feuille de style, stylish.css:
```
.floatright {
    float: right;
    /* etc. */
}
```
InformationsquelleAutor jameh
2

Comme greg dit vous pouvez incorporer du contenu 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 de la connaissance, non? C'est ce que je fais:

Dans mon fichier Markdown j'ai simplement demander à tous mes wiki éditeurs à intégrer envelopper toutes les images avec quelque chose qui ressemble à ceci:
```
'<div> //Put image here  </div>`
```
(bien sûr.. ils ne savent pas ce <div> moyens, mais qui ne devrait pas d'importance)

De sorte que le Markdown fichier ressemble à ceci:
```
<div>
![optional image description][1]
</div>

[1]: /image/path
```
Et dans le CSS du contenu qui enveloppe l'ensemble de la page, je peux faire ce que je veux avec la balise image:
```
img {
   float: right;
}
```
Bien sûr, vous pouvez faire beaucoup plus avec le CSS du contenu... (dans ce cas particulier, enveloppant les img balise div empêche les autres de texte à partir d'habillage à l'encontre de l'image... c'est juste un exemple, si), mais à mon humble avis le point de Markdown est que vous ne voulez pas potentiellement des personnes non-techniques d'entrer dans les tenants et les aboutissants de CSS/HTML.. c'est à vous en tant que développeur web pour faire de votre CSS contenu qui encapsule la page génériques et aussi propre que possible, mais là encore, vos éditeurs n'a pas besoin de le savoir.

InformationsquelleAutor abbood
1

J'ai eu la même tâche, et 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 l'image à gauche ou au centre, remplacer
```
<div style="text-align: right">
```
avec
```
<div style="text-align: center">
<div style="text-align: left">
```
- J'ai essayé cela, mais il est maintenant de travailler.. l'image est aligné, mais le texte html à l'affiche.
InformationsquelleAutor Zuha Karim
-16

La plus simple consiste à placer l'image dans un centre de balise, comme ...
```
<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>
```
Rien à voir avec le format Markdown peut être testé ici - http://daringfireball.net/projects/markdown/dingus

Sûr, <center> peut être obsolète, mais c'est simple et ça marche!!!
- Viens de remarquer que l'OP a demandé pour un alignement à droite -- j'ai essayé de centrer une image quand je suis tombé sur cette réponse.
- Non, ne jamais utiliser de center.
- Je vais effectivement côté avec @yoyo— <center> a du sens. Il est déconseillé de HTML parce que le HTML est censé décrire le contenu uniquement; styles devrait être dans les feuilles de style. Cependant, Markdown a une intention différente: à inclure suffisamment de style nécessaire pour transmettre un message textuel, et laissez faire le reste pour le moteur de rendu/site. <center> semble beaucoup plus naturel que de penser CSS widths, floats, margins...— j'avais même aller aussi loin que d'avoir un Abattement de l'analyseur de remplacer <center> balises avec CSS appropriée adossés à des éléments, à l'instar de l'intelligemment les chiffres des paragraphes.
InformationsquelleAutor yoyo

Vous devez vous connecter pour publier un commentaire.