Gunnar Bittersmann: Code-Blöcke in Markdown mit rotem Hintergrund

Beitrag lesen

@@Matthias Scharwies

@Gunnar Bittersmann hat in seinen Antworten teilweise Code-Blöcke mit fehlerhaftem Code rot eingefärbt.

Jetzt habe ich natürlich auch in der Suche nichts gefunden!

Könnt ihr mir eine solche Stelle, oder den Kramdown-Code zeigen?

Du kannst in Markdown für Abschnitte (sei es *, **, _, __, ⁠`⁠) in einem nachgestellten {}-Block Attribute angeben: bspw. _en vogue_{: lang="fr"} ergibt <em lang="fr">en vogue</em>.

Für Klassen gibt es eine Abkürzung: **wichtig**{: .important} bspw. ist das Gleiche wie **wichtig**{: class="important"} und ergibt <strong class="important">. Das wird bei Inline-Code für die language-…-Klassen so verwendet.

Als Attribut kann auch ein Inline-style-Attribut verwendet werden: __rebeccapurple__{: style="background: rebeccapurple; color: white"} ergibt <strong style="background: rebeccapurple; color: white"> und wird als rebeccapurple gerendert.

Bei Markdown-Blöcken steht der {}-Block in einer neuen Zeile:

~~~markdown
# The color rebeccapurple #
~~~
{: style="background: rebeccapurple; color: white"}

wird gerendert als

# The color rebeccapurple #

Wie man an der Trennlinie sieht, geht das auch bei Trennlinien.


Überlegung:

Da man™ rot hinterlegten Quelltext ja wie festgestellt doch desöfteren braucht, sollte man dafür vielleicht eine Klasse vorsehen und die Regel in Forums-Stylesheet schreiben:

.bad { background-color: hsl(0, 100%, 95%) }

Dann kann man einfach `schlechtes Beispiel⁠`⁠{: .bad} bzw.

~~~
schlechtes Beispiel⁠
~~~
{: .bad}

verwenden und es wird schlechtes Beispiel mit rotem Hintergrund gerendert.

Als Gegenstück dazu auch

.good { background-color: hsl(120, 100%, 95%) }

für ein gutes Beispiel.

LLAP 🖖

--
“I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl