github README.md image centrale
J'ai regardé la syntaxe markdown utilisée dans GitHub pendant un moment, mais à l'exception du redimensionnement d'une image dans la mesure du readme.md page, je n'arrive pas à comprendre comment centrer une image dedans.
Est-ce possible? Dans l'affirmative, comment?
10 réponses
J'ai regardé la syntaxe markdown utilisée dans github [...], Je n'arrive pas à comprendre comment centrer une image
TL;DR
Non, vous ne pouvez pas enseulement en vous appuyant sur la syntaxe Markdown. Markdown ne se soucie pas du positionnement.
Remarque: certains processeurs markdown prennent en charge L'inclusion de HTML (comme indiqué à juste titre par @waldyr.ar), et dans le cas GitHub, vous pouvez revenir à quelque chose comme <div style="text-align:center"><img src ="..." /></div>. Méfiez-vous qu'il n'y a aucune garantie que l'image être centré si votre référentiel est bifurqué dans un environnement d'hébergement différent (Codeplex, BitBucket, ...) ou si le document n'est pas lu par un navigateur (Sublime Text Markdown preview, MarkdownPad, VisualStudio Web Essentials Markdown preview, ...).
Note 2: Gardez à l'esprit que même sur le site GitHub, la façon dont markdown est rendu n'est pas uniforme. Le wiki, par exemple, ne permettra pas une telle supercherie de position css.
Version Intégrale
Le syntaxe Markdown ne fournit pas la possibilité de contrôler la position d'une image.
En fait, il serait limite par rapport à la philosophie Markdown d'autoriser un tel formatage, comme indiqué dans le "philosophie" section
" un document au format Markdown doit être publiable tel quel, en texte brut, sans avoir l'air d'avoir été balisé avec des balises ou des instructions de formatage. "
Les fichiers Markdown sont rendus par github.com site Web grâce à L'utilisation du Ruby Redcarpet bibliothèque.
Redcarpet expose certains extensions (tels que barré, par exemple) qui ne font pas partie de la syntaxe standard Markdown et fournissent des "fonctionnalités" supplémentaires. Cependant, aucune extension Prise en charge ne vous permet de centrer une image.
Ceci provient du support de Github:
Hey Waldyr,
Markdown ne vous permet pas de modifier directement l'alignement (voir docs ici: http://daringfireball.net/projects/markdown/syntax#img), mais vous pouvez simplement utiliser une balise 'img' HTML brute et faire l'alignement avec CSS en ligne.
Santé,
Donc Il est possible d'aligner des images! il vous suffit d'utiliser le css en ligne pour résoudre le problème. Vous pouvez prendre un exemple de mon github repo. Au bas de README.md il y a une image centrée alignée. Pour plus de simplicité, vous pouvez simplement faire comme suit:
<p align="center">
<img />
</p>
Bien que, comme l'a dit nulltoken, il serait borderline contre la philosophie Markdown!
Alternativement, si vous avez le contrôle du css, vous pourriez devenir intelligent avec paramètres d'url et css .
Markdown:
Et CSS:
img[src$="centerme"] {
display:block;
margin: 0 auto;
}
Vous pouvez créer une variété d'options de style de cette façon tout en gardant la démarque propre du code supplémentaire. Bien sûr, vous n'avez aucun contrôle sur ce qui se passe si quelqu'un d'autre utilise le markdown ailleurs, mais c'est un problème de style général avec tous les documents markdown qu'on partage.
Cela fonctionne pour moi sur github
<p align="center">
<img src="...">
</p>
Vous pouvez également redimensionner l'image désirée largeur et hauteur. Par exemple:
<p align="center">
<img src="https://anyserver.com/image.png" width="750px" height="300px"/></p>
Pour ajouter une légende centrée à l'image, juste une ligne de Plus:
<p align="center">This is a centered caption for the image<p align="center">
Heureusement, cela fonctionne à la fois pour README.md et les pages Wiki GitHub.
Pour étendre un peu la réponse pour prendre en charge les images locales, il suffit de Remplacer FILE_PATH_PLACEHOLDER à votre chemin d'image et vérifiez-le.
<p align="center">
<img src="FILE_PATH_PLACEHOLDER">
</p>
Pour alignement à gauche
<img align="left" width="600" height="200" src="https://www.python.org/python-.png">
Pour alignement à droite
<img align="right" width="600" height="200" src="https://www.python.org/python-.png">
Et pour l'alignement central
<p align="center">
<img width="600" height="200" src="https://www.python.org/python-.png">
</p>
Ma façon de résoudre le problème avec le positionnement de l'image était d'utiliser les attributs HTML:
{ width="800" height="600" style="display: block; margin: 0 auto" }
L'image a été redimensionnée et centrée correctement, au moins dans mon moteur de rendu local VS markdown.
Ensuite, j'ai poussé les modifications au repo et j'ai malheureusement réalisé que ne fonctionnait pas pour GitHub README.md fichier . Néanmoins, je vais laisser cette réponse car cela pourrait aider quelqu'un d'autre.
Finalement, j'ai fini par utiliser une bonne vieille balise HTML à la place:
<img src="Image.svg" alt="Image" width="800" height="600" style="display: block; margin: 0 auto" />
Mais devinez quoi? Une méthode JS a remplacé mon attribut style! J'ai même essayé class attribut et avec le même résultat!
Ensuite, j'ai trouvé la page gist suivante où encore plus de HTML old-school a été utilisé:
<p align="center">
<img src="Image.svg" alt="Image" width="800" height="600" />
</p>
Celui-ci fonctionne bien cependant, je voudrais le laisser sans autres commentaires...
On peut utiliser ça. Veuillez changer l'emplacement src De ur img du dossier git et Ajouter un texte alternatif si img n'est pas chargé
<p align="center">
<img src="ur img url here" alt="alternate text">
</p>
C'est assez simple, vraiment.
-> This is centered Text <-
En gardant cela à l'Esprit, vous pouvez l'appliquer à la syntaxe img.
-><-