WordPress Plugin SyntaxHighlighter – Tweaks

Genom att ändra i CSS för WordPress plugin SyntaxHighlighter kan följande punkter förbättras:

  1. Varannan rad med olika färger. Default är alla rader vita, vilket gör det svårt att se vilken rad som motsvarar resp. radnummer.
  2. Kantlinjer runt kodboxen som gör att det blir det lättare att se koden, speciellt när man scrollar horisentellt.
  3. En marginal under kodboxen, så att tabellen inte direkt hamnar ovanför följande text.

Exempel på hur det ser ut innan tweak, de övriga kodboxarna i denna artikel är efter CSS ändringar.
WordPress Plugin SyntaxHighlighter
SyntaxHighlighter kommer med flera färgteman som alla har sin egen CSS så detta tweaks måste göras med varje tema. Jag använder det färgtema som är default och behöver därför ändra i shThemeDefault.css, se nedan för sökväg.

wordpress/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeDefault.css

Ändra white till t.ex. #f2f2f2 för att varann rad ska bli grå.

.syntaxhighlighter .line.alt2 {
  background-color: #f2f2f2 !important;
}

Lägg till kantlinjer och marginal.

.syntaxhighlighter {
  background-color: white !important;
  border: 1px solid #DADAD9 !important;
  margin-bottom: 20px !important;
}

Ändra färgen som används för att uppmärksamma viktiga rader till t.ex. 6ce26c.

.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #6ce26c !important;
}

mer läsning:
WordPress SyntaxHighlighter 3.x Tweaks

One thought on “WordPress Plugin SyntaxHighlighter – Tweaks

  1. Pingback: my Twenty Eleven Child Theme • Cinema Attic

Leave a Reply

Your email address will not be published.