Use a more noticeable color for highlight words in fenced code (#2051)

[Tim-Siu]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• DevOps
• Improve developer experience
• Others, please explain:

Overview of changes:

Resolves #2051

The highlighting color for fenced code block in dark theme is changed to from grey 474949 to complete dark 000000.

Citing @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

Anything you'd like to highlight/discuss:

Testing instructions:

Proposed commit message: (wrap lines at 72 characters)

Use a more noticeable color for highlight words in fenced code under dark theme

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

---

Reviewer checklist:

Indicate the SEMVER impact of the PR:

• Major (when you make incompatible API changes)
• Minor (when you add functionality in a backward compatible manner)
• Patch (when you make backward compatible bug fixes)

At the end of the review, please label the PR with the appropriate label: r.Major, r.Minor, r.Patch.

Breaking change release note preparation (if applicable):

• To be included in the release note for any feature that is made obsolete/breaking

Give a brief explanation note about:

• what was the old feature that was made obsolete
• any replacement feature (if any), and
• how the author should modify his website to migrate from the old feature to the replacement feature (if possible).

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (9d592f9) 48.87% compared to head (2d0072c) 48.87%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2394   +/-   ##
=======================================
  Coverage   48.87%   48.87%           
=======================================
  Files         124      124           
  Lines        5238     5238           
  Branches     1109     1109           
=======================================
  Hits         2560     2560           
  Misses       2371     2371           
  Partials      307      307           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[yucheng11122017]

Thanks for the work @Tim-Siu!
Could you also update the css file for the docs and the templates as well? Otherwise, it is not reflected in these files.
Also, I'm looking at the code block right now and it doesn't look very nice.
What I actually meant with my comment was to change it a darker color like #000000.
Could we change it to use #000000 instead?

[Tim-Siu]

Thanks for the work @Tim-Siu! Could you also update the css file for the docs and the templates as well? Otherwise, it is not reflected in these files. Also, I'm looking at the code block right now and it doesn't look very nice. What I actually meant with my comment was to change it a darker color like #000000. Could we change it to use #000000 instead?

Hi Yucheng,

I apologize for any confusion regarding your earlier request. I have now revised the highlight color in the code block to pure black (#000000), as per your specification.

Regarding the update of the CSS files for the documentation and templates, I would like to clarify the process. My understanding is that the CSS files within the _site directory are auto-generated. Could you please clarify the steps needed for this integration?

[yucheng11122017]

Hi @Tim-Siu sorry for my previous comment! Yes you are right, there should be no change needed anymore. Thanks for the work on the PR!
LGTM

[tlylt]

@Tim-Siu this place in our docs needs to be updated?

Is the issue description up-to-date? Which color are we using in the end? Could you update the issue description to include a clear example of before and after for comparison pls

[Tim-Siu]

@Tim-Siu this place in our docs needs to be updated?

Is the issue description up-to-date? Which color are we using in the end? Could you update the issue description to include a clear example of before and after for comparison pls

Sorry for the oversight and thank you for pointing it out!

As there is no local control for the code theme in Markbind, I updated the screenshot used in the UG. I updated the PR description as well.

[tlylt]

Pinging @damithc for opinions on the visual change.

[damithc]

Pinging @damithc for opinions on the visual change.

I'm OK with it 👍

changes made