Ich setze auf meinen Coding Blogs den Syntaxhighlighter von Alex Gorbatchev ein. Dieser wird recht einfach durch das Plugin SyntaxHighlighter Evolved in WordPress eingebunden. Leider war ich nicht wirklich mit den verwendeten Styles zufrieden. Die Zeilen sahen mir einfach zu gequetscht aus und so dachte ich mir ich passe das einfach schnell an. Um es vorweg zu nehmen das ganze war sehr frustrierend bis ich den Dreh raus hatte.
In der shCore.css gibt es am Anfang den folgenden Block. Hier werden die Standardeinstellungen mit !important überschrieben und das macht Anpassungen dieser Werte in anderen Dateien sehr schwer. So habe ich erstmal für alle Werte die ich anpassen wollte das !important entfernt. In diesem Beispiel border und line-height.
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span
{
margin: 0 !important;
padding: 0 !important;
border: 0;
outline: 0 !important;
background: none !important;
text-align: left !important;
float: none !important;
vertical-align: baseline !important;
position: static !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
height: auto !important;
width: auto !important;
line-height: 1em;
font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 1em !important;
}
Das erhöhen der line-height zerstört dann die Zeilenumbruchbilder. Da ich das aber sowieso nicht benutze habe ich es kurzerhand raus geschmissen.
.syntaxhighlighter .line .content .block
{
display: block !important;
padding-left: 1.5em !important;
text-indent: -1.5em !important;
/* hier stand etwas */
}
Diese Werte passe ich jetzt in meinem Theme.css an. Kann man natürlich auch gleich in der verwendeten shTheme Datei machen, aber so habe ich alle Anpassungen zentral an einer Stelle.
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span
{
line-height: 18px !important;
}
.syntaxhighlighter
{
border:1px dotted #CFCFCF !important;
}
Nach dem gleichen Muster kann man jetzt auch Farben anpassen oder andere CSS Einstellungen. Sollte man größere Änderungen vornehmen empfiehlt es sich vielleicht gleich ein eigenes Theme zu bauen.
btw. der WordPress eigene Code Editor is evil! Ich lade die Dateien lieber runter, bearbeite sie und schiebe sie dann wieder hoch.
Du hast die falschen Zeilen markiert und in der aktuellen Version sieht das alles etwas anders aus.
Danke ich habe es angepasst. Das mit der neuen Version muss ich mal in Ruhe ansehen
Hi ich finde SyntaxHigler super!
Es gibt mal wieder eine neue Version des Addons und des Syntaxhiglighters. Die Werte in der shCore.css sind immer noch !important, aber dafür muss man das Zeilenumbruchbilder nicht mehr entfernen.
Den zweiten Block, kann man sich mittlerweile anscheinend sparen. Ich finde ihn jedenfalls nicht mehr in der aktuellen Version.