Jekyll 4.3.2: How to set alternate color scheme for code highlighting

79 Views Asked by At

I'm trying to simply change a few things regarding the code highlighting in my Jekyll pages on github and have been unable to get anything to work.

After reading a lot of pages/questions, I've tried:

  1. Adding various random seeming scss files (_base.scss, _highlights.scss, _syntax_highlighting.scss)
.highlight {
  ...
}
  1. Adding main.css and syntax.css
---
# Some Jekyll nonsense... (not needed in other scss files).
---

@import "syntax";
  1. Adding the following snippet to _config.yml
# Jekyll 3 now only supports Kramdown for Markdown
kramdown:
  # Use GitHub flavored markdown, including triple backtick fenced code blocks
  input: GFM
  # Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting
  syntax_highlighter: rouge
  syntax_highlighter_opts:
    # Use existing pygments syntax highlighting css
    css_class: 'highlight'

sass:
  style: compressed

I've looked at: Jekyll Import Syntax Highlighting Colour Scheme But this didn't work when I tried it and isn't what I'm after (just c&p whole files doesn't feel like real solution to me). I suspect this answer is out-of-date now but I have no way to know for sure.

The main issue is that I've never found documentation that just explains, to a Jekyll n00b, what the basic processing steps are. So I've got zero intuition of what to change were to affect things.

For example:

  1. Do I need to copy all of the theme I'm using (just-the-docs) before any modifications will take effect?
  2. Can I add just one .scss file and have the system inherit the remaining ones?
  3. Is adding main.css enough to trigger it being processed or do I need to change how I run Jekyll?
  4. Is the fact I'm using the just-the-docs theme messing up my ability to change code highlighting?

All in all it's very poor documented and most "answers" to questions I've found boil down to telling people to cut & paste X into Y (and since Jekyll seems to have had some breaking changes between versions a lot of these don't age well).

The pages are at: https://github.com/hagbard/the-flogger-manual/tree/main/docs https://hagbard.github.io/the-flogger-manual/

I'm just using standard triple-backticks + language to specify a code block (though some pages suggest other approaches, but again I suspect they are out-of-date).

Ideally I'd want to be able to easily download and install one of the color schemes in: http://jwarby.github.io/jekyll-pygments-themes/languages/javascript.html

but even just getting one small thing to change in the syntax highlighting would probably be enough to get me started.

0

There are 0 best solutions below