Add style for `<mark>` in rendered markdown and update search result highlight
What does this MR do and why?
We allow users to add <mark>
to their markdown, but we don't have a
specific style for it. The bootstrap style is used by default, but it is
not one of our theme colors and does not work in dark mode.
This MR adds an explicit style for <mark>
tags in rendered markdown.
This MR also updates the style of search result highlights to match.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Markdown highlight
Mode | Before | After |
---|---|---|
Light | ![]() |
![]() |
Dark | ![]() |
![]() |
Search highlight
Mode | Before | After |
---|---|---|
Light (no change) | ![]() |
![]() |
Dark | ![]() |
![]() |
How to set up and validate locally
- Check out this branch
- Visit any page in the GDK where you can edit markdown. Add
Here is some h<mark>ighlighted tex</mark>t!
to markdown and save/submit. - You will see that the highlighted portion of the text uses Orange 100 for the background and the default text color for the text.
- Now visit global search results, such as http://gdk.test:3000/search?search=flight&nav_source=navbar&scope=issues. You will see that the highlight in search results matches the highlight you just saw in markdown.
- Repeat steps 3 and 4 in dark mode.
Edited by Chad Lavimoniere