CSS-Klassen

die mdmachine mitbringt

C. Bienmüller

2025-08-10

Es gibt es viele Optionen, die pandoc selbst realisiert um z.B. Definitionen zu erzeugen. Diese wiederum habe ich für mich teilweise anders formatiert.
Hier soll es aber um eigene Klassen gehen, die explizit zusätzliche Optionen darstellen.

Allgemeine Gestaltungsoptionen

Man kann die folgenden neuen Klassen meist auf DIVs und tw. auf SPAN einsetzen. Ihre Namen beginnen durchgehend mit “m²_” - quasi ein eigener Namespace.

Die von pandoc selbst verwendeten Klassen findest du hier.

Quelltext für ein DIV

:::{.m²_red .m²_box}
#### Alarm!
Alles so rot hier!
:::

Das Ergebnis:

Alarm!

Alles so rot hier!

Quelltext für SPANs

Ich bin [groß]{.m²_very_large}.

Das Ergebnis:

Ich bin groß.

Größenvarianten (für DIV und SPAN)

m²_smaller
verkleinert Schrift und Zeilenhöhe.

 

m²_small_on_slides, m²_compressed_on_slides
siehe unten unter Slides.

 

m²_larger
vergrößert etwas.

 

m²_very_large
vergrößert die Schrift

 

Demo mit SPANs:

Normal kleiner wieder normal.
Normal größer wieder normal.
Normal sehr groß wieder normal.

Demo mit DIVs:

.m²_smaller: Viel Text. Viel Text. Viel Text. Viel Text. Viel Text. Viel Text. Viel Text. Viel Text. Viel Text. Viel Text. Viel Text. Viel Text. Viel Text. Viel Text.

.m²_larger: Viel Text. Viel Text. Viel Text. Viel Text. Viel Text. Mehr Text. Viel Text. Viel Text. Viel Text. Viel Text. Viel Text. Viel Text.

.m²_very_large: So wenig Text. Riesig!

Strukturen

Marginalien (für SPAN)

Hier ist eineMarginalie durch einen SPAN mit .m²_note. Ist das Browserfenster zu klein oder kein Rand (z.B. Slides) vorhanden, so wird der Text inline und in dicke Klammern gezogen.

Kleine Kästen (für DIV)

m²_kasten_reihe
Ein DIV, das (je nach body-Breite) ca. drei m²_kasten nebeneinander und mehrere untereinander aufnimmt. Auf Slides nur zwei nebeneinander.
m²_kasten
Ein DIV als Kasten in obigem Bereich, abgerundet, Überschrift mit H4 (schwarz und zentriert)
m²_kasten_alt1, m²_kasten_alt2
wie oben mit alternativem Hintergrund, berechnet aus der Grundfarbe +/- 120° im Farbkreis (hue).

 

Hier ein Beispiel:

Kopf

Körper der m²_kasten_alt1

Tête

m²_kasten_alt2

Große Boxen mit abgesetztem Titel

in mindestens acht Farben und verschachtelbar.
Auch hier kann man mit H4 eine passende Überschrift, ergänzt mit einer dunkleren Hintergrundfarbe, gestalten.

Hier als orange Box

Definiert mit den Klassen .m²_orange .m²_box.

Folgende weitere Farben gibt es derzeit:
.m²_yellow, .m²_red,
.m²_blue, .m²_green,
.m²_grey, .m²_cyan,
.m²_magenta

Druckoptionen

Beim Drucken bzw. der PDF-Konvertierung werden automatisch Seitenwechsel eingebaut:

Diese Automatik kann man überstimmen:

m²_new_page
Erzeugt unbedingt eine neue Seite
m²_no_new_page
Hebt einen automatischen Seitenwechsel auf.

Siehe auch Spezialitäten bei PDF-Slides!

Formatierung von Standardelementen

Blockquote (Zitat)
hat links einen Balken, der durch die Farbwahl wie zb. m²_red gefärbt wird. Siehe rechts.

Ich zitiere!

Tabelle
mit einem div.m²_sym_table um eine Tabelle wird diese möglichst symmetrisch gestaltet, z.B. für logische Ausdrücke:
::::m²_sym_table
+----+---+---+
|_OR_| 0 | 1 |
+====+===+===+
|  0 | 0 | 1 |
+----+---+---+
|  1 | 1 | 1 |
+----+---+---+
::::
OR 0 1
0 0 1
1 1 1

Für PDF-Slides

Mit dem YAML-Parameter m²_generate_slides wird zusätzlich eine PDF-Datei im Querformat für Präsentationen generiert.
Dabei ist auch die Überschrift h3 ein Seitentrenner.
Steuern kann man das Aussehen mit folgenden CSS-Klassen, die in anderen Ausgabeformaten keine Wirkung haben:

m²_new_slide
Erzeugt eine neue Seite - aber nur in der Slide-Datei. Diese Klasse hat höhere Priorität als m²_no_new_page - man kann sie daher gezielt kombinieren.
m²_no_new_slide
Verhindert die automatische neue Seite bei z.B. h3
m²_only_on_slides
Der Inhalt wird nur auf Slides wiedergegeben. Wirkt sich also doch auf andere Ausgaben aus :-).
m²_not_on_slides
Der Inhalt wird gerade nicht auf Slides wiedergegeben.
m²_compressed_on_slides m²_small_on_slides

für DIV und SPAN tauglich, small verkleinert die Schriftgröße und -Breite und den Zeilenabstand nur auf Slides, compressed macht nur die Schrift schmaler.
m²_margin_on_slides
Slides haben i.d.R. keinen freien rechten Rand - hiermit schon. Nur damit klappen dort Marginalien.

Bei not_on_slides bzw. only_on_slides gibt es ein kleines Problem, wenn man es auf SPANs anwendet: das ausgeblendete SPAN erzeugt einen Zeilenvorschub. Mit DIVs klappt es problemlos.