Styling the WordPress SyntaxHighlighter

I’ve been fighting with the SyntaxHighlighter for years. Thanks to a friendly WordPress.com support response, I managed to add custom CSS again. I am not a CSS expert. I found it pretty hard to tailor this. So here’s my best attempt to mimic the GitHub embedded Gist styling, as a demonstration of the CSS:

/* My best attempt at GitHub Gist CSS    */
/* for the WordPress Syntax Highlighter. */

div.syntaxhighlighter {
    border-radius: 0.375rem !important;
    border: 1px solid #ddd !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

div.syntaxhighlighter div.line > code {
    font-family:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace !important;
    font-size: 0.7em !important;
    font-weight: 400 !important;
    line-height: 1.8em !important;
}

div.syntaxhighlighter td.gutter > div.line {
    border-right: none !important;
    font-family:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace !important;
    font-size: 0.7em !important;
    font-weight: 400 !important;
    line-height: 1.83em !important;
}

The line numbering will probably be off in your browser. It’s off in mine — and differently depending on the browser.

Safari on MacOS

The line numbers extend below the code lines:

Brave on MacOS

The line numbers end before the code lines. But note that the discrepancy isn’t evenly distributed! Line 4 is too low, but line 27 is too high. A bug in my CSS? Or in the SyntaxHighlighter? Or both? The S.H. has each line number in a separate div:

Dogweather