it-swarm.com.de

Bildgröße in Markdown ändern

Ich habe gerade mit Markdown angefangen. Ich liebe es, aber eines stört 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 bitte um generelle Abschläge, nicht nur, wie Github es tut. 

636
cantdutchthis

Bei bestimmten Markdown-Implementierungen (einschließlich Mou und Marked 2 (nur macOS)) können Sie =WIDTHxHEIGHT hinter der URL der Grafikdatei anhängen, um die Bildgröße zu ändern. Vergessen Sie nicht das Leerzeichen vor dem =.

![](./pic/pic1_50.png =100x20)

Sie können die HÖHE überspringen

![](./pic/pic1s.png =250x)
357
prosseek

Sie könnten einfach HTML in Ihrem Markdown verwenden:

<img src="drawing.jpg" alt="drawing" width="200"/>

Oder über style-Attribut (wird nicht von GitHub unterstützt)

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

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

![drawing](drawing.jpg)

CSS in einer anderen Datei:

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

Die akzeptierte Antwort hier funktioniert nicht mit einem Markdown-Editor, der in den bisher verwendeten Apps verfügbar ist, wie Ghost, Stackedit.io oder sogar im Stack Overflow-Editor. Ich habe eine Problemumgehung hier im StackEdit.io Issue Tracker 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.

243
kushdilip

Benutz einfach:

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

anstatt:

![](Assets/icon.png)

Vielleicht hat sich das kürzlich geändert, aber die Kramdown-Dokumente zeigen eine einfache Lösung.

Aus den Unterlagen

Here is an inline ![smiley](smiley.png){:height="36px" width="36px"}.

And here is a referenced ![smile]

[smile]: smile.png
{: height="36px" width="36px"}

Arbeitet an Github mit Jekyll und Kramdown.

50
sayth

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

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

Dadurch wird style="width: 50%;" zum HTML-Tag <img> oder [width=0.5\textwidth] zu \includegraphics in LaTeX hinzugefügt.

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

45
rudolfbyker

Man könnte auf das Attributaltzurückgreifen, das in fast allen Markdown-Implementierungen/renderes zusammen mit CSS-Selektoren basierend auf Attributwerten gesetzt werden kann. Der Vorteil ist, dass man problemlos einen ganzen Satz unterschiedlicher Bildgrößen (und weiterer Attribute) definieren kann. 

Abschlag:

![minipic](mypic.jpg)

CSS:

img[alt="minipic"] { 
  max-width:  20px; 
  display: block;
}
18
petermeissner

Wenn Sie kramdown verwenden, können Sie Folgendes tun:

{:.foo}
![drawing](drawing.jpg)

Dann fügen Sie diese zu Ihrem Custom CSS :

.foo {
  text-align: center;
  width: 100px;
}
14
Steven Penny

Aufbauend auf der Antwort von Tiemes, wenn Sie CSS 3 verwenden, können Sie einen Teilstring-Selektor verwenden:

Diese Auswahl passt zu jedem Bild mit einem alt-Tag, das mit '-fullwidth' endet:

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

Dann können Sie das alt-Tag immer noch für seinen vorgesehenen Zweck verwenden, um das Bild zu beschreiben.

Der Markdown für das oben Gesagte könnte so aussehen:

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

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

10
bennetimo

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 die reine HTML-Syntax. Mit dem Tag.

Aber ich versuchte immer noch an der Markdown-Syntax festzuhalten, also versuchte ich, es um ein Tag zu wickeln und die gewünschten Attribute für das Bild innerhalb des Div-Tags hinzuzufügen. Und es funktioniert!!

<div style="width:50%">![Chilling](https://www.w3schools.com/w3images/fjords.jpg)</div>

So werden externe Bilder unterstützt! 

Ich dachte nur, ich würde das hier veröffentlichen, da es in keiner der Antworten steht. :)

10
Umang Desai

Ich habe den einfachen Tag-Parser für die Verwendung eines img-Tags mit benutzerdefinierten Größen in Jekyll erstellt.

https://Gist.github.com/nurinamu/4ccf7197a1bdfb0d7079

{% img /path/to/img.png 100x200 %}

Sie können die Datei dem Ordner _plugins hinzufügen.

8
nurinamu

