Das Standarddesign von Code Blöcken, erstellt mit dem Gutenberg Editor, sieht zwar ordentlich aus aber es geht besser.
Wie immer kommt es beim Design auf Details an. Dazu gehört auch die Design Anpassung von Code Blöcken.
Hier ein einfaches CSS Design im vorher/nachher Vergleich, mit dem sich deine Code Blöcke professioneller präsentieren.
Je nachdem welches Theme du verwendest kann die Darstellung deines Code Blocks abweichen. Ich verwende das WordPress Theme GeneratePress.
Für das oben gezeigte Design füge einfach folgenden Code in dein Custom CSS oder style.css im Child-Theme ein:
/* Code Block Hintergrund und Schriftfarbe */
.wp-block-code {
background: #322931;
border-radius: 2px;
color: #F3F3F3;
}
/* Code Block Dateiname Design */
.wp-block-code:before {
display: table;
margin: 0px 0px 10px auto;
padding: 5px 10px;
font-size: 16px;
background-color: #F3F3F3;
color: #E80009;
border-radius: 2px;
}
/* Code Block Dateiname mit Pseudo Element einfuegen */
.rp-functionsphp:before {
content: 'functions.php';
}Im nächsten Schritt weise dem gewünschten Code Block die Klasse rp-functionsphp im WordPress Admin zu. Damit wird der Text functions.php im Code Block rechts oben angezeigt.
Für einen weiteren Dateinamen ergänze dein CSS:
/* Code Block Dateiname mit Pseudo Element einfuegen */
.rp-stylecss:before {
content: 'style.css';
}Für eine linksbündige oder zentrierte Ausrichtung des Dateinamens ändere einfach folgende Zeile im CSS:
/* Linksbündig */
margin: 0px auto 10px 0px;
/* Zentriert */
margin: 0px auto 10px auto;CSS bietet eine einfache und effiziente Methode zur professionellen Gestaltung deiner Code Blöcke.
Alternativ gibt es eine Reihe von Plugins wie das Code Block Plugin von Advanced Gutenberg Blocks.
Ein Plugin erledigt zwar die Arbeit eleganter, jedoch kostet ein Plugin immer Performance – im Gegensatz zur CSS Variante.
