Markdown und Bildausrichtung

Question

Ich erstelle eine Website, die jeden Monat Artikel zu verschiedenen Themen veröffentlicht. Es ist unkompliziert, und ich denke, die Verwendung eines Markdown-Editors (wie z.B. WMD hier bei Stack Overflow) wäre perfekt.

Allerdings brauchen sie die Möglichkeit, Bilder rechts ausgerichtet in einem bestimmten Absatz zu haben.

Ich sehe keinen Weg, das mit dem aktuellen System zu tun - ist das möglich?

Answer 1

Sie können HTML in Markdown einbetten, sodass Sie etwas wie folgt tun können:

Fortsetzung des Markdown-Textes...

Answer 2

Ich habe eine schöne Lösung in purem Markdown mit einem kleinen CSS 3 Hack gefunden :-)

![Bildbeschreibung >](/bild-rechts.jpg)
![Bildbeschreibung <](/bild-links.jpg)
![Bildbeschreibung ><](/bild-center.jpg)

Folgen Sie dem CSS 3 Code, um das Bild links oder rechts schweben zu lassen, wenn die Bildbeschreibung mit < oder > endet.

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

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

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

Answer 3

Viele Markdown-"extra"-Prozessoren unterstützen Attribute. So können Sie zum Beispiel einen Klassennamen hinzufügen (PHP Markdown Extra):

![Blumen](/blumen.jpeg){.callout}

oder alternativ (Maruku, Kramdown, Python Markdown):

![Blumen](/blumen.jpeg){: .callout}

Dann können Sie natürlich auch ein Stylesheet auf die richtige Weise verwenden:

.callout {
    float: right;
}

Wenn Ihr System diese Syntax unterstützt, haben Sie das Beste aus beiden Welten: keine eingebettete Markup-Sprache und ein Stylesheet, das abstrakt genug ist, um nicht vom Inhalt bearbeitet werden zu müssen.

Answer 4

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

Zuerst Ihr Markdown-Bildcode:

![mein Bild](/img/meinBild.jpg#left)
![mein Bild](/img/meinBild.jpg#right)
![mein Bild](/img/meinBild.jpg#center)

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

Fügen Sie jetzt diese Regel in CSS hinzu, verwenden Sie CSS 3-Attributselektoren, 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 fast wie die Definition eines Klassennamens zu verwenden, und es ist keine Missbrauch des ALT-Tags wie von einigen Leuten für diese Lösung kommentiert wurde. Es erfordert auch keine zusätzlichen Erweiterungen. Machen Sie auch eins für float right und left oder andere Stile, die Sie möchten.

Answer 5

Ich mag es, super faul zu sein und Tabellen zu verwenden, um Bilder mit der vertikalen Leitungsstrich (|) Syntax auszurichten. Dies wird von einigen Markdown-Varianten unterstützt (und wird auch von Textile unterstützt, wenn das dein Ding ist):

| Ich bin Text links  | ![Blumen](/blumen.jpeg) |

oder

| ![Blumen](/blumen.jpeg) | Ich bin Text rechts |

Es ist nicht die flexibelste Lösung, aber es ist gut für die meisten meiner einfachen Bedürfnisse, einfach im Markdown-Format zu lesen, und du musst dich nicht an irgendwelche CSS oder Raw-HTML erinnern.