233 votes

Markdown et alignement des images

Je suis en train de créer un site qui publie des articles par numéro chaque mois. C'est simple, et je pense que l'utilisation d'un éditeur Markdown (comme le ADM un ici dans Stack Overflow) serait parfait.

Cependant, ils ont besoin de la possibilité d'aligner les images à droite dans un paragraphe donné. .

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

0 votes

Notez que, selon la plateforme, vous pouvez ajouter des filtres au format markdown. Il est donc possible d'ajouter une syntaxe qui spécifie l'alignement.

4 votes

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" ?

14 votes

@JGallardo Parce que je voulais qu'il soit clair que je n'avais pas le contrôle total du système, ni la possibilité d'acheter un quelconque type de solution. Je reconnais que j'aurais pu formuler la question différemment.

25voto

L'incorporation de CSS est mauvaise :

![Flowers](/flowers.jpeg)

CSS dans un autre fichier :

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

72 votes

Quoi ? Maintenant, tout d'un coup, vous devez modifier un fichier externe chaque fois que vous changez le contenu markdown ? Ça ne me semble pas être une bonne solution.

10 votes

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

9 votes

Le format Markdown permet aux utilisateurs non programmeurs de créer du contenu et ne doit pas dépendre de fichiers auxquels il faut accéder directement et qu'il faut modifier sur le serveur. Un autre exemple : Je pense qu'il est tout à fait normal de coder en dur l'attribut noms de champs dans une base de données dans votre code mais une erreur de codage en dur basé sur le valeur d'un champ dans votre base de données (c'est-à-dire if product.name == 'Tulips' ) car vous ne pouvez pas compter sur la stabilité de la valeur. Il suffit que quelqu'un change Flowers à Flower et soudainement cette image apparaît. De plus, ils doivent vous appeler chaque fois qu'ils ajoutent une image !

10voto

MattDiPasquale Points 23842

Encore plus propre serait de mettre p#given img { float: right } dans la feuille de style, ou dans le <head> et enveloppé dans style tags. Ensuite, il suffit d'utiliser la méthode markdown ![Alt text](/path/to/img.jpg) .

9voto

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

L'attribut markdown dans le format Markdown.

1 votes

Ça a marché pour moi. Je n'utilise pas github. Merci @raphox.

0 votes

Fonctionne bien avec michelf's vanilla markdown PHP parser

2 votes

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 une fonctionnalité incluse dans Markdown en soi.

8voto

icarito Points 13

J'ai aimé réponse de learnvst d'utiliser les tableaux parce qu'ils sont assez lisibles (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 sous celle-ci, 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 comporter au moins trois tirets. --- .

7voto

jameh Points 75

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

![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 correspondante, stylish.css :

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X