kein Zeilenumbruch bei <pre> und <code>

Das liegt wohl nur an Deiner CSS. Für pre-Bereiche verwendest Du overflow:auto, was erst einmal richtig ist, doch eventuell ärgert das white-space: pre-wrap und verhindert bei zu wenig Platz, dass overflow:auto richtig greift. Habe es aber nicht getestet.

Ich arbeite nur mit dem FF unter Windows und wenn ich da mit dem Inspektor nach den Regeln suche, so zeigt der mir an, dass da noch word-wrap: break-word und hyphens von

.site-content article {
    border-bottom: 4px double #ededed;
    margin-bottom: 72px;
    margin-bottom: 5.142857143rem;
    padding-bottom: 24px;
    padding-bottom: 1.714285714rem;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

auf

.entry-content pre,
.comment-content pre {
        border: 1px solid #000000;
        background: #000080;
    color: #FFFFFF;
    font-family: Monospace, Courier New, Monaco, Lucida Console, monospace;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.714285714;
    margin: 24px 0;
    margin: 1.714285714rem 0;
    overflow: auto;
    padding: 24px;
    padding: 1.714285714rem;
}

vererbt wird. Möglich das die Browser damit etwas unterschiedlich umgehen. Weiß jetzt im Augenblick nicht einmal, wie man word-wrap in pre-Bereich verneint oder zur Not mit !important überschreibt, außer mit der Angabe 'normal'. Mit white-space wäre es wohl auch so möglich gewesen:

white-space: nowrap; 


/* oder notfalls mit */
white-space: nowrap !important;

Doch hyphens habe ich entfernt. Du könntest es mit

word-wrap: normal;


/* oder mit */
word-wrap: normal !important;

für pre probieren. Für ältere IE ist es zusätzlich wichtig, dass auch einige Anpassungen in der css/ie.css vorgenommen werden. Zusätzlich habe ich eine kleine Funktion geschrieben, die da einiges in pre-Bereichen nach meinen Vorstellungen anpasst, doch die benötigst Du zur Zeit noch nicht bei Deinen Beispielen, wie es ausschaut. Von CSS3 kenne ich bisher auch nur die Regeln, über die ich stolpere und bin kein Experte in Sachen CSS.

Bei mir sieht es zumindest so aus und ich sah bisher noch keine Unterschiede in den drei Browsern, die ich zur Kontrolle benutze:

.site-content article {
...
}
/* Entfernt -webkit-hyphens:auto;  -moz-hyphens:auto; hyphens:auto; */


.entry-content pre, .comment-content pre {
    background-color:#f8f7ea;         /* neu */
    border:1px solid #e2e2e2;         /* alt ededed */
    color:#000;                       /* alt 666    */
    font-family:Consolas, Monaco, Lucida Console, monospace;
    font-size:12px; font-size:0.857142857rem;
    line-height:1.2;                  /* alt 1.714285714 */
    margin:24px 0; margin:1.714285714rem 0;
    overflow:auto; padding:24px; padding:1.714285714rem;
}

So, nun habe ich gerade noch einmal einen Test mit dem 'Opera Mobile Emulator' gemacht, da halten die pre-Bereiche ebenfalls, wie es ausschaut. Werfe einfach einen Blick auf die Beispiel-Seite, wenn die bei Dir im Browser anders ankommen sollte, bin ich sicherlich etwas geknickt. Wenn nicht, suche Dir aus meiner CSS die Regeln heraus und passe die Farben an und gut sollte es sein.

Mal eine ganz dumme Frage von mir, wie fügst Du denn den Inhalt für pre ein?

Also, ich nutze eine Export-Funktion vom Notepad++, NppExport to HTML und da diese mir noch nicht richtig gefällt, rufe ich die exportierte Datei einmal kurz in einem Browser mit einem eigenen Script auf, welches die Styles durch die von mir verwendeten CSS Klassen ersetzt.

Probleme gab es mit WP schon, da zum Beispiel http:// in Kommentaren umgebrochen wurde. Um das zu verhindern, bzw. auch noch für ein paar andere Kleinigkeiten, hatte ich mir, wie bereits erwähnt, eine kleine Funktion geschrieben.

/**
 * BBCode und Anführungszeichen quoten
 */
function setze_spezielle_Zeichen($content) {


    if ((strpos($content, "<pre>")) !== false) {


        $eing = array("[quot]", "[039]", "[091]", "[093]", "[noum]");
        $ausg = array("&quot;", "&#039", "&#091", "&#093", "");
        $content = str_replace($eing, $ausg, $content);
    }
    return $content;
}
add_filter("the_content", "setze_spezielle_Zeichen");

Ich lasse jetzt hier im Code das Semikolon ; hinter #039, #091 und #093 weg, damit keine Umwandlung erfolgt, es gehört jedoch zwingend dazu.

Die ersten beiden sind für gequotete Anführungszeichen, die nächsten beiden sind für die Klammern von Short-Tags, damit die Tags angezeigt und nicht die Funktion aktiviert wird, und [noum]http://www.example.com[noum] bedeutet halt, kein Umbruch davor und dahinter, was eigentlich nur für Kommentare gedacht ist.

Du könntest es jedoch auch einmal mit einem Plugin für Code probieren.

So, nun hat es mir gereicht, soll heißen, es hat mir keine Ruhe gelassen und ich habe mir Deine eine Seite (Theme Twenty Thirteen) mit Beispiel-Code 13. als HTML-Seite abgespeichert, zusammen mit der CSS. Und wenn ich die Vererbung von word-wrap mit !important überschreibe, dann wird das Listing 13. Sauber und ordentlich im FF, Chrome und IE angezeigt, der Scrollbalken bildet sich und alles wird so dargestellt, wie man es von einem ordentlichen Listing erwartet.

pre {
    background-color: #0000FF;     /* neu -color */
    color: #FFF;
    font-family: monospace;
    font-size: 14px;
    margin: 20px 0;
    overflow: auto !important;     /* neu !important */
    word-wrap: normal !important;  /* neu  Zeile */
    padding: 20px;
                                   /* entfernt white-space: pre; */
}

Wenn Du das so abänderst, dann funktioniert das auch, zumindest bei mir unter Localhost.

Das scheint sogar ohne !important zu halten, kannst Du aber im Zweifel mit !important belassen. Wichtig ist ja nur word-wrap auf normal zu setzen, damit kein ungewollter Umbruch erfolgt.

pre {
    background-color: #0000FF;     /* neu -color */
    color: #FFF;
    font-family: monospace;
    font-size: 14px;
    margin: 20px 0;
    overflow: auto;
    word-wrap: normal;  /* neu  Zeile */
    padding: 20px;
                        /* entfernt white-space: pre; */
}

Nur frage ich mich, warum das bei mir bisher nicht ärgerte.