Skip to content

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 image image
Dark image image

Search highlight

Mode Before After
Light (no change) image image
Dark image image

How to set up and validate locally

  1. Check out this branch
  2. 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.
  3. You will see that the highlighted portion of the text uses Orange 100 for the background and the default text color for the text.
  4. 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.
  5. Repeat steps 3 and 4 in dark mode.
Edited by Chad Lavimoniere

Merge request reports

Loading