Prettifying code with syntax highlighting

3 Oct 2024

I shared some CSS snippets and didn't love how the code displayed, so I made some adjustments to the syntax highlight styles.

Bearblog uses Pygments for code highlighting, and we can customize the colors by applying existing stylesheets or creating our own.

Here are the CSS snippets for anyone interested in tinkering with how their code displays.

Color scheme

Define light & dark mode colors in :root.

Since I'm using the Catppuccin palette, I created a color scheme to match.¹

/* Colors: Light mode */
:root {
  --text-color: #4c4f69;
  --subtext-color: #6c6f85;
  --hl-flamingo: #C43131;
  --hl-pink: #BE1E93;
  --hl-mauve: #8534EF;
  --hl-red: #CD0E38;
  --hl-maroon: #CE1C2B;
  --hl-peach: #B24201;
  --hl-green: #2F751F;
  --hl-teal: #147176;
  --hl-sky: #03709B;
  --hl-blue: #0B59F4;
  --hl-sapphire: #167383;
  --hl-lavender: #3553FD;
  --hl-surface: #acb0be;
  --hl-mantle: #e6e9ef;
  --hl-crust: #dce0e8;
}
/* Colors: Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #cdd6f4;
    --subtext-color: #a6adc8;
    --hl-flamingo: #f2cdcd;
    --hl-pink: #f5c2e7;
    --hl-mauve: #cba6f7;
    --hl-red: #f38ba8;
    --hl-maroon: #eba0ac;
    --hl-peach: #fab387;
    --hl-green: #a6e3a1;
    --hl-teal: #94e2d5;
    --hl-sky: #89dceb;
    --hl-blue: #89b4fa;
    --hl-sapphire: #74c7ec;
    --hl-lavender: #b4befe;
    --hl-surface: #585b70;
    --hl-mantle: #181825;
    --hl-crust: #11111b;
}

Pygments stylesheet

I used the Dracula stylesheet as my base to capture all the relevant CSS classes.

/* Syntax highlighting */
.highlight .hll { background-color: var(--hl-crust); } 
.highlight { background: var(--hl-mantle); color: var(--text-color); } 
.highlight .c { color: var(--subtext-color); } /* Comment */
.highlight .err { color: var(--hl-maroon); border: 0; } /* Error */
.highlight .g { color: var(--text-color); } /* Generic */
.highlight .k { color: var(--hl-sapphire); } /* Keyword */
.highlight .l { color: var(--hl-flamingo); } /* Literal */
.highlight .n { color: var(--text-color); } /* Name */
.highlight .o { color: var(--hl-sapphire); } /* Operator */
.highlight .x { color: var(--text-color); } /* Other */
.highlight .p { color: var(--hl-maroon); } /* Punctuation */
.highlight .ch { color: var(--subtext-color); } /* Comment.Hashbang */
.highlight .cm { color: var(--subtext-color); } /* Comment.Multiline */
.highlight .cp { color: var(--hl-maroon); } /* Comment.Preproc */
.highlight .cpf { color: var(--subtext-color); } /* Comment.PreprocFile */
.highlight .c1 { color: var(--subtext-color); } /* Comment.Single */
.highlight .cs { color: var(--subtext-color); } /* Comment.Special */
.highlight .gd { color: var(--hl-pink); } /* Generic.Deleted */
.highlight .ge { color: var(--text-color); text-decoration: underline; } /* Generic.Emph */
.highlight .ges { color: var(--text-color); text-decoration: underline; } /* Generic.EmphStrong */
.highlight .gr { color: var(--text-color); } /* Generic.Error */
.highlight .gh { color: var(--text-color); font-weight: bold; } /* Generic.Heading */
.highlight .gi { color: var(--text-color); font-weight: bold; } /* Generic.Inserted */
.highlight .go { color: var(--hl-lavender); } /* Generic.Output */
.highlight .gp { color: var(--text-color); } /* Generic.Prompt */
.highlight .gs { color: var(--text-color); } /* Generic.Strong */
.highlight .gu { color: var(--text-color); font-weight: bold; } /* Generic.Subheading */
.highlight .gt { color: var(--text-color); } /* Generic.Traceback */
.highlight .kc { color: var(--hl-pink); } /* Keyword.Constant */
.highlight .kd { color: var(--hl-pink); font-style: italic; } /* Keyword.Declaration */
.highlight .kn { color: var(--hl-sapphire); } /* Keyword.Namespace */
.highlight .kp { color: var(--hl-sapphire); } /* Keyword.Pseudo */
.highlight .kr { color: var(--hl-sapphire); } /* Keyword.Reserved */
.highlight .kt { color: var(--hl-sky); } /* Keyword.Type */
.highlight .ld { color: var(--text-color); } /* Literal.Date */
.highlight .m { color: var(--hl-pink); } /* Literal.Number */
.highlight .s { color: var(--hl-sapphire); } /* Literal.String */
.highlight .na { color: var(--hl-blue); } /* Name.Attribute */
.highlight .nb { color: var(--hl-pink); font-style: italic; } /* Name.Builtin */
.highlight .nc { color: var(--hl-sapphire); font-weight: normal; } /* Name.Class */
.highlight .no { color: var(--text-color); } /* Name.Constant */
.highlight .nd { color: var(--hl-sapphire); } /* Name.Decorator */
.highlight .ni { color: var(--text-color); } /* Name.Entity */
.highlight .ne { color: var(--text-color); } /* Name.Exception */
.highlight .nf { color: var(--hl-pink); } /* Name.Function */
.highlight .nl { color: var(--hl-flamingo); font-style: italic; } /* Name.Label */
.highlight .nn { color: var(--text-color); } /* Name.Namespace */
.highlight .nx { color: var(--text-color); } /* Name.Other */
.highlight .py { color: var(--text-color); } /* Name.Property */
.highlight .nt { color: var(--hl-green); font-weight: normal; } /* Name.Tag */
.highlight .nv { color: var(--hl-sky); font-style: italic; } /* Name.Variable */
.highlight .ow { color: var(--hl-sapphire); } /* Operator.Word */
.highlight .pm { color: var(--text-color); } /* Punctuation.Marker */
.highlight .w { color: var(--text-color); } /* Text.Whitespace */
.highlight .mb { color: var(--hl-pink); } /* Literal.Number.Bin */
.highlight .mf { color: var(--hl-pink); } /* Literal.Number.Float */
.highlight .mh { color: var(--hl-pink); } /* Literal.Number.Hex */
.highlight .mi { color: var(--hl-pink); } /* Literal.Number.Integer */
.highlight .mo { color: var(--hl-pink); } /* Literal.Number.Oct */
.highlight .sa { color: var(--hl-maroon); } /* Literal.String.Affix */
.highlight .sb { color: var(--hl-maroon); } /* Literal.String.Backtick */
.highlight .sc { color: var(--hl-maroon); } /* Literal.String.Char */
.highlight .dl { color: var(--hl-maroon); } /* Literal.String.Delimiter */
.highlight .sd { color: var(--hl-maroon); } /* Literal.String.Doc */
.highlight .s2 { color: var(--hl-maroon); } /* Literal.String.Double */
.highlight .se { color: var(--hl-maroon); } /* Literal.String.Escape */
.highlight .sh { color: var(--hl-maroon); } /* Literal.String.Hepinkoc */
.highlight .si { color: var(--hl-maroon); } /* Literal.String.Interpol */
.highlight .sx { color: var(--hl-maroon); } /* Literal.String.Other */
.highlight .sr { color: var(--hl-maroon); } /* Literal.String.Regex */
.highlight .s1 { color: var(--hl-maroon); } /* Literal.String.Single */
.highlight .ss { color: var(--hl-maroon); } /* Literal.String.Symbol */
.highlight .bp { color: var(--text-color); font-style: italic; } /* Name.Builtin.Pseudo */
.highlight .fm { color: var(--hl-pink); } /* Name.Function.Magic */
.highlight .vc { color: var(--hl-blue); font-style: italic; } /* Name.Variable.Class */
.highlight .vg { color: var(--hl-blue); font-style: italic; } /* Name.Variable.Global */
.highlight .vi { color: var(--hl-blue); font-style: italic; } /* Name.Variable.Instance */
.highlight .vm { color: var(--hl-blue); font-style: italic; } /* Name.Variable.Magic */
.highlight .il { color: var(--hl-pink); } /* Literal.Number.Integer.Long */