| updated: | 2023 24. October |
| published: | 2021 24. August |
Markdown anpassen
Gohugo Markdownelemente mit CSS anpassen.Anpassen einer Überschrift an ein eigenes Style.
In Markdown wird eine Überschrift eingeleitet mit den Hashzeichen #. Das Style der Überschrift kann in einer CSS-Datei angepasst werden.
h4 {
margin-top: 1em;
color: red;
}
Aufruft über CSS/Selector class
Um nun neben diesem Style ein anderes (zweites) Style für die Überschrift <h4> in Markdown anzuwenden, wird einfach eine Elementklasse custom für das Html-Element <h4> angelegt.
h4 {
margin-top: 1em; /* Abstand */
color: red; /* Textfarbe */
&.custom {
margin-top: 5em;
color: gray;
}
}
In Markdown wird diese spezielle Überschrift wie folgt aufgerufen:
#### Überschrift {class=custom}
Aufruft über CSS/Selector ID
Anstatt eines Klasseselectors kann auch eine ID verwendet werden. Ein ID-Selector wird mit dem Hashzeichen # gefolgt von einer eindeutigen Bezeichnung eingeleitet (z.B #customID).
h4#customID {
margin-top: 5em;
color: gray;
}
Ein Aufruf in Markdown erfolgt dann so:
#### Überschrift {#customID}
Hinweis: Es wird zwischen Groß- und Kleinschreibung unterschieden.
Entfernen der Symbole bei Aufzählungslisten
Manchmal ist es wünschenswert das Aufzählungslisten ohne Aufzählungszeichen darzustellen. Dieses Symbol wird mit Hilfe von Shortcodes und CSS entfernt.
Lege folgende Dateien an.
<span class="nolistsymbol"></span>
span.nolistsymbol + ul {
list-style: none;
}
Die Anwendung in Markdown (*.md) erfolgt so:
... mit unerwünschtem Symbol
+ [x] something is DONE.
+ [ ] something is NOT DONE.
Anwendung ohne Symbol (Wichtig: Leerzeile vor {{<nolistsymbol>}})
{{<nolistsymbol>}}
+ [x] something is DONE.
+ [ ] something is NOT DONE.
Ergebnis:
… mit unerwünschtem Symbol
- something is DONE.
- something is NOT DONE.
Anwendung ohne Symbol
- something is DONE.
- something is NOT DONE.
Überschriften mit Kapitelnummerierung
Mit Hilfe eines CSS-Zählers (counter) können Überschriften und Unterüberschriften mit einer fortlaufenden Nummerierung dargestellt werden. Die Nummerierung erfolgt automatisch. Und wie das immer so ist, die hier dargelegten Erkenntnisse stammen aus dem Internet .
Das folgenden Beispiel zeigen zwei Arten der Umsetzung.
Ansprechen mittels Custom-ID = counter in einer Markdowndatei (*.md)
## Überschrift {#count}
Folgende Eigenschaften der Überschriften werden in einer *.scss Datei festlegt.
h2 {
counter-increment: KapNum2;
counter-reset: KapNum3 0;
}
h3 {
counter-increment: KapNum3;
counter-reset: KapNum4 0;
}
h4 {
counter-increment: KapNum4;
}
h2#count:before { content: counter(KapNum2) '\00A0\00A0\00A0\00A0'; }
h3#count:before { content: counter(KapNum2) "." counter(KapNum3) '\00A0\00A0'; }
h4#count:before { content: counter(KapNum2) "." counter(KapNum3) "." counter(KapNum4) '\00A0'; }
Ansprechen mittels Class-ID = counter in einer Markdowndatei (*.md)
## Überschrift {class=counter}
Folgende Eigenschaften der Überschriften werden in einer *.scss Datei festlegt.
h2 {
counter-increment: KapNum2;
counter-reset: KapNum3 0;
&.counter::before {
content: counter(KabNum2) '\00A0\00A0\00A0\00A0';
}
}
h3 {
counter-increment: KabNum3;
counter-reset: KabNum4 0;
&.counter::before {
content: counter(KabNum2) "." counter(KabNum3) '\00A0\00A0';
}
}
h4 {
counter-increment: KabNum4;
&.counter::before {
content: counter(KabNum2) "." counter(KabNum3) "." counter(KabNum4) '\00A0';
}
}
Im Unterschied zur Verwendung einer “Custom-ID” ist die “Class-ID” übersichtlicher.
Letzten Textblock ändern
Ein normaler Text in Markdown wird letztendlich in Html als Absatztext innerhalb des Html-Elements <p> ... <\p> generiert.
Der letzte Textabsatz kann mittels CSS und dem Aufruf von {class="myclass"}, bzw. {.myclass} anders gestalten werden.
Dazu muss in der Konfigurationsdatei config.toml das Block-Attribut eingeschaltet werden.
[markup]
defaultMarkdownHandler = "goldmark"
[markup.goldmark]
[markup.goldmark.parser.attibute]
block = true
Beispiel 1 - Textblock mit Rahmen
Das folgende Stylesheet umrandet den letzten Textblock mit einem grünen Rahmen.
p {
&.TestChangeBlock {
border: 1px solid green;
border-radius: 3px;
padding: 1em 1em 1em 1em;
}
}
Die Anwendung in Markdown (*.md) erfolgt so:
Text im ersten Absatz.
Ein Absatz endet immer mit einer Leerzeile.
Der zweite Absatz wird mit CSS angepasst.
{class="TestChangeBlock"}
Die Gestaltung des dritten Absatzes ist wie der Erste.
Der vierte Absatz ist wie der Zweite.
{.TestChangeBlock}
Ergebnis:
Text im ersten Absatz. Ein Absatz endet immer mit einer Leerzeile.
Der zweite Absatz wird mit CSS angepasst.
Die Gestaltung des dritten Absatzes ist wie der Erste.
Der vierte Absatz ist wie der Zweite.
Beispiel 2 - Textblock in Spalten
Mit ein paar wenigen CSS-Eigenschaften wird ein Textblock spaltenweise angezeigt und die Darstellung wirkt wie ein Zeitungsartikel. Aufgrund des Responsive Design wird je nach Endgerät auch nur eine Spalte angezeigt.
p {
&.col2 {
column-count: 2;
column-rule: 1px solid;
column-width: 15em;
gap: 2em;
}
}
Text Text ...
{.col2}
Ergebnis:
Mustertext für Textlayout: Trapattonis Wutrede März 1998: "Es gibt im Moment in diese Mannschaft, oh, einige Spieler vergessen ihnen Profi was sie sind. Ich lese nicht sehr viele Zeitungen, aber ich habe gehört viele Situationen: Estens - Wir haben nicht offensiv gespielt. Es gibt keine deutsche Mannschaft spielt offensiv und die Namen offensiv wie Bayern. Letzte Spiel hatten wir in Plas drei Spitzen: Elber, Jancker und dann Zickler. Wir mussen nicht vergessen Zickler. Zickler ist eine Spitzen mehr Mehmet e mehr Basler. Ist klar diese Wörter, ist möglich verstehen, was ich hab' gesagt? Danke. Offensiv, offensiv ist wie machen in Platz. Zweite - Ich habe erklär mit diese zwei Spieler: Nach Dortmund brauchen vielleicht Halbzeit Pause. Ich habe auch andere Mannschaften gesehen in Europa nach diese Mittwoch. Ich habe gesehen auch zwei Tage die Training. Ein Trainer ist nicht ein Idiot! Ein Trainer sehen, was passieren in Platz. In diese Spiel es waren zwei, drei oder vier Spieler, die waren schwach wie eine Flasche leer! Haben Sie gesehen Mittwoch, welche Mannschaft hat gespielt Mittwoch? Hat gespielt Mehmet, oder gespielt Basler, oder gespielt Trapattoni? Diese Spieler beklagen mehr als spielen! Wissen Sie, warum die Italien-Mannschaften kaufen nicht diese Spieler? Weil wir haben gesehen viele Male solche Spiel. Haben gesagt, sind nicht Spieler für die italienische Meisters. Struuunz! Strunz ist zwei Jahre hier, hat gespielt zehn Spiele, ist immer verletzt. Was erlauben Strunz? Letzte Jahre Meister geworden mit Hamann eh... Nerlinger. Diese Spieler waren Spieler und waren Meister geworden. Ist immer verletzt! Hat gespielt 25 Spiele in diese Mannschaft, in diesem Verein! Muss respektieren die andere Kollegen! Haben viel nette Kollegen, stellen sie die Kollegen in Frage! Haben keinen Mut an Worten, aber ich weiß, was denken über diese Spieler! Mussen zeigen jetzt, ich will, Samstag, diese Spieler mussen zeigen mich eh ... seine Fans, mussen allein die Spiel gewinnen, mussen allein die Spiel gewinnen. Ich bin müde jetzt Vater diese Spieler, eh, verteidige immer diese Spieler! Ich habe immer die Schulde über diese Spieler. Einer ist Mario, einer, ein anderer ist Mehmet! Strunz dagegen egal, hat nur gespielt 25 Prozent diese Spiel! Ich habe fertig!"