Changer la taille de l'image dans Markdown
Je viens de commencer avec Markdown. J'aime ça, mais il y a une chose qui me dérange: comment puis-je changer la taille d'une image en utilisant Markdown?
La documentation ne donne que la suggestion suivante pour une image:
Si cela est possible, j'aimerais que l'image soit également centrée. Je demande un démarquage général, pas seulement comment github le fait.
Avec certaines implémentations de Markdown (notamment Mou et Marqué 2 (uniquement macOS)), vous pouvez ajouter =WIDTHxHEIGHT après l'URL du fichier graphique pour redimensionner l'image. N'oubliez pas l'espace avant le =.
Vous pouvez sauter la hauteur
Vous pouvez simplement utiliser du HTML dans votre Markdown:
<img src="drawing.jpg" alt="drawing" width="200"/>
Ou via l'attribut style (non supporté par GitHub)
<img src="drawing.jpg" alt="drawing" style="width:200px;"/>
Ou vous pouvez utiliser un fichier CSS personnalisé comme décrit dans cette réponse le Markdown et alignement des images
CSS dans un autre fichier:
img[alt=drawing] { width: 200px; }
La réponse acceptée ici ne fonctionne avec aucun éditeur Markdown disponible dans les applications que j'ai utilisées jusqu'à ce jour, comme Ghost, Stackedit.io ou même dans l'éditeur Stack Overflow. J'ai trouvé une solution de contournement ici dans le suivi des problèmes StackEdit.io .
La solution consiste à utiliser directement la syntaxe HTML, et cela fonctionne parfaitement:
<img src="http://....jpg" width="200" height="200" />
J'espère que ça aide.
Il suffit d'utiliser:
<img src="Assets/icon.png" width="200">
au lieu de:
Cela a peut-être changé récemment, mais les documents Kramdown représentent une solution simple.
De la docs
Here is an inline {:height="36px" width="36px"}.
And here is a referenced ![smile]
[smile]: smile.png
{: height="36px" width="36px"}
Fonctionne sur github avec Jekyll et Kramdown.
Si vous écrivez MarkDown for PanDoc, vous pouvez procéder comme suit:
{ width=50% }
Ceci ajoute style="width: 50%;" à la balise HTML <img>, ou [width=0.5\textwidth] à \includegraphics dans LaTeX.
Source: http://pandoc.org/MANUAL.html#extension-link_attributes
On pourrait utiliser l'attributaltqui peut être défini dans presque toutes les implémentations de Markdown/renderes ainsi que des sélecteurs CSS basés sur des valeurs d'attribut. L'avantage est que l'on peut facilement définir un ensemble complet de tailles d'image différentes (et d'attributs supplémentaires).
Markdown:
CSS:
img[alt="minipic"] {
max-width: 20px;
display: block;
}
Si vous utilisez utilisez kramdown , vous pouvez le faire:
{:.foo}
Ajoutez ensuite ceci à votre CSS personnalisé :
.foo {
text-align: center;
width: 100px;
}
En vous basant sur la réponse de Tiemes, si vous utilisez CSS 3 , vous pouvez utiliser un sélecteur substring :
Ce sélecteur correspond à toute image avec une balise alt qui se termine par '-fullwidth':
img[alt$="-fullwidth"]{
width: 100%;
display: block;
}
Ensuite, vous pouvez toujours utiliser la balise alt pour décrire le but recherché afin de décrire l'image.
Le Markdown pour ce qui précède pourrait être quelque chose comme:
J'utilise ceci dans Ghost Markdown, et cela fonctionne bien.
Je suis venu ici pour chercher une réponse. Quelques suggestions géniales ici. Et des informations en or soulignant que le démarquage prend totalement en charge HTMl!
Une bonne solution propre consiste toujours à utiliser la syntaxe html pure. Avec le tag.
Mais j'essayais toujours de respecter la syntaxe de démarquage, alors j'ai essayé de l'envelopper autour d'une balise et d'ajouter tous les attributs que je voulais pour l'image dans la balise div. Et il fonctionne!!
<div style="width:50%"></div>
Donc, de cette façon, les images externes sont supportées!
Je pensais juste que je publierais ceci, car cela ne figure dans aucune des réponses. :)
J'ai scripté l'analyseur de balise simple pour utiliser une balise img de taille personnalisée dans Jekyll .
https://Gist.github.com/nurinamu/4ccf7197a1bdfb0d7079
{% img /path/to/img.png 100x200 %}
Vous pouvez ajouter le fichier au dossier _plugins.
Vous pouvez aussi utiliser celui-ci avec kramdown:
markdown
{:.some-css-class style="width: 200px"}
ou
markdown
{:.some-css-class width="200"}
De cette façon, vous pouvez directement ajouter des attributs arbitraires au dernier élément html. Pour ajouter des classes, il existe un raccourci .class.secondclass .
Je sais que cette réponse est un peu spécifique, mais cela pourrait aider d'autres personnes dans le besoin.
Comme de nombreuses photos sont téléchargées à l’aide du service Imgur , vous pouvez utiliser l’API détaillée ici pour modifier la taille de la photo.
Lors du téléchargement d'une photo dans un commentaire de problème GitHub, celle-ci sera ajoutée via Imgur. Cela aidera donc beaucoup si la photo est très grande.
Fondamentalement, au lieu de http://i.imgur.com/12345.jpg , vous mettriez http://i.imgur.com/12345m.jpg pour les images de taille moyenne.
Pour R-Markdown, aucune des solutions ci-dessus ne fonctionnant pour moi, je me suis donc tourné vers la syntaxe LaTeX , qui fonctionne parfaitement.
\begin{figure}
\includegraphics[width=300pt, height = 125 pt]{drawing.jpg}
\end{figure}
Ensuite, vous pouvez utiliser par exemple l'instruction \begin{center} pour centrer l'image.
Il y a moyen avec add class et css style
![pic][logo]{.classname}
puis écrivez lien et css ci-dessous
[logo]: (picurl)
<style type="text/css">
.classname{
width: 200px;
}
</style>
Pour ceux intéressés dans une solution rmarkdown et knitr. Il y a plusieurs façons de redimensionner des images dans un fichier .rmd sans utiliser html:
Vous pouvez simplement spécifier une largeur pour une image en ajoutant {width=123px}. N'introduisez pas d'espaces entre les crochets:
{width=250px}
Une autre option consiste à utiliser knitr::include_graphics:
```{r, fig.cap="image description", out.width = '50%'}
knitr::include_graphics('your-image.png')
```
Lors de l'utilisation de Flask (je l'utilise avec des pages plates) ... j'ai constaté qu'activer explicitement (ce n'était pas par défaut pour une raison quelconque) "attr_list" dans les extensions de l'appel à démarquer fait l'affaire peut utiliser les attributs (très utile aussi pour accéder à CSS - class = "ma classe" par exemple ...).
FLATPAGES_HTML_RENDERER = prerender_jinja
et la fonction:
def prerender_jinja(text):
prerendered_body = render_template_string(Markup(text))
pygmented_body = markdown.markdown(prerendered_body, extensions=['codehilite', 'fenced_code', 'tables', 'attr_list'])
return pygmented_body
Et puis dans Markdown:
{: width=200px}
Pour référence future:
L’implémentation de Markdown pour Joplin permet de contrôler la taille des images importées de la manière suivante:
<img src=":/7653a812439451eb1803236687a70ca" width="450"/>
Cette fonctionnalité a été demandée ici et comme promis par Laurent cela a été implémenté.
Il m'a fallu un certain temps pour comprendre la réponse spécifique de Joplin.
Si changer le démarquage initial n'est pas une option pour vous, ce hack pourrait fonctionner:
newHtml = oldHtml.replace(/<img/g, '<img height="100"');
J'ai utilisé cela pour pouvoir redimensionner les images avant de les envoyer par courrier électronique (Outlook ignore tout style css d'image)
Redimensionnement des pièces jointes d’image de marque dans Jupyter Notebook
J'utilise jupyter_core-4.4.0 & jupyter notebook.
Si vous attachez vos images en les insérant dans le démarquage de la manière suivante:
Ces liens attachmentne pas fonctionnent:
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
FAIRE CELA. Ceci fonctionne fonctionne.
Il suffit d'ajouter des parenthèses div.
<div>
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
</div>
J'espère que cela t'aides!
Pour les utilisateurs de IntelliJ IDEA , veuillez vous reporter au plugin Markdown Navigator .
La prévisualisation rend les images, les badges, le HTML, etc.
