it-swarm.com.de

Markdown und Bildausrichtung

Ich erstelle eine Site, die jeden Monat Artikel in Ausgaben veröffentlicht. Es ist unkompliziert und ich denke, dass die Verwendung eines Markdown-Editors (wie dem WMD hier in Stack Overflow) perfekt wäre.

Sie benötigen jedoch die Fähigkeit, Bilder in einem bestimmten Absatz rechtsbündig auszurichten .

Ich sehe keine Möglichkeit, dies mit dem aktuellen System zu tun - ist es möglich?

163
Jedidja

Sie können HTML in Markdown einbetten, so dass Sie etwa Folgendes tun können:

<img style="float: right;" src="whatever.jpg">

Continue markdown text...
164
Greg Hewgill

Viele zusätzliche Markdown-Prozessoren unterstützen Attribute. So können Sie einen Klassennamen wie folgt einfügen (PHP Markdown Extra):

![Flowers](/flowers.jpeg){.callout}

oder alternativ (Maruku, Kramdown , Python Markdown ):

![Flowers](/flowers.jpeg){: .callout}

Dann können Sie natürlich ein Stylesheet wie folgt verwenden:

.callout {
    float: right;
}

Wenn Ihre Syntax diese Syntax unterstützt, erhalten Sie das Beste aus beiden Welten: kein eingebettetes Markup und eine Stylesheet-Zusammenfassung, die nicht von Ihrem Inhaltseditor geändert werden muss.

50
gerwitz

Ich habe eine nette Lösung gefunden in reines Markdown mit ein wenig CSS 3 Hack :-)

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

Folgen Sie dem CSS 3-Code-Float-Bild links oder rechts, wenn das image alt endet mit < oder >.

img[alt$=">"] {
  float: right;
}

img[alt$="<"] {
  float: left;
}

img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none!important;
}
38
OzzyCzech

Das Einbetten von CSS ist schlecht:

![Flowers](/flowers.jpeg)

CSS in einer anderen Datei:

img[alt=Flowers] { float: right; }
22
user142019

Ich mag es, super faul zu sein, indem ich Tabellen benutze, um Bilder an der vertikalen Pipe auszurichten (|) Syntax. Dies wird von einigen Markdown-Varianten unterstützt (und wird auch von Textile unterstützt, wenn das Ihr Boot schwimmt):

| I am text to the left  | ![Flowers](/flowers.jpeg) |

oder

| ![Flowers](/flowers.jpeg) | I am text to the right |

Es ist nicht die flexibelste Lösung, aber es ist gut für die meisten meiner einfachen Anforderungen, es ist einfach im Markdown-Format zu lesen und Sie müssen sich kein CSS oder rohes HTML merken.

20
learnvst

Ich habe eine Alternative zu den oben genannten Methoden, die das ALT-Tag und einen CSS-Selektor für das Alt-Tag verwendet haben ... Fügen Sie stattdessen einen URL-Hash wie diesen hinzu:

Zuerst den Markdown-Bildcode:

![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)

Beachten Sie den hinzugefügten URL-Hash #center.

Fügen Sie diese Regel jetzt in CSS mit CSS 3-Attributselektoren hinzu, um Bilder mit einem bestimmten Pfad auszuwählen.

img[src*='#left'] {
    float: left;
}
img[src*='#right'] {
    float: right;
}
img[src*='#center'] {
    display: block;
    margin: auto;
}

Sie sollten in der Lage sein, einen URL-Hash wie diesen zu verwenden, fast wie einen Klassennamen zu definieren, und es ist kein Missbrauch des ALT-Tags, wie es einige Leute für diese Lösung kommentiert haben. Es werden auch keine zusätzlichen Erweiterungen benötigt. Machen Sie eine, um rechts und links zu schweben, oder einen anderen Stil, den Sie vielleicht wollen.

18
tremor

Noch sauberer wäre es, einfach p#given img { float: right } In das Stylesheet oder in das <head> Einzufügen und in style -Tags zu verpacken. Verwenden Sie dann einfach den Abschlag ![Alt text](/path/to/img.jpg).

9
ma11hew28
<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>

Das Attribut markdown Möglichkeit innerhalb von Markdown.

8
raphox

Ich mochte learnvsts Antwort die Tabellen zu benutzen, weil sie gut lesbar sind (was ein Zweck des Schreibens von Markdown ist).

Beim Markdown-Parser von GitBook musste ich jedoch zusätzlich zu einer leeren Kopfzeile eine Trennlinie darunter einfügen, damit die Tabelle erkannt und richtig gerendert werden konnte:

| - | - |
|---|---|
| I am text to the left  | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |

Trennlinien müssen mindestens drei Bindestriche enthalten ---.

6
icarito

Wenn Sie es in Python implementieren, gibt es eine Erweiterung , mit dem Sie HTML-Schlüssel/Wert-Paare und Klassen/ID-Bezeichnungen hinzufügen können. Die Syntax hierfür lautet:

![A picture of a cat](cat.png){: style="float:right"}

Oder, wenn eingebettetes Styling Ihr Boot nicht schwimmt,

![A picture of a cat](cat.png){: .floatright}

mit einem entsprechenden Stylesheet, stylish.css:

.floatright {
    float: right;
    /* etc. */
}
6
jameh

Als greg said können Sie HTML-Inhalte in Markdown einbetten, aber einer der Punkte von Markdown ist, dass Sie keine umfangreichen (oder überhaupt) CSS/HTML-Markup-Kenntnisse haben müssen, oder? Das ist was ich mache:

In meiner Markdown-Datei weise ich einfach alle Wiki-Editoren an, alle Bilder mit etwas einzubetten, das so aussieht:

'<div> // Put image here  </div>`

(natürlich .. sie wissen nicht was <div> bedeutet, aber das sollte egal sein)

Die Markdown-Datei sieht also so aus:

<div>
![optional image description][1]
</div>

[1]: /image/path

Und in dem CSS-Inhalt, der die ganze Seite umschließt, kann ich mit dem Bild-Tag tun, was ich will:

img {
   float: right;
}

Natürlich können Sie mit dem CSS-Inhalt mehr anfangen ... (In diesem speziellen Fall verhindert das Umbrechen des Tags img mit div, dass anderer Text gegen das Bild umbrochen wird. Dies ist jedoch nur ein Beispiel.) Aber IMHO ist der Punkt von Markdown , dass Sie nicht möchten, dass potenziell nicht-technische Leute in die Besonderheiten von CSS/HTML eintauchen Ihnen als Webentwickler ist es ein Anliegen, Ihren CSS-Inhalt so allgemein und übersichtlich wie möglich zu gestalten, aber Ihre Redakteure müssen das auch nicht wissen.

2
abbood

Ich hatte die gleiche Aufgabe und habe meine Bilder nach rechts ausgerichtet, indem ich Folgendes hinzufügte:

<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>

Ersetzen Sie, um das Bild nach links oder in der Mitte auszurichten

<div style="text-align: right">

mit

<div style="text-align: center">
<div style="text-align: left">
1
Zuha Karim