Ausrichtung Abschlag und Bild
https://stackoverflow.com/questions/255170
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich erstelle eine Website, die Artikel in Ausgaben jeden Monat veröffentlicht. Es ist einfach, und ich denke, einen Abschlags-Editor (wie die WMD hier in Stack-Überlauf ) wäre perfekt.
Doch sie die Fähigkeit brauchen Bilder zu haben rechtsbündig in einem bestimmten Absatz .
Ich kann nicht einen Weg zu tun, dass mit dem aktuellen System sehen - ist es möglich,
?Lösung
Sie können HTML in Markdown einbetten, so dass man etwas tun kann:
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
Andere Tipps
Viele Markdown „extra“ Prozessoren unterstützen Attribute. So können Sie einen Klassennamen enthalten wie so (PHP Markdown Extra):
{.callout}
oder alternativ (Maruku, Kramdown , Python Markdown ):
{: .callout}
Dann, natürlich können Sie einen Stylesheet die richtige Art und Weise verwenden:
.callout {
float: right;
}
Wenn Sie diese Syntax unterstützt, es gibt Ihnen das Beste aus beiden Welten:. Keine eingebettetes Markup, und ein Stylesheet abstrakt genug, um nicht brauchen, indem Sie Ihren Content-Editor geändert wird
fand ich eine schöne Lösung in reine Markdown mit einem kleinen CSS 3 Hack : -)
die CSS-3-Code float Bildern Folgen Sie auf dem linken oder rechten Seite, wenn der 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;
}
Einbetten von CSS ist schlecht:
CSS in einer anderen Datei:
img[alt=Flowers] { float: right; }
Ich mag Super faul sein durch die Tabellen unter Verwendung von Bildern mit der vertikalen Rohr (|) Syntax auszurichten. Dies wird von einigen Markdown Aromen unterstützt (und wird auch von Textile unterstützt wenn das schwimmt Ihr Boot):
| I am text to the left |  |
oder
|  | I am text to the right |
Es ist nicht die flexibelste Lösung, aber es ist gut für die meisten meiner einfachen Bedürfnisse, ist einfach in Abschlags-Format zu lesen, und Sie brauchen keine CSS oder HTML roh zu erinnern.
Ich habe eine Alternative zu den Verfahren, die oben, dass die ALT-Tag und einen CSS-Selektor auf der Alt-Tag verwendet ... stattdessen eine URL-Hash wie folgt hinzu:
Sie zuerst Ihre Markdown Bildcode:
Beachten Sie den zusätzlichen URL-Hash #center.
Jetzt diese Regel in CSS hinzufügen CSS 3 Attributselektoren unter Verwendung von Bildern mit einem bestimmten Pfad zu wählen.
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}
Es sollte möglich sein, eine URL-Hash wie dies wie einen Klassennamen fast zu verwenden, zu definieren und es ist kein Missbrauch der ALT-Tag wie einige Leute für diese Lösung kommentierte hatte. Es wird auch keine zusätzliche Erweiterungen erforderlich. Führen Sie einen für Schwimmer rechts und links als auch oder andere Arten, die Sie möchten.
Noch sauberer wäre, nur p#given img { float: right } im Stylesheet zu setzen, oder in den <head> und in style Tags gewickelt. Dann einfach den Abschlag  verwenden.
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
Das Attribut markdown Möglichkeit innerhalb Markdown.
Ich mochte learnvst Antwort die Tabellen verwenden, weil es gut lesbar ist (das ist ein Ziel Abschriften des Schreibens).
Doch im Fall von GitBook des Markdown-Parser Ich hatte neben einem leeren Kopfzeile, eine Trennlinie unter ihm hinzufügen, für die Tabelle erkannt und richtig wiedergegeben werden:
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
Trennlinien müssen mindestens drei Striche --- aufzunehmen.
Wenn Sie es in Python implementieren, gibt es Erweiterung , mit dem Sie hinzufügen HTML Schlüssel / Wert-Paare und Klasse / id Etiketten. Die Syntax ist hierfür lautet:
{: style="float:right"}
Oder, wenn eingebettete Styling Ihr Boot nicht schwimmen,
{: .floatright}
mit einem entsprechenden Sheet stylish.css:
.floatright {
float: right;
/* etc. */
}
Wie greg sagte HTML-Inhalte in Markdown einbetten können, aber einer der Punkte von Markdown ist zu vermeiden, die haben umfangreiche (oder überhaupt, was das betrifft) CSS / HTML-Markup Wissen, nicht wahr? Das ist, was ich tue:
In meinem Markdown-Datei anweisen ich einfach alle meine Wiki Editoren wickeln alle Bilder mit etwas einzubetten, die wie folgt aussieht:
'<div> // Put image here </div>`
(natürlich .. sie wissen nicht, was Mittel <div>, aber das sollte keine Rolle spielen)
So ist die Markdown-Datei sieht wie folgt aus:
<div>
![optional image description][1]
</div>
[1]: /image/path
Und in den CSS-Inhalten, die die ganze Seite Wraps kann ich tun, was ich mit dem Image-Tag will:
img {
float: right;
}
Natürlich können Sie mehr tun, mit dem CSS-Inhalt ... (in diesem speziellen Fall, Wickel des img Tag mit div wickelt gegen das Bild, anderen Text verhindert ... dies ist nur ein Beispiel, wenn auch), aber IMHO der Punkt von Markdown ist, dass Sie nicht möglicherweise technisch nicht versiert Leute wollen die in und outs von CSS / HTML einlassen .. es sind Sie als Web-Entwickler auf Ihren CSS-Inhalt zu machen, die Wraps die Seite als generisch und sauber wie möglich, aber dann wieder Ihre Redakteure wissen müssen nicht darüber.
Ich hatte die gleiche Aufgabe, und ich ausgerichtet meine Bilder nach rechts durch das Hinzufügen von:
<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>
Für das Bild nach links oder in der Mitte ausgerichtet wird, ersetzen
<div style="text-align: right">
mit
<div style="text-align: center">
<div style="text-align: left">
Einfachstes ist das Bild in einem Mitte-Tag zu wickeln, wie so ...
<center></center>
Alles, was mit Markdown zu tun, hier getestet werden kann - http://daringfireball.net/projects/markdown/ dingus
Sicher, <center> veraltet sein können, aber es ist einfach und es funktioniert!