Ich weiß, dass diese Antwort ein bisschen spezifisch ist, aber es 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 einem GitHub-Problemkommentar hochladen, wird es über Imgur hinzugefügt. Dies hilft also sehr, wenn das Foto sehr groß ist.

Grundsätzlich würden Sie anstelle von http://i.imgur.com/12345.jpghttp://i.imgur.com/12345m.jpg für Medium eingeben Bildgröße.

7
Iulian Onofrei

Sie könnten 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 beliebige Attribute direkt zum letzten HTML-Element hinzufügen. Um Klassen hinzuzufügen, gibt es eine Verknüpfung .class.secondclass .

5
rriemann

Bei R-Markdown funktionierte keine der oben genannten Lösungen für mich. Daher habe ich mich an die reguläre LaTeX - Syntax gewandt, was gut funktioniert.

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

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

2
Knarpie

Es gibt einen Weg mit add class und css style

![pic][logo]{.classname}

dann schreibe Link und CSS unten auf

[logo]: (picurl)

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

Verweis hier

2
Cropse

Das Hinzufügen relativer Dimensionen zur Quell-URL wird in den meisten Markdown-Renderern gerendert.

Wir haben dies in Corilla implementiert, da das Muster meines Erachtens den Erwartungen bestehender Workflows entspricht, ohne den Benutzer zu zwingen, sich auf grundlegendes HTML zu verlassen. Wenn Ihr Lieblingswerkzeug keinem ähnlichen Muster folgt, lohnt es sich, eine Funktionsanfrage zu stellen.

Syntaxbeispiel:

![a-kitten.jpg](//corilla.com/a-kitten-2xU3C2.jpg =200x200)

Beispiel eines Kätzchens:

kitten

2
ddri

Für diejenigen, die an einer rmarkdown- und knitr-Lösung interessiert sind. Es gibt einige Möglichkeiten, die Größe von Bildern in einer .rmd-Datei ohne die Verwendung von html zu ändern:

Sie können einfach eine Breite für ein Bild angeben, indem Sie {width=123px} hinzufügen. Fügen Sie keine Leerzeichen zwischen den Klammern ein:

![image description]('your-image.png'){width=250px}

Eine andere Möglichkeit ist die Verwendung von knitr::include_graphics:

```{r, fig.cap="image description", out.width = '50%'}
knitr::include_graphics('your-image.png')
```
1
symbolrush

Bei der Verwendung von Flask (ich verwende es mit flachen Seiten) ... fand ich, dass das explizite Aktivieren (aus irgendeinem Grund nicht standardmäßig) 'attr_list' in Erweiterungen im Aufruf von markdown den Trick bewirkt - und dann eine kann die Attribute verwenden (sehr nützlich, um zB auf CSS - Klasse = "meine Klasse" 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}
1
mat

Zum späteren Nachschlagen:

Mit der Markdown-Implementierung für Joplin kann die Größe der importierten Bilder folgendermaßen gesteuert werden:

<img src=":/7653a812439451eb1803236687a70ca" width="450"/>

Dieses Feature wurde angefordert hier und als versprochen von Laurent wurde dies implementiert.


Es dauerte eine Weile, bis ich die Joplin-spezifische Antwort herausgefunden hatte.

0
smkj33

Wenn das Ändern des anfänglichen Abschriftenwerts keine Option für Sie ist, kann dieser Hack funktionieren:

newHtml = oldHtml.replace(/<img/g, '<img height="100"');

Ich habe dies verwendet, um die Größe der Bilder ändern zu können, bevor sie in einer E-Mail gesendet werden (da Outlook jegliches Styling von Bildern ignoriert)

0
Yannickv

Ändern der Größe von Markdown-Bildanhängen in Jupyter Notebook

Ich verwende jupyter_core-4.4.0 & jupyter notebook.

Wenn Sie Ihre Bilder anhängen, indem Sie sie wie folgt in den Markdown einfügen:

![Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png](attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png)

Diese attachment Links nicht funktionieren:

<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>

TUN SIE DAS. Das funktioniert.

Fügen Sie einfach div Klammern hinzu.

<div>
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
</div>

Hoffe das hilft!

0
MrFun

Informationen für Benutzer von IntelliJ IDEA finden Sie im Markdown Navigator Plugin.

Vorschau rendert Bilder, Abzeichen, HTML usw.

Android Studio Markdown Preview

0