blockquote - pandoc markdown image size




Ändern der Bildgröße in Markdown (12)

Ich habe gerade mit Markdown angefangen. Ich liebe es, aber eine Sache nervt mich: Wie kann ich die Größe eines Bildes mit Markdown ändern?

Die Dokumentation gibt nur folgenden Vorschlag für ein Bild:

![drawing](drawing.jpg)

Wenn es möglich ist, möchte ich, dass das Bild auch zentriert ist.


Es gibt einen Weg mit add Klasse und CSS-Stil

![pic][logo]{.classname}

Schreibe dann Link und CSS unten

[logo]: (picurl)

<style type="text/css">
    .classname{
        width: 200px;
    }
</style>

Referenz hier


Ausgehend von der Antwort von Tiemes können Sie bei Verwendung von CSS 3 einen Teilzeichenfolgen-Selektor verwenden :

Dieser Selektor passt jedes Bild mit einem alt-Tag an, das mit '-fullwidth' endet:

img[alt$="-fullwidth"]{
  width:  100%;
  display: block;
}

Dann können Sie das alt-Tag weiterhin für den beabsichtigten Zweck verwenden , um das Bild zu beschreiben.

Der Abschlag für das obige könnte etwas wie sein:

![Picture of the Beach -fullwidth](beach.jpg)

Ich habe dies in Ghost Markdown verwendet, und es hat gut funktioniert.


Bei der Verwendung von Flask (ich benutze es mit flachen Seiten) ... Ich fand, dass die Aktivierung explizit (war aus irgendeinem Grund nicht standardmäßig) "attr_list" in Erweiterungen innerhalb des Aufrufs zu Markdown den Trick - und dann kann man die Attribute verwenden (sehr nützlich, um zB auf CSS - class = "my class" zuzugreifen ...).

FLATPAGES_HTML_RENDERER = prerender_jinja

und die Funktion:

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

Und dann in Markdown:

![image](https://octodex.github.com/images/yaktocat.png "This is a tooltip"){: width=200px}

Benutz einfach:

<img src="Assets/icon.png" width="200">

Anstatt von:

![](Assets/icon.png)

Die akzeptierte Antwort hier funktioniert nicht mit irgendeinem Markdown-Editor, der in den Apps verfügbar ist, die ich bisher verwendet habe, wie Ghost, Stackedit.io oder sogar im -Editor. Ich habe hier im StackEdit.io Issue Tracker einen Workaround gefunden .

Die Lösung besteht darin, direkt die HTML-Syntax zu verwenden, und es funktioniert perfekt:

<img src="http://....jpg" width="200" height="200" />

Ich hoffe das hilft.


Für R-Markdown funktionierte keine der obigen Lösungen für mich, also wandte ich mich der regulären LaTeX Syntax zu, was gut funktioniert.

\begin{figure}
 \includegraphics[width=300pt, height = 125 pt]{drawing.jpg}
\end{figure}

Dann können Sie zB die Anweisung \begin{center} , um das Bild zu zentrieren.



Ich weiß, dass diese Antwort ein wenig spezifisch ist, aber es könnte anderen in Not helfen.

Da viele Fotos mit dem Imgur-Service hochgeladen werden, können Sie die hier angegebene API verwenden , um die Größe des Fotos zu ändern.

Wenn Sie ein Foto in einen GitHub-Problemkommentar hochladen, wird es über Imgur hinzugefügt. Dies hilft sehr, wenn das Foto sehr groß ist.

Im Grunde, statt http://i.imgur.com/12345.jpg , würden Sie http://i.imgur.com/12345m.jpg für mittelgroßes Bild setzen.


Sie können dieses auch mit kramdown verwenden:

markdown
![drawing](drawing.jpg)   
{:.some-css-class style="width: 200px"}

oder

markdown
![drawing](drawing.jpg)   
{:.some-css-class width="200"}

Auf diese Weise können Sie dem letzten HTML-Element direkt beliebige Attribute hinzufügen. Um Klassen hinzuzufügen, gibt es eine Verknüpfung .class.secondclass .


Sie könnten einfach etwas HTML in Ihrem Markdown verwenden:

<img src="drawing.jpg" alt="Drawing" style="width: 200px;"/>

Oder Sie könnten eine benutzerdefinierte CSS-Datei verwenden, wie in dieser Antwort auf Markdown und Bildausrichtung beschrieben

![drawing](drawing.jpg)

CSS in einer anderen Datei:

img[alt=drawing] { width: 200px; }


Wenn Sie MarkDown für PanDoc schreiben, können Sie Folgendes tun:

![drawing](drawing.jpg){ width=50% }

Dies fügt style="width: 50%;" an das HTML <img> -Tag oder [width=0.5\textwidth] an \includegraphics in LaTeX.

Quelle: http://pandoc.org/MANUAL.html#extension-link_attributes







markdown