Ich habe gerade mit Markdown angefangen. Ich liebe es, aber eines nervt mich: Wie kann ich die Größe eines Bildes mit Markdown ändern?
Die Dokumentation enthält nur den folgenden Vorschlag für ein Bild:
![drawing](drawing.jpg)
Wenn es möglich ist, möchte ich, dass das Bild auch zentriert wird. Ich frage nach allgemeinem Markdown, nicht nur wie GitHub das macht.
Antworten:
Bei bestimmten Markdown-Implementierungen (einschließlich Mou und Marked 2 (nur macOS)) können Sie
=WIDTHxHEIGHT
nach der URL der Grafikdatei die Größe des Bildes anhängen . Vergessen Sie nicht den Platz vor dem=
.Sie können die HÖHE überspringen
quelle
title
Attribut konvertiert .Sie können einfach HTML in Ihrem Markdown verwenden:
Oder über ein
style
Attribut ( wird von GitHub nicht unterstützt )Sie können auch eine benutzerdefinierte CSS-Datei verwenden, wie in dieser Antwort zu Markdown und Bildausrichtung beschrieben
CSS in einer anderen Datei:
quelle
style
funktioniert auf den meisten Websites (z. B. GitHub) nicht und wird bereinigt. Bevorzugenwidth
undheight
stattdessen wie von @kushdillip erwähnt.max-width
stattdessen zu verwenden, um sicherzustellen, dass die Bilder nicht gequetscht werdenDie hier akzeptierte Antwort funktioniert nicht mit einem Markdown-Editor, der in den Apps verfügbar ist, die ich bis heute verwendet habe, wie Ghost, Stackedit.io oder sogar im Stack Overflow-Editor. Ich habe hier im StackEdit.io Issue Tracker eine Problemumgehung gefunden .
Die Lösung besteht darin, die HTML-Syntax direkt zu verwenden, und sie funktioniert perfekt:
Ich hoffe das hilft.
quelle
Benutz einfach:
anstatt:
quelle
Wenn Sie MarkDown für PanDoc schreiben, können Sie dies tun:
Dies fügt
style="width: 50%;"
zu dem HTML -<img>
Tag oder[width=0.5\textwidth]
an\includegraphics
in LaTeX.Quelle: http://pandoc.org/MANUAL.html#extension-link_attributes
quelle
Vielleicht hat sich dies kürzlich geändert, aber die Kramdown-Dokumente zeigen eine einfache Lösung.
Aus den Dokumenten
Arbeitet auf Github mit Jekyll und Kramdown.
quelle
{: height=36 width=36}
; Dadurch werden HTML-Attribute generiert, daher sollte daspx
Suffix nicht vorhanden sein . Alternativ können Sie CSS mit verwenden{: style="height:36px; width:36px"}
.![alt text](image.png){:height="36px" }
width
undheight
den Teil "px" enthalten. Für mich musste ich verwenden{:height="36" width="36"}
Man könnte auf das
alt
Attribut zurückgreifen, das in fast allen Markdown-Implementierungen / Renderings zusammen mit CSS-Selektoren basierend auf Attributwerten festgelegt werden kann. Der Vorteil ist, dass man leicht eine ganze Reihe verschiedener Bildgrößen (und weiterer Attribute) definieren kann.Abschlag:
CSS:
quelle
Ersetzen
![title](image-url.type)
durch<img src="https://image-url.type" width="200" height="200">
quelle
Wenn Sie kramdown verwenden , können Sie dies tun:
Fügen Sie dies dann Ihrem benutzerdefinierten CSS hinzu :
quelle
Aufbauend auf der Antwort von Tiemes können Sie bei Verwendung von CSS 3 einen Teilstring-Selektor verwenden :
Dieser Selektor ordnet jedem Bild ein Alt-Tag zu, das mit '-fullwidth' endet:
Dann können Sie das Alt-Tag weiterhin für den vorgesehenen Zweck verwenden , um das Bild zu beschreiben.
Der Abschlag für das oben Genannte könnte so etwas sein wie:
Ich habe dies in Ghost Markdown verwendet und es hat gut funktioniert.
quelle
Durch die Kombination von zwei Antworten kam ich zu einer Lösung, die vielleicht nicht so hübsch aussieht.
aber funktioniert!
Es wird eine Miniaturansicht mit einer bestimmten Größe erstellt, auf die Sie möglicherweise klicken, um zum Bild mit der maximalen Auflösung zu gelangen.
Hier ist ein Beispiel! Ich habe es auf Visual Code und Github getestet.
quelle
Ich kam hierher und suchte nach einer Antwort. Einige tolle Vorschläge hier. Und Goldinformationen, die darauf hinweisen, dass Markdown HTMl vollständig unterstützt!
Eine gute, saubere Lösung ist immer, mit reiner HTML-Syntax zu arbeiten. Mit dem Tag.
Aber ich habe versucht, mich immer noch an die Markdown-Syntax zu halten, also habe ich versucht, sie um ein Tag zu wickeln und alle gewünschten Attribute für das Bild innerhalb des div-Tags hinzuzufügen. Und es funktioniert!!
Auf diese Weise werden externe Bilder unterstützt!
Ich dachte nur, ich würde das da rausbringen, da es in keiner der Antworten steht. :) :)
quelle
![chilling](link)
mit<img src="link" alt="chilling">
.Für diejenigen, die an einer
rmarkdown
undknitr
Lösung interessiert sind. Es gibt einige Möglichkeiten, die Größe von Bildern in einer.rmd
Datei ohne Verwendung von zu ändernhtml
:Sie können einfach eine Breite für ein Bild angeben, indem Sie hinzufügen
{width=123px}
. Fügen Sie keine Leerzeichen zwischen den Klammern ein:Eine andere Option ist
knitr::include_graphics
:quelle
{}
aber gescheitert. Separate{}
s scheitern auch.{height=x width=y}
. Es scheint, dass diese Syntax keine Kommas erkennt, aber ich könnte andere Attribute einschließlich Stilelementen angeben.Ich habe den einfachen Tag-Parser für die Verwendung eines img-Tags in benutzerdefinierter Größe in Jekyll geschrieben .
https://gist.github.com/nurinamu/4ccf7197a1bdfb0d7079
Sie können die Datei zum
_plugins
Ordner hinzufügen .quelle
Ich weiß, dass diese Antwort etwas spezifisch ist, aber sie könnte anderen in Not helfen.
Da viele Fotos mit dem Imgur-Dienst hochgeladen werden , können Sie die hier beschriebene API verwenden , um die Größe des Fotos zu ändern.
Wenn Sie ein Foto in einen GitHub-Kommentar hochladen, wird es über Imgur hinzugefügt. Dies ist also sehr hilfreich, wenn das Foto sehr groß ist.
Grundsätzlich würden Sie anstelle von http://i.imgur.com/12345.jpg http://i.imgur.com/12345m.jpg für mittelgroße Bilder verwenden.
quelle
Sie können dieses auch mit kramdown verwenden:
oder
Auf diese Weise können Sie dem letzten HTML-Element direkt beliebige Attribute hinzufügen. Zum Hinzufügen von Klassen gibt es eine Verknüpfung .class.secondclass .
quelle
Dieser funktioniert für mich, es ist nicht in einer Zeile, aber ich hoffe, es funktioniert für Sie.
quelle
Für R-Markdown funktionierte keine der oben genannten Lösungen für mich, daher habe ich mich der regulären LaTeX- Syntax zugewandt, die einwandfrei funktioniert.
Dann können Sie zB die
\begin{center}
Anweisung verwenden, um das Bild zu zentrieren.quelle
\centering
nach\begin{figure}
oder nichts, wenn Sie `\ includegraphics [width = \ linewidth] {draw.jpg}` verwenden, sollte dies meiner Meinung nach die Standard-Pandoc-Ausgabe sein, zumindest wenn das Bild breiter als der Text ist.Es gibt einen Weg mit Klasse und CSS-Stil hinzufügen
![pic][logo]{.classname}
dann notiere Link und CSS unten
Referenz hier
quelle
Für alle, die nach Lösungen suchen, die in R Markdown / Bookdown funktionieren , funktionieren / funktionieren diese der vorherigen Lösungen nicht oder müssen geringfügig angepasst werden:
Arbeiten
Anhängen
{ width=50% }
oder{ width=50% height=50% }
![foo](foo.png){ width=50% }
![foo](foo.png){ width=50% height=50% }
Wichtig: kein Komma zwischen Breite und Höhe - dh
{ width=50%, height=30% }
funktioniert nicht !Anhängen
{ height="36px" width="36px" }
![foo](foo.png){ height="36px" width="36px" }
{:height="36px" width="36px"}
Mit Doppelpunkt, wie ab @sayth, scheint es nicht mit R-Markdown zu funktionierenFunktioniert nicht:
=WIDTHxHEIGHT
=WIDTHxHEIGHT
![foo](foo.png =100x20)
noch=WIDTH
nur![foo](foo.png =250x)
arbeitenquelle
Wenn Sie Bilder im Github- Referenzstil verwenden:
quelle
Das Hinzufügen relativer Dimensionen zur Quell-URL wird in den meisten Markdown-Renderern gerendert.
Wir haben dies in Corilla implementiert da ich denke, dass das Muster den Erwartungen bestehender Workflows entspricht, ohne den Benutzer dazu zu zwingen, sich auf grundlegendes HTML zu verlassen. Wenn Ihr Lieblingswerkzeug keinem ähnlichen Muster folgt, lohnt es sich, eine Funktionsanforderung zu stellen.
Beispiel für Syntax:
![a-kitten.jpg](//corilla.com/a-kitten-2xU3C2.jpg =200x200)
Beispiel eines Kätzchens:
quelle
Ändern der Größe von Markdown-Bildanhängen in Jupyter Notebook
Ich benutze
jupyter_core-4.4.0
& jupyter Notebook.Wenn Sie Ihre Bilder anhängen, indem Sie sie wie folgt in den Markdown einfügen:
Diese
attachment
Links funktionieren nicht :TUN SIE DAS . Das funktioniert .
Fügen Sie einfach Div-Klammern hinzu.
Hoffe das hilft!
quelle
Zum späteren Nachschlagen:
Die Markdown-Implementierung für Joplin ermöglicht die Steuerung der Größe importierter Bilder auf folgende Weise:
<img src=":/7653a812439451eb1803236687a70ca" width="450"/>
Diese Funktion wurde hier angefordert und wie von Laurent versprochen implementiert.
Es dauerte eine Weile, bis ich die Joplin-spezifische Antwort gefunden hatte.
quelle
Bei der Verwendung von Flask (ich verwende es mit flachen Seiten) ... Ich habe festgestellt, dass die explizite Aktivierung (aus irgendeinem Grund nicht standardmäßig) von 'attr_list' in Erweiterungen innerhalb des Aufrufs zum Markdown den Trick ausführt - und dann kann man die Attribute verwenden (sehr nützlich auch, um auf CSS zuzugreifen - class = "my class" zum Beispiel ...).
FLATPAGES_HTML_RENDERER = prerender_jinja
und die Funktion:
Und dann in Markdown:
quelle
Für IntelliJ IDEA - Benutzer finden Sie in Markdown Navigator - Plugin.
Vorschau rendert Bilder, Abzeichen, HTML usw.
quelle
Wenn das Ändern des anfänglichen Abschlags für Sie keine Option ist, funktioniert dieser Hack möglicherweise:
Ich habe dies verwendet, um die Größe von Bildern vor dem Senden in einer E-Mail ändern zu können (da Outlook jegliches Bild-CSS-Styling ignoriert).
quelle
Tiemes Antwort ist in den meisten Fällen am besten.
In meinem Fall verwende ich Pandoc, um Markdown in Latex umzuwandeln. HTML-Tags funktionieren hier nicht.
Meine Lösung ist die Neuimplementierung
\includegraphics
Dies entspricht der Verwendung von CSS nach einer Konvertierung in HTML.
quelle