Helmuts Weblog

»Die Basis einer gesunden Ordnung ist ein großer Papierkorb.« – Kurt Tucholsky


Markdown-Design

Ich habe mal ein kleines CSS im Markdown-Design geschrieben. Sieht ganz toll aus, wie ich finde. 🤗

Das CSS regelt dabei folgende Dinge automatisch: kursiver und fetter Text; Inline-Code sowie Code-Blöcke im pre-Element:

pre {
    background-color: #EFEFEF;
    white-space: pre-wrap;
    padding: 5px;
    border: 1px solid #E6E6E6;
    white-space:pre-line;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

Hinzu kommen natürlich noch die Aufzählungen (<ol> spare ich mir mal, da ändert sich ja nichts):

Nicht zu vergessen die Überschriften:

Erster Ordnung

Zweiter Ordnung

Dritter Ordnung

Vierter Ordnung

Das Suffix im Titel ist so entstanden: a.site-title::after { content: '.md';}. Steht aber auch alles im Quelltext jeder Seite. Wer das also kopieren möchte: nur zu.

Einen Kompromiss bin ich bei den Links (ohne URL in Klammern dahinter) sowie bei dem Seitentitel (weder eckige noch runde Klammern) eingegangen, da das sonst dann doch zu unübersichtlich wird. Das kann man aber, so denke ich, einigermaßen verschmerzen.

In Kombination mit Pygments

Update (2019-02-24): Mir ist aufgefallen, dass mein CSS mit Pygments kollidiert, da hier dann innerhalb des pre-Elements automatisch weitere code-Elemente gesetzt werden.

Mit…

pre > code::before { content: ''; }
pre > code::after { content: '';}

…konnte ich das aber ganz elegant lösen. Jetzt werden die von Pygments gesetzten code-Elemente unterhalb der pre-Elemente genau so dargestellt, wie das auch im Texteditor der Fall wäre.

Tags: #tech, #blog, #css, #html, #markdown, #syntaxhighlighting, #pygments, #txt