Inline Quelltext mit Tag <pre> für Codeblock und <code> im Textverlauf

HTML-Tag <pre> für Codeblock und <code> für Inline Quelltext im Textverlauf.

In Anwendung WP-Editor Visuellmodus der Pre-Tag per „Vorformatiert“ (unter Absatz und Überschriftenformatierung) und im Textmodus der Code-Tag von Button „code“ im Textverlauf die korrekte Codeauszeichnung gewährleisten.

Empfehlung für das Plug-in Crayon Syntax Hightliter folgend, bleibe ich nach Antesten auch der hierzu verschiedenen „Code-Sprachen“ bei der von WP vorgegebenen Version des <pre> Tags.

Kurzer Kommentar:

Plug-in Crayon Syntax Highlighter hebt mithin dezentem Aussehen des Designs die Syntaxen hervor, anstatt wie alleinigen <pre> Tags. – Die Einstellungen sind vielfältig und hiermit gehört gewisse Einarbeitung dazu, besonders der Shot Codes, Tag und einer geeigneten „Sprache“ zur Codedarstellung. Aber ein Reset-Button (Einstellungen zurücksetzen) führt zur Grundeinstellung und fast alles ist in Deutsch beschrieben.

Kleine Designanpassung des visuellen Headers von Crayon Syntax Highlighter :

.crayon-syntax, .crayon-main {
 padding: 4px;
 border-radius: 2px;
}

Tags <pre> und <code> CSS-Styling

Designierten Code im Beitrag mit <pre> Tag ohne Plug-in, s. Hinweis.

Obigen Hiweis folgend, nach Belieben zu reduzieren oder alles in allem in den CSS Stylesheet Editor, also z. B.:

/*Inline Quelltext im Codeblock*/
pre {
 border: 1px solid #f6f7f8;
 background: #f9f9f9;
 padding: 10px;
 border-radius: 5px;
 overflow: auto;
 margin: 0 0 15px;
 max-width: 100%;
 font-family: 'Courier New', Consolas, Monaco,
 monospace;
 font-size: 1rem;
 color: #363636;
}

/*Inline Quelltext im Textverlauf*/
code {
 background: #f9f9f9;
 padding: 2px;
 font-family: 'Courier New', Consolas, Monaco,
 monospace;
 color: #363636;
}
Betreff Markup <code>

Zur konformen Darstellung des Markups des Paddings möchte im Editor (Text) darauf gedacht sein, dass <code>an den Textcode angefügt </code> und davor wie danach das Leerzeichen eingefügt ist.

Visuell, CSS original:

Zur konformen Darstellung des Markups des Paddings möchte im Editor (Text) darauf geachtet sein, dass <code>an den Textcode angefügt</code> und davor wie danach das Leerzeichen eingefügt ist.