Fenced code blocks: support more colours

[damithc]

Current: We support some built in colour names for highlighting code segments https://markbind.org/userGuide/formattingContents.html#fenced-code

Suggested: Support more colours, especially those suitable for highlighting. The currently-supported colours are not that suitable for highlighting text.

[Harjun751]

Hello prof, I'm taking a stab at this and wondering which would be the best way to proceed.

I first attempted to use normal pastel colors, which work good in light mode but are not great in dark:

---

Then I tried using the mix-blend-mode CSS property to aid legibility. It blends the selected element with the parent element's background based on the specified blend method:

Definitely helps legibility on dark mode, but light mode is not ideal. I couldn't find a mode/method to reliably maintain legibility in both themes through this method.

---

I also tried using transparency, but it wasn't great.

Details

---

I think the way to proceed is to split highlight colours for specific use in specific themes. So yellow-dark would be used for dark-themed sites and yellow-light would be used for light-themed sites. Either that, or use CSS variables to automatically choose a suitable variant for a color, so the user would just specify yellow and it'd look appropriate for the theme.

[damithc]

Thanks for working on this @Harjun751

I think the way to proceed is to split highlight colours for specific use in specific themes. So yellow-dark would be used for dark-themed sites and yellow-light would be used for light-themed sites. Either that, or use CSS variables to automatically choose a suitable variant for a color, so the user would just specify yellow and it'd look appropriate for the theme.

Yes, those are two options we can consider. If I understood you correctly,

Option 1: The 'named' colours (i.e., colours we have provided a name for) have two variants, one for each theme, and auto-select the matching variant based on the theme.
For example, the colour green use a pastel green variant for light theme and neon green variant for the dark theme.

Option 2: Provide two named variants for each colour e.g., green-light for pastel variant and green-dark for the neon variant, and rely on the author to specify the correct variant.

If feasible, I think option 1 is better.

[Harjun751]

Following up, I gave it a try and it's pretty simple to do option 1. I tweaked the current existing colors:

Used the adobe color contrast checker for this, and I think most text looks legible and the overall idea of calling attention to a certain part is achieved.

Some of the colors in some themes are not so great, but they're colors that wouldn't make sense being used in those themes anyway (like black highlight in a dark themed block). If this is OK, I'll open up a PR.

[damithc]

Following up, I gave it a try and it's pretty simple to do option 1. I tweaked the current existing colors:

Looks good, @Harjun751