Markdown und Bildausrichtung

189

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

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

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

html css markdown

— Jedidja
quelle

2

Warum nicht einfach die Frage stellen ohne "Ich helfe einem Freund mit einer gemeinnützigen Website, die jeden Monat Artikel in Ausgaben veröffentlicht"?

— JGallardo

11

@JGallardo Weil ich klarstellen wollte, dass ich weder die vollständige Kontrolle über das System hatte noch die Möglichkeit hatte, irgendeine Art von Lösung zu kaufen. Ich bin damit einverstanden, dass ich die Frage anders hätte formulieren können.

— Jedidja

1

In Bezug auf Markdown-Editoren können Sie die großartige Datei stackedit.io/editor# verwenden . Es ist fantastisch, darin zu schreiben :)

— AbdelHady,

1

@AbdelHady, wenn es nur im Jahr 2008 verfügbar gewesen wäre :)

— Jedidja

1

@iPython Wie kann eine Frage aus dem Jahr 2008 ein Duplikat einer Frage sein, die 4 Jahre später (2012) gestellt wurde?

— Jedidja

191

Sie können HTML in Markdown einbetten, um Folgendes zu tun:

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

Continue markdown text...

— Greg Hewgill
quelle

42

Bereinigen und standardisieren Sie es, indem Sie das Unnötige entfernen divund dem imgTag einen abschließenden Schrägstrich hinzufügen , dh `<img style =" float: right "src =" Whatever.jpg "/>

— ma11hew28

Anstatt divlieber spanfür Inline-Einrückungen zu verwenden. Für eine vollständige Absatzzentrierung divist gut oder sogar einfach p.

— Auge

21

Dies funktioniert besser mit einigen bereinigten Interpreten wie dem GitHub: <img align = "right" src = "Whatever.jpg" />

— benweet

19

@MattDiPasquale Schrägstriche sind nicht erforderlich. Das ist XHTML, nicht HTML.

— CaptSaltyJack

Ich habe versucht, ein Bild in einen Ghost-Blog-Beitrag einzubetten. Mit <div style = "float: right"> <img ...> </ div> floss der folgende Absatz korrekt um das Bild, während <img style = "float: right" ...> den Absatz und das Bild einfügte in Side-by-Side-Boxen.

— Martin DeMello

57

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

![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 altmit <oder endet >.

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

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

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

— OzzyCzech
quelle

Wo soll das CSS im MkDocs-Verzeichnis abgelegt werden? @YannDuran

— Ivan Huang

1

@IvanHuang stellen Sie einfach sicher, dass Sie eine extra.css- Datei gemäß der MkDocs-Dokumentation hinzufügen und die CSS in diese Datei einfügen.

— Yann Duran

54

Viele "zusätzliche" Markdown-Prozessoren unterstützen Attribute. Sie können also einen Klassennamen wie diesen 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 richtig verwenden:

.callout {
    float: right;
}

Wenn Ihre Syntax diese 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.

— gerwitz
quelle

Bis du das alles schreibst :! Blumen {: .callout} Sie können auch <img src = "/ Flowers.jpeg" class = "callout" />

— lfalin

1

Ich stimme zu, aber Markdown wird häufig für Benutzer gewählt, die nicht über * ML-Kenntnisse verfügen. Daher gibt es keinen Grund, HTML einer anderen willkürlichen Syntax vorzuziehen.

— Gerwitz

4

("Kein Grund" ist natürlich zu stark vereinfacht. Es gibt viele UX-Gründe, aus denen Ihre Editoren möglicherweise näher oder weiter vom endgültigen HTML-Rendering entfernt sein sollen. Oder Sie sind abgeneigt, eine HTML-Abhängigkeit in Ihren Inhalt einzuführen, wenn Sie dies tun

— Ich habe

33

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

Zuerst Ihren 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 nun in CSS hinzu, indem Sie CSS 3-Attributselektoren verwenden, 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 das Definieren eines Klassennamens zu verwenden, und es ist kein Missbrauch des ALT-Tags, wie ihn einige Leute für diese Lösung kommentiert hatten. Es werden auch keine zusätzlichen Erweiterungen benötigt. Machen Sie einen für Float rechts und links oder für andere Stile, die Sie vielleicht wollen.

— Tremor
quelle

1

Genau das, wonach ich gesucht habe. Du bist ein Lebensretter. Eine Sache, die ich hinzufügen möchte, ist `` `h1 h2 {clear: both}` `` Damit die nächste Überschrift in einer neuen Zeile beginnt (nicht mit dem Bild überlappt)

— bhar1red

sieht aus wie das, wonach ich suche, aber ... wie mache ich ein CSS? und wie nenne ich es in Markdown?

— Tony D

Dies ist auch eine großartige Lösung wie meine :)

— OzzyCzech

3

@OzzyCzech - Nein, nicht wirklich, Ihre Lösung missbraucht das Bild "alt" -Tag, was für die Einhaltung der Barrierefreiheit auf einer Seite, auf der diese Lösung einen Nicht-Invasions-Ansatz über das src-Tag verwendet, schlecht sein kann.

— Zittern

24

Das Einbetten von CSS ist schlecht:

![Flowers](/flowers.jpeg)

CSS in einer anderen Datei:

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

67

Was? Jetzt müssen Sie plötzlich jedes Mal eine externe Datei bearbeiten, wenn Sie den Markdown-Inhalt ändern? Klingt für mich nicht nach einer guten Lösung.

— Jordan Reiter

9

@JordanReiter Jeder hier hat ein Programm geschrieben, das aus mehr als einer Datei besteht, in der die Logik über viele Orte verteilt / organisiert ist. Wir tun dies absichtlich aus Gründen der Wartbarkeit. Warum ist das so schmerzhaft und schrecklich anders?

— z5h

8

Mit Markdown können Benutzer ohne Programmierer Inhalte erstellen. Dies sollte nicht von Dateien abhängig sein, auf die direkt auf dem Server zugegriffen und diese bearbeitet werden müssen. Ein weiteres Beispiel: Ich denke, es ist völlig normal, die Namen von Feldern in einer Datenbank in Ihren Code fest zu codieren, aber ein Fehler bei der Hardcodierung basierend auf dem Wert eines Felds in Ihrer Datenbank (dh if product.name == 'Tulips'), da Sie sich nicht auf das verlassen können Stabilität des Wertes. Alles was man braucht , ist jemand Wechsel Flowerszu Flowerund plötzlich das Bild erscheint die Ansicht aus. Außerdem müssen sie dich jedes Mal anrufen, wenn sie ein Bild hinzufügen!

— Jordan Reiter

24

@cboettig Dies ist ein schwerer Missbrauch des Alt-Tags. Es soll eine Textbeschreibung des Bildes für Personen sein, die das Bild nicht sehen können.

— Nathan Grigg

5

Ich bin erstaunt, dass so viele Menschen über diese Lösung weinen. Dies ist ein wunderschöner Hack, der zur Lösung eines Problems für bestimmte Hosting-Dienste erforderlich ist. Das Plakat, das diesen schönen Hack gegeben hat, ist jetzt weg und stattdessen bleibt die Community mit Heulsusen zurück.

— Aaron Robinson

22

Ich mag es super faul zu sein, wenn ich Tabellen verwende, um Bilder an der vertikalen pipe ( |) -Syntax auszurichten . Dies wird von einigen Markdown-Varianten unterstützt (und wird auch von Textile unterstützt, wenn dies 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 leicht im Markdown-Format zu lesen und Sie müssen sich kein CSS oder rohes HTML merken.

— lernen
quelle

2

Ich mag diesen Stil, sehr markdown-y. Schade, dass es auf Github nicht funktioniert (noch nicht.)

— Eliot

3

Ich habe gerade diese Syntax bei GitHub ausprobiert und sie scheint jetzt zu funktionieren.

— Ege Rubak

6

Dies ist ein interessanter Hack, aber er missbraucht Tabellen für das Layout. Willkommen zu 1999.

— jxpx777

3

Fügen Sie für den Markdown mit Github-Geschmack eine Linie mit hinzu |-|-|. Es teilt dem Parser mit, dass es eine Tabelle gibt und die erste Zeile eine Kopfzeile ist. Beispiel: goo.gl/xUCRiK

— Kayla

10

Noch sauberer wäre es, einfach p#given img { float: right }das Stylesheet oder das <head>in styleTags eingewickelte Stylesheet einzulegen. Verwenden Sie dann einfach den Abschlag ![Alt text](/path/to/img.jpg).

— ma11hew28
quelle

8

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

Die Attributmöglichkeit markdownin Markdown.

— Peter Mortensen
quelle

1

Hat für mich gearbeitet. Ich benutze kein Github. Danke @raphox.

— Hugo Tavares

Funktioniert gut mit Michelfs Vanilla Markdown PHP Parser

— Ronan

2

Dies ist die Markdown Extra-Funktionalität, die in einigen Content-Management-Systemen (z. B. Drupal) enthalten ist, jedoch nicht in Markdown per se enthalten ist.

— Tim

7

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

Im Fall des Markdown-Parsers von GitBook musste ich jedoch zusätzlich zu einer leeren Kopfzeile eine Trennzeile hinzufügen, damit die Tabelle erkannt und ordnungsgemäß gerendert wurde:

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

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

— icarito
quelle

7

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

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

Oder wenn das eingebettete Styling Ihr Boot nicht schwimmt,

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

mit einem entsprechenden Stylesheet stylish.css:

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

— Jameh
quelle

2

Wie Greg sagte , können Sie HTML-Inhalte in Markdown einbetten, aber einer der Punkte von Markdown ist, zu vermeiden, dass Sie über umfassende (oder sonstige) CSS / HTML-Markup-Kenntnisse verfügen müssen, oder? Das ist was ich mache:

In meiner Markdown-Datei weise ich einfach alle meine 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 keine Rolle spielen)

Die Markdown-Datei sieht also folgendermaßen aus:

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

[1]: /image/path

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

img {
   float: right;
}

Natürlich können Sie mehr mit dem CSS-Inhalt tun ... (in diesem speziellen Fall imgverhindert das Umschließen des Tags mit div, dass anderer Text gegen das Bild umbrochen wird ... dies ist jedoch nur ein Beispiel), aber meiner Meinung nach der Punkt von Markdown ist, dass Sie nicht möchten, dass potenziell nicht-technische Personen in CSS / HTML einsteigen. Es liegt an Ihnen als Webentwickler, Ihren CSS-Inhalt, der die Seite umschließt, so allgemein und sauber wie möglich zu gestalten, aber dann Auch hier müssen Ihre Redakteure nichts davon wissen.

— Abbood
quelle

1

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

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

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

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

mit

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

— Zuha Karim
quelle

Ich habe es versucht, aber es funktioniert jetzt. Das Bild ist ausgerichtet, aber der HTML-Text wird angezeigt.

— Fiza Khan

-1

diese Arbeit für mich

<p align="center">
 <img src="/LogoOfficial.png" width="300" >
</p>

— Andersonfrfilho
quelle

-16

Am einfachsten ist es, das Bild wie folgt in ein zentrales Tag zu verpacken ...

<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>

Alles, was mit Markdown zu tun hat, kann hier getestet werden - http://daringfireball.net/projects/markdown/dingus

Sicher, <center>vielleicht veraltet, aber es ist einfach und es funktioniert!

— yoyo
quelle

1

Ich habe gerade bemerkt, dass das OP nach der richtigen Ausrichtung gefragt hat. Ich habe versucht, ein Bild zu zentrieren, als ich auf diese Antwort gestoßen bin.

— Jojo

14

Nein, niemals benutzen center.

— Jordan Reiter

12

Ich werde mich tatsächlich auf die Seite von @ yoyo stellen <center>- macht Sinn. Es ist von HTML veraltet, da HTML nur den Inhalt beschreiben soll. Stile sollten in Stylesheets sein. Markdown hat jedoch eine andere Absicht: Es muss genügend Stil vorhanden sein, um eine Textnachricht zu übermitteln, und der Rest bleibt dem Renderer / der Site überlassen. <center>scheint so viel natürlicher zu sein, als über CSS widths, floats, margins ... nachzudenken. - Ich würde sogar so weit gehen, dass ein Markdown-Parser <center>Tags durch geeignete CSS-gestützte Elemente ersetzt, ähnlich wie er derzeit Absätze intelligent herausfindet.

— Slipp D. Thompson