I just changed the Jekyll Rouge syntax highlighting theme on my new site, Practical Code Use. Jekyll’s default is oddly pinkish, and I like the dark themes. First I tried monokai, but some of the colors look odd, especially with PowerShell. So I switched to Dracula which looks better for my purposes.

Pygments themes work with Jekyll’s Rouge, but I had to add some extra styling to get the background color right:

 figure.highlight pre code, pre.highlight code {
    color: #f8f8f2;  /* .w taken from Text.Whitespace */
    background-color: #282a36;
  }
 .highlight {
   background: #282a36;
   @extend %vertical-rhythm;
 
  .highlighter-rouge & {
      background: #282a36;
  }
}

But it still doesn’t look quite right. I tried searching for how to convert Visual Studio Code’s themes to Pygments/Rouge. I didn’t find anything on-point, but I did find an interesting suggestion at this blog to use the Productivity Power Tools VSCode plugin to copy syntax-marked html from VSCode, the advantage being that VSCode better understands each language and has more sensible highlighting because it understands the code where Pygments and Rouge are just matching syntax rules.

In Options, Productivity Power Tools, HTML Copy you need to set EmitSpanClass to true and EmitSpanStyle to false.

I haven’t tried this yet, but I’d like to, at least for some languages.

I went ahead and put Dracula here, too. The scss above is using it. Yeah, it even looks funny for scss.

So I decided to go looking for this Productivity Power Tools plugin. I can’t find it in the extensions marketplace inside VSCode, but I know you can copy and paste syntax-highlighted code. It just took me a few minutes to figure it out, and it’s hackish although I’m sure there’s a better way. I copied the text from VSCode and pasted into a GMail compose window, then right-clicked and inspected, then copied the parent div and pasted it here:

figure.highlight pre code, pre.highlight code {
color: #f8f8f2; /* .w taken from Text.Whitespace */
background-color: #282a36;
}
.highlight {
background: #282a36;
@extend %vertical-rhythm;
.highlighter-rouge & {
background: #282a36;
}
}

Yeah, that looks much, much better. But if you look at the source, it has hard-coded rgb styles instead of classes. It would be interesting to have class-based highlighting, then I could recolor it after the fact.

Next-day update: Oh, I just realized it’s Rouge that’s the problem. Prism.js and Pygments look pretty good, but Rouge makes some very odd choices that just don’t make sense and don’t help understanding the code. I tried rougify from Rouge 3.4.1, the latest version, on PowerShell and SCSS and it still highlights funny. Rouge does well with Ruby, but for the two languages I needed it for yesterday it sucked.