Markdown et alignement de l'image

191

Je crée un site qui publie des articles dans des numéros chaque mois. C'est simple, et je pense que l'utilisation d'un éditeur Markdown (comme celui de WMD ici dans Stack Overflow) serait parfait.

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

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

html css markdown Jedidja
la source

2

Pourquoi ne pas simplement poser la question sans le "J'aide un ami avec un site à but non lucratif qui publie des articles dans des numéros chaque mois"?

JGallardo

11

@JGallardo Parce que je voulais être clair, je n'avais pas le contrôle complet du système, et je n'avais pas non plus la possibilité d'acheter un type de solution. Je conviens que j'aurais pu formuler la question différemment.

Jedidja

1

En ce qui concerne les éditeurs de démarques, vous pouvez utiliser le super stackedit.io/editor# , c'est génial d'écrire dedans :)

AbdelHady

1

@AbdelHady si seulement il avait été disponible en 2008 :)

Jedidja

1

@iPython Comment une question de 2008 peut-elle être le double d'une question posée 4 ans plus tard (2012)?

Jedidja

196

Vous pouvez intégrer du HTML dans Markdown, vous pouvez donc faire quelque chose comme ceci:

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

Continue markdown text...

Greg Hewgill
la source

43

Nettoyez-le et standardisez en supprimant les éléments inutiles divet en ajoutant une barre oblique de fermeture à la imgbalise, respectivement, c'est-à-dire `<img style =" float: right "src = "

what.jpg

Au lieu de divje préfère utiliser spanpour l'indentation en ligne. Pour un paragraphe complet, le centrage divest bon, voire simple p.

Eye

21

Cela fonctionne mieux avec certains interpréteurs nettoyés comme celui de GitHub: <img align = "right" src = "

something.jpg

19

@MattDiPasquale Les barres obliques de fermeture ne sont pas nécessaires. C'est du XHTML, pas du HTML.

CaptSaltyJack

j'ai essayé ceci pour intégrer une image dans un article de blog fantôme; en utilisant <div style = "float: right"> <img ...> </div>, le paragraphe suivant a fait circuler correctement l'image, tandis que <img style = "float: right" ...> a placé le paragraphe et l'image dans des boîtes côte à côte.

Martin DeMello

58

J'ai trouvé une belle solution en pur Markdown avec un petit hack CSS 3 :-)

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

Suivez l'image flottante du code CSS 3 à gauche ou à droite, lorsque le code image altse 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;
}

OzzyCzech
la source

1

Où le CSS doit-il être placé dans le répertoire MkDocs? @YannDuran

Ivan Huang

2

@IvanHuang assurez-vous simplement d'ajouter un fichier extra.css conformément à la documentation MkDocs, et mettez le css dans ce fichier.

Yann Duran

54

De nombreux processeurs Markdown "extra" prennent en charge les attributs. Vous pouvez donc inclure un nom de classe comme celui-ci (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 bonne manière:

.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 avoir besoin d'être modifiée par votre éditeur de contenu.

Gerwitz
la source

Au moment où vous écrivez tout cela:! Flowers {: .callout} vous pourriez aussi bien avoir écrit <img src = "/ flowers.jpeg" class = "callout" />

lfalin

1

Je suis d'accord, mais Markdown est souvent choisi pour les utilisateurs qui ne maîtrisent pas * ML, il n'y a donc aucune raison de préférer HTML à toute autre syntaxe arbitraire.

gerwitz

4

("Aucune raison" est une simplification excessive, bien sûr. Il existe de nombreuses raisons pour lesquelles vous voudrez peut-être que vos éditeurs se rapprochent ou s'éloignent du rendu HTML final. Ou vous pourriez être opposé à l'introduction d'une dépendance HTML dans votre contenu, si vous 'ai choisi Markdown pour abstraire la technique de rendu.)

gerwitz

33

J'ai une alternative aux 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 celui-ci:

Tout 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 le hachage d'URL ajouté #center.

Ajoutez maintenant cette règle dans CSS à l'aide des sélecteurs d'attributs CSS 3 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 commenté pour cette solution. Il ne nécessitera pas non plus d'extensions supplémentaires. Faites-en un pour flotter à droite et à gauche également ou pour tout autre style que vous pourriez souhaiter.

tremblement
la source

1

Exactement ce que je cherchais. Vous êtes un sauveur de vie. Une chose que je voudrais ajouter, c'est `` h1 h2 {clear: both} `` `` Pour que le prochain titre commence par une nouvelle ligne (ne chevauche pas l'image)

