Customizing SyntaxHighlighter Evolved For Code

SyntaxHighlighter Evolved is brilliant. Its text is too skinny for my eyes though. Here is a fix though thank you very much Tawfiq. It is easy to apply it if you are using Jetpack’s Custom CSS feature.

/* font-size */
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
    font-size: 14px !important;
}

/* top and bottom padding in code box */
.syntaxhighlighter {
    padding: 1em 0 !important;
}

/* increase line number and code line height */
.syntaxhighlighter table td.gutter .line {
    padding: 3px 0.5em 3px 1em !important;
}
.syntaxhighlighter table td.code .line {
    padding: 3px 1em !important;
}

Leave a Reply

Your email address will not be published. Required fields are marked *