Use a more noticeable color for highlight words in fenced code

[damithc]

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

No response

Tell us about your environment

n/a

MarkBind version

4.0.2

What did you do? Describe the bug

When the dark theme is used (which is the default) for fenced code, the highlighted words are not easy to spot.

Steps to reproduce

as above

Expected behavior

Use a color more easily visible in both dark and light themes, or use different colors for the two different themes?

Actual behavior

as abve

Anything else?

n/a

[tlylt]

Agree that the contrast is not very high for the dark theme.

• For the light theme, it seems quite visible so perhaps no change is needed here.
  

Need to experiment or possibly check out other existing projects that have code block functionality to see if there's a more suitable color.

[yucheng11122017]

The highlighting in other projects for the dark mode generally favors lighter colors such as react-code-blocks

Is something like this ok?

I noticed it is also quite common for other projects to allow users to choose their theme beyond dark and light. Will Markbind also need this use case? There are css files provided by highlight.js for different themes which can possibly used to support this

They also customize the theme of the code blocks for each block while Markbind is centralized to the site. Will Markbind also need this use case?

[damithc]

The highlighting in other projects for the dark mode generally favors lighter colors such as react-code-blocks

@yucheng11122017 Which part is highlighted in this screenshot? Or are you referring to syntax coloring (which is different from the highlighting feature mentioned in this issue)?

[yucheng11122017]

@damithc Oh sorry professor, I misintepreted the issue.

[yucheng11122017]

The dark and light themes already have different colors 474949 for their highlighting. (#474949 for dark and #e6e6fa for light)

Docusaurus uses a brighter color for their dark theme code highlighting (#646464). They allow users to override the default background color.

Using that value, this is what the code highlighting looks like which does seem a bit too bright making it hard to read the text

My suggestion would be to make the highlighting darker than the code, which makes the text stand out more by contrast.