Standardmässig ist es nicht möglich, Markdown in HTML-Code einzubinden. Das kann sich zum Beispiel dann nachteilig auswirken, wenn man mit HTML-Gestaltungsvorlagen arbeitet, wie sie auf den Webseiten der jeweiligen CSS-Frameworks zur Verfügung gestellt werden. So kann hier eine Vorlage für den Einsatz im Quark-Theme heruntergeladen werden, mit der ein 3-spaltiges «responsive» Layout erzeugt wird. Möchte man nun beispielsweise eine der Spalten mit einer Überschrift beginnen, müsste HTML-Code eingegeben werden (z.B. <h3>Überschrift</h3>
), was an und für sich noch kein grösserer Problem darstellt. Umständlicher, wird es, wenn ein Bild eingebunden werden soll. Auch hier müsste HTML-Code eingesetzt und der Nachteil in Kauf genommen werden, dass der HTML-Bildpfad (<img src="..." alt="...">
) bei jeder grösseren Änderung angepasst werden müsste (z.B. Namensänderung der Seite).
<div class="container">
<div class="columns">
<div class="column col-xs-6">col-xs-6</div>
<div class="column col-xs-3">col-xs-3</div>
<div class="column col-xs-3">col-xs-3</div>
</div>
</div>
markdown="1"
erweitern: <div class="container">
<div class="columns">
<div class="column col-sm-12" markdown="1">col-xs-6</div>
<div class="column col-sm-12" markdown="1">col-xs-3</div>
<div class="column col-sm-12"markdown="1">col-xs-3</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column col-sm-12" markdown="1">
#### Überschrift 1
![Bild01](Bild01.jpg "Bild01")
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="column col-sm-12" markdown="1">
#### Überschrift 2
![Bild02](Bild02.jpg "Bild02")
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="column col-sm-12"markdown="1">
#### Überschrift 3
![Bild03](Bild03.jpg "Bild03")
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
Resultat
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
vorheriger Beitrag nächster Beitrag
Kommentar hinzufügen