Formatieren von Source Code in Twenty Twelve

  • Ich betreibe ein Blog mit WordPress 3.8 + Twenty Twelve. Im wesentlichen bin ich mit dem Aussehen und der Funktion zufrieden.

    Allerdings schreibe ich hin- und wieder Einträge bei denen ich Source Code einsetzen will, z.B. in etwa wie hier: http://blog.cyclaero.de/?p=229

    Das Problem ist, daß bei längeren Source-Code-Zeilen es auch in Schlüsselwörtern zur Silbentrennung kommt. Im o.g. Fall mußte ich mit der Zeichensatzgröße herumspielen und auch manuell Umbrüche einsetzen, damit es nicht zu seltsamen Trennungen kommt.

    Gibt es ein Theme basierend auf Twenty Twelve bzw. eine Erweiterung für TT, so daß Quelltext in fester Zeichenbreite (10px, Andale Mono, Source Code Pro, Monaco, Courier) in nach rechts offenen Scroll-Feldern ohne irgendwelche Umbrüche dargestellt werden kann?

    Sehr schön wäre, wenn sich die Syntax-Einfärbung aus einem RTF-Quelltext irgendwie importieren ließe.

    Noch schöner wäre, wenn das Theme bzw. die Erweiterung vom vertraulichen "Du" auf das formale "Sie" umschaltbar wäre, ohne daß das bei jedem Update wieder verloren ginge.

    Vielen Dank im voraus für Ihre Hinweise.

    Viele Grüße

    Rolf Jansen

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Das sollte sich über die style.css des Themes lösen lassen.

    Entferne

    Code
    .site-content article {
        -moz-hyphens: auto;
        word-wrap: break-word;
    }

    pre wird bereits mit

    Code
    overflow:auto;

    definiert, von daher sollten auch Scrollbars automatisch erscheinen sobald der Code die normale Breite überschreitet.

  • Für den genannten Blog-Eintrag hatte ich die <pre> tags manuell bereits geändert gehabt:

    Code
    <pre style="font-size:10px; -webkit-hyphens:none; -moz-hyphens:none; hyphens:none;">...</pre>

    Damit waren dann in der Tat die Bindestriche (hyphens) weg. Mit [FONT=courier new]auto[/FONT] anstelle von [FONT=courier new]none[/FONT] sind sie dann wieder da. [FONT=courier new]word-wrap:break-word[/FONT] und [FONT=courier new]overflow:auto;[/FONT] hat keinen Effekt.

    Mit ...

    Code
    <pre style="font-size:10px; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; word-wrap:break-word; overflow:auto;">...</pre>


    ... wird alles ohne Rollbalken und mit normaler dt. Silbentrennung im Source Code dargestellt.

  • Schmeiß die inline styles raus, mache mal das, was ich oben schon geschrieben habe u. lösche anschließend mal den Browsercache. Die Scrollbalken kommen nur wenn der vorhandene Platz nicht ausreichend ist, die Zeilen also zu lang sind. Das ist derzeit nicht der Fall (auch mit der Standardschriftgröße)

    Alternativ wie von ArtofPic vorgeschlagen ein entsprechendes Plugin nutzen...

    http://wordpress.org/plugins/search.php?q=syntax&sort=

  • oder du verwendest ein Plugin z.B WP-Syntax

    Das Plugin habe ich soeben installiert. Bei C-Code beseitigt es in der Tat das Problem mit Silbetrennung und Zeilenumbruch. Allerdings bei bash-Code nicht. Ich denke, daß ich das Plugin noch etwas nacharbeiten muß. Mir gefällt nicht wirklich der alternierende (grau/weiß) Zeilenhintergrund. Das bekomme ich schon hin. Danke für den Tipp.

  • Mir gefällt nicht wirklich der alternierende (grau/weiß) Zeilenhintergrund.


    findest du hier

    wp-content/plugins/wp-syntax/css/wp-syntax.css (Zeile 57)

  • Schmeiß die inline styles raus, mache mal das, was ich oben schon geschrieben habe u. lösche anschließend mal den Browsercache. Die Scrollbalken kommen nur wenn der vorhandene Platz nicht ausreichend ist, die Zeilen also zu lang sind. Das ist derzeit nicht der Fall (auch mit der Standardschriftgröße)

    [ATTACH=CONFIG]8807[/ATTACH][ATTACH=CONFIG]8808[/ATTACH]

    Klar, die Rollbalken sind in der ursprünglichen Fassung des Blog-Eintrags nicht da, weil ich solange an der Textgröße rumgefummelt hatte bis es passt. Das Herumfummeln will ich in Zukunft aber vermeiden, und deshalb die Frage nach einer TT-Modifikation bzw. einer Erweiterung.

    Alternativ wie von ArtofPic vorgeschlagen ein entsprechendes Plugin nutzen...

    http://wordpress.org/plugins/search.php?q=syntax&sort=

    Danke für den Hinweis auf die Plugins. Ich schaue mir den Rest einmal an, wenn ich WP-Syntax nicht so hinbekomme wie es mir gefällt.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!