bhar1red

ressemble à ce que je recherche mais ... comment créer un CSS? et comment l'appeler dans Markdown?

Tony D

c'est aussi une excellente solution identique à la mienne :)

OzzyCzech

3

@OzzyCzech - non pas vraiment, votre solution abuse de la balise image "alt", ce qui pourrait être mauvais pour la conformité d'accessibilité sur une page, où cette solution utilise une approche de non-invasion via la balise src.

tremblement du

24

L'intégration de CSS est mauvaise:

![Flowers](/flowers.jpeg)

CSS dans un autre fichier:

img[alt=Flowers] { float: right; }

la source

67

Quoi? Maintenant, tout d'un coup, vous devez modifier un fichier externe à chaque fois que vous modifiez le contenu de démarque? Cela ne me semble pas être une bonne solution.

Jordan Reiter

9

@JordanReiter Tout le monde ici a écrit un programme composé de plus d'un fichier où la logique est répartie / organisée sur de nombreux emplacements. Nous le faisons exprès pour la maintenabilité. Pourquoi est-ce si douloureusement et terriblement différent?

z5h

8

Markdown permet aux utilisateurs non programmeurs de créer du contenu et il ne devrait pas dépendre de fichiers qui doivent être directement accessibles et modifiés sur le serveur. Un autre exemple: je pense qu'il est tout à fait normal de coder en dur les noms des champs d'une base de données dans votre code, mais une erreur de coder en dur en fonction de la 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 du stabilité de la valeur. Tout ce qu'il faut est quelqu'un changer Flowersà Floweret tout à coup cette image saute hors de la vue. De plus, ils doivent vous appeler chaque fois qu'ils ajoutent une image!

Jordan Reiter

24

@cboettig Il s'agit d'une grave 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.

Nathan Grigg

5

Je suis étonné que tant de gens pleurent sur cette solution. C'est un beau hack, nécessaire pour résoudre un problème pour certains services d'hébergement. L'affiche qui a donné ce beau hack a disparu maintenant et à la place, la communauté se retrouve avec des crybabies.

Aaron Robinson

22

J'aime être super paresseux en utilisant des tableaux pour aligner les images avec la |syntaxe verticale pipe ( ). Ceci est pris en charge par certaines versions de Markdown (et est également pris en charge par Textile si cela fait flotter 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 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 de CSS ou de HTML brut.

learnvst
la source

2

J'aime ce style, très démarqué. Dommage que cela ne fonctionne pas sur github (pas encore de toute façon.)

Eliot

3

Je viens d'essayer cette syntaxe sur GitHub et elle semble fonctionner maintenant.

Ege Rubak le

6

C'est un hack intéressant, mais c'est une mauvaise utilisation des tableaux pour la mise en page. Bienvenue en 1999.

jxpx777

3

Pour le démarque aromatisé github, ajoutez une ligne avec |-|-|. Il indique à l'analyseur qu'il existe une table et que la première ligne est un en-tête. Ex: goo.gl/xUCRiK

Kayla

10

Encore plus propre serait de simplement mettre p#given img { float: right }dans la feuille de style, ou dans le <head>et enveloppé dans des stylebalises. Ensuite, utilisez simplement le markdown ![Alt text](/path/to/img.jpg).

ma11hew28
la source

8

<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>

La markdownpossibilité d' attribut dans Markdown.

Peter Mortensen
la source

1

A travaillé pour moi. Je n'utilise pas github. Merci @raphox.

Hugo Tavares

Fonctionne bien avec l' analyseur PHP de Markdown vanilla de michelf

Ronan

2

Il s'agit de la fonctionnalité Markdown Extra, qui est incluse dans certains systèmes de gestion de contenu (par exemple Drupal), mais qui n'est pas incluse dans la fonctionnalité Markdown en soi.

Tim

7

J'ai aimé la réponse de learnvst sur l' utilisation des tables car elle est assez lisible (ce qui est l'un des objectifs de 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 le tableau soit reconnu et correctement rendu:

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

Les lignes de séparation doivent inclure au moins trois tirets ---.

icarito
la source

7

Si vous l'implémentez en Python, il existe une extension qui vous permet d'ajouter des paires clé / valeur HTML et des étiquettes de classe / id. La syntaxe est pour cela:

![A picture of a cat](cat.png){: style="float:right"}

Ou, si le style intégré ne fait pas flotter votre bateau,

![A picture of a cat](cat.png){: .floatright}

avec une feuille de style correspondant stylish.css:

.floatright {
    float: right;
    /* etc. */
}

jameh
la source

2

Comme Greg l'a dit, vous pouvez intégrer du contenu HTML dans Markdown, mais l'un des points de Markdown est d'éviter d'avoir à avoir une connaissance approfondie (ou aucune, d'ailleurs) du 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 avec quelque chose qui ressemble à 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 ressemble donc à ceci:

<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, envelopper la imgbalise avec div empêche tout autre texte de s'enrouler contre l'image ... ce n'est qu'un exemple, cependant), mais à mon humble avis, le point de Markdown est que vous ne voulez pas que des personnes potentiellement non techniques se lancent dans les tenants et les aboutissants de CSS / HTML ... c'est à vous en tant que développeur Web de rendre votre contenu CSS qui enveloppe la page aussi générique et propre que possible, mais alors encore une fois, vos éditeurs n'ont pas besoin de le savoir.

abbood
la source

1

J'avais 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 votre image à gauche ou au centre, remplacez

<div style="text-align: right">

avec

<div style="text-align: center">
<div style="text-align: left">

Zuha Karim
la source

J'ai essayé cela mais cela fonctionne maintenant .. l'image est alignée mais le texte html s'affiche.

fiza khan

-1

ce travail pour moi

<p align="center">
 <img src="/LogoOfficial.png" width="300" >
</p>

Andersonfrfilho
la source

-16

Le plus simple est d'envelopper l'image dans une balise centrale, comme ceci ...

<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>

Tout ce qui a trait à Markdown peut être testé ici - http://daringfireball.net/projects/markdown/dingus

Bien sûr, <center>peut être obsolète, mais c'est simple et ça marche!

yo-yo
la source

1

Je viens de remarquer que l'OP a demandé un alignement correct - j'essayais de centrer une image lorsque je suis tombé sur cette réponse.

yoyo

14

Non, ne l'utilisez jamais center.

Jordan Reiter

12

Je vais en fait me rallier à @ yoyo - <center>ça a du sens. Il est obsolète du HTML car HTML est censé décrire uniquement le contenu; les styles doivent figurer dans des feuilles de style. Cependant, Markdown a une intention différente: inclure suffisamment de style nécessaire pour transmettre un message textuel et laisser le reste au moteur de rendu / site. <center>semble tellement plus naturel que de penser aux CSS widths, floats, margins… - J'irais même jusqu'à demander à un analyseur Markdown de remplacer les <center>balises par des éléments CSS appropriés, un peu comme la façon dont il comprend actuellement intelligemment les paragraphes.

Slipp

Markdown et alignement de l'image

Réponses: