Markdown und Bildausrichtung

Ich mache eine Website, die veröffentlicht Artikel zu Themen in jedem Monat. Es ist einfach, und ich denke, mit einem markdown-editor (wie die MVW hier bei StackOverflow) wäre perfekt.

Jedoch Sie brauchen die Fähigkeit, Bilder, die Rechtsbündig in einem bestimmten Absatz.

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

Kommentar zu dem Problem

Beachten Sie, dass abhängig von der Plattform können Sie Filter hinzufügen, um markdown. So kann es möglich sein, add-syntax, die angibt, Ausrichtung. Kommentarautor: Jordan Reiter

Warum nicht einfach die Frage stellen ohne das "ich helfe einem Freund bei einer non-profit-Website, die publiziert Artikel zu Themen in jedem Monat"? Kommentarautor: JGallardo

@JGallardo Da wollte ich klarstellen, ich habe nicht die vollständige Kontrolle über das system, noch habe ich die Möglichkeit zum Kauf von irgendeiner Art von Lösung. Ich bin damit einverstanden, dass ich haben könnte, formulierte die Frage anders. Kommentarautor: Jedidja

Bezüglich der markdown-Editoren, die Sie verwenden können, die große stackedit.io/editor# , es ist genial zu schreiben 🙂 Kommentarautor: AbdelHady

@AbdelHady, wenn nur es war in 2008 🙂 Kommentarautor: Jedidja

InformationsquelleAutor der Frage Jedidja | 2008-10-31

133

Können Sie einbetten von HTML in Markdown, so können Sie etwas wie das hier tun:
```
<img style="float: right;" src="whatever.jpg">

Continue markdown text...
```
InformationsquelleAutor der Antwort Greg Hewgill
42

Viele Markdown "extra" - Prozessoren unterstützen Attribute. So können Sie auch einen Klasse Namen haben, wie so (PHP-Markdown-Extra):
```
![Flowers](/flowers.jpeg){.callout}
```
oder alternativ (Maruku, Kramdown, Python-Markdown):
```
![Flowers](/flowers.jpeg){: .callout}
```
Dann, natürlich, können Sie ein stylesheet, der richtige Weg:
```
.callout {
    float: right;
}
```
Wenn dir diese syntax unterstützt, es gibt Ihnen das beste aus beiden Welten: kein embedded markup und stylesheet Abstrakt genug, um nicht brauchen, um geändert werden, indem Sie Ihre content-editor.

InformationsquelleAutor der Antwort gerwitz
22

Einbettung von CSS ist schlecht:
```
![Flowers](/flowers.jpeg)
```
CSS in einer anderen Datei:
```
img[alt=Flowers] { float: right; }
```
InformationsquelleAutor der Antwort

Ich bin gefunden schöne Lösung in reinem Markdown mit ein wenig CSS3-hack 🙂

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

Folgen CSS3-code-float-Bild auf der linken Seite oder rechts, wenn die Bilder 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;
}

InformationsquelleAutor der Antwort OzzyCzech

16

Mag ich super faul mit Tabellen, Bilder ausrichten mit dem vertikalen Rohr ( | ) - syntax. Unterstützt wird dies durch einige markdown-Aromen (und wird auch unterstützt durch Textil -, wenn das schwimmt Ihr Boot)
```
| I am text to the left  | ![Flowers](/flowers.jpeg) |
```
oder
```
| ![Flowers](/flowers.jpeg) | I am text to the right |
```
Nicht die flexibelste Lösung, aber es ist gut für die meisten der meinen einfachen Anforderungen, ist leicht zu Lesen im markdown-format, und Sie brauchen nicht zu erinnern, alle CSS-oder raw-HTML.

InformationsquelleAutor der Antwort learnvst
8

Sogar sauberer wäre, nur p#given img { float: right } im Stylesheet oder in der <head> und eingewickelt in style - tags. Dann verwenden Sie einfach die markdown ![Alt text](/path/to/img.jpg).

InformationsquelleAutor der Antwort ma11hew28

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

Dem Attribut markdown Möglichkeit innerhalb markdown.

InformationsquelleAutor der Antwort

6

Wenn Sie es implementieren in Python, es ist eine Erweiterung , können Sie fügen Sie den html Schlüssel/Wert-Paare, und die Klasse/id labels. Die syntax HIERFÜR lautet:
```
![A picture of a cat](cat.png){: style="float:right"}
```
Oder, wenn die eingebetteten styling nicht schweben Ihr Boot,
```
![A picture of a cat](cat.png){: .floatright}
```
mit entsprechenden stylesheet stylish.css:
```
.floatright {
    float: right;
    /* etc. */
}
```
InformationsquelleAutor der Antwort jameh
3

Habe ich eine alternative auf der oben genannten Methoden verwendet, die den ALT-tag und einen CSS-Selektor, auf den alt-tag.. stattdessen fügen Sie einen URL-hash wie dieser:

Ersten Ihren markdown-Bild-code:
```
![my image](/img/myImage.jpg#center)  
```
Beachten Sie die zusätzlichen url-hash # - center.

Nun fügen Sie diese Regel in CSS mit CSS3 Attribut-Selektoren zur Auswahl von Bildern mit einem bestimmten Pfad.
```
img[src*='#center'] { 
    display: block;
    margin: auto;
}
```
Sollten Sie in der Lage, einen url-hash wie dieser fast wie die Definition der name einer Klasse, und es ist nicht ein Missbrauch der ALT-tag, wie einige Leute hatten, wie etwa für diese Lösung. Ebenso ist es nicht erforderlich, alle zusätzlichen Erweiterungen. Eine für float rechts und Links oder alle anderen Formate, die Sie wünschen.

InformationsquelleAutor der Antwort tremor
2

Als greg sagte Sie können beim einbetten von html in markdown.. aber einer der Punkte, der Bewertungsabschlag ist zu vermeiden, dass große (oder überhaupt, für diese Angelegenheit) css/html-markup wissen richtig? Dies ist, was ich Tue:

in meinem markdown-Datei, die ich einfach anweisen, alle meine wiki-Editoren einbetten wickeln Sie alle Bilder, die mit etwas, das aussieht wie dieses
```
'<div> //put image here  </div>`
```
(natürlich.. Sie donno was <div> bedeutet aber, dass sollte keine Rolle spielen)

damit die markdown-Datei sieht wie folgt aus:
```
<div>
![optional img description][1]
</div>

[1]: /image/path
```
und in der css-umschließt die ganze Seite, ich kann tun was ich will mit der image-tag:
```
img {
   float: right;
}
```
natürlich können Sie mehr tun mit dem css.. (in diesem speziellen Fall, das einwickeln der img mit div verhindert, dass text umgebrochen wird gegen das Bild.. das ist nur ein Beispiel) aber IMHO der Punkt, der markdown ist, dass Sie nicht möchten, dass potenziell nicht-technische Leute, die in die ins und outs der css/html.. es ist bis zu Ihnen, wie ein web-dev, um Ihren css-umschließt, die die Seite als generische und sauber wie möglich, aber dann wieder Ihre Redakteure müssen nicht wissen, dass.

InformationsquelleAutor der Antwort abbood
2

Ich mochte learnvst Antwort der Verwendung der Tabellen, da ist es durchaus lesbar (was ist ein Zweck der schreiben von Markdown).

Jedoch, im Fall von GitBook die Markdown-parser musste ich, neben eine leere Kopfzeile, fügen Sie eine Trennlinie unter der Tabelle anerkannt werden und ordnungsgemäß gerendert:
```
| - | - |
|--- | ---|
| I am text to the left  | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |
```
Trennlinien müssen mindestens drei Bindestriche --- .

InformationsquelleAutor der Antwort icarito
1

Hatte ich die gleiche Aufgabe, die ich ausgerichtet, meine Bilder auf der rechten Seite durch hinzufügen dieses:
```
<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>
```
Zur Ausrichtung Ihres Bild nach rechts oder center, ersetzen
```
<div style="text-align: right">
```
zu
```
<div style="text-align: center">
<div style="text-align: right">
```
InformationsquelleAutor der Antwort Zuha Karim
-16

Einfachsten ist es, wickeln Sie das Bild in einen center-tag, wie so ...
```
<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>
```
Nichts zu tun mit Markdown kann hier überprüft werden - http://daringfireball.net/projects/markdown/dingus

Sicher, <center> möglicherweise veraltet, aber es ist einfach und es funktioniert!

InformationsquelleAutor der Antwort yoyo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.