[EuiCodeBlock] Highlight line ranges

[thompsongl]

Summary

Adds the ability to visually highlight line ranges within EuiCodeBlock. Extends the lineNumbers prop to accept a comma-separated list of line number(s) or range(s) ({ highlight: '1, 5-10, 20-30, 40' }).

Amsterdam:

v7:

Also fixes a row height bug for virtualized blocks noticed during this work.

Checklist

• Check against all themes for compatibility in both light and dark modes

- [ ] Checked in mobile

• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• Added documentation
• Checked Code Sandbox works for any docs examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately
• Revert 2b9eee0

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5207/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5207/

[miukimiu]

It's looking good @thompsongl,

I just found some small design issues. When the transparentBackground is set to true the numbers still have a background. We missed that on the PR that introduced the line numbers. For this scenario, we should remove the background.

But if we remove this background the line number is highlighted and it doesn't pass the a11y contrast check (4.3). To solve this we can make the number with more contrast (maybe using the Sass function makeHighContrastColor) or we just remove the highlight for line numbers. What do you think?

Then, on the following section we should also explain that we can also highlight the numbers.

[thompsongl]

Good catch with transparentBackground; I didn't realize that was a prop that EuiCodeBlock accepted. Checking on options to resolve it.

[cee-chen]

Logic LGTM! I have some minor comments/suggestions but none of them are blockers. I didn't look too closely at the documentation/examples/design, since Elizabet is on it 🎉

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5207/

[thompsongl]

Resolved all review comments, @miukimiu @constancecchen 🙇

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5207/

[cee-chen]

Changes for my feedback look great - thanks for the super thorough unit tests!! 🎉

[miukimiu]

Thanks, @thompsongl for making the changes. LGTM! 🎉

[snide]

This PR is great! cc @goodroot as this is useful for document work. We'll probably want to add a more robust wrapper for the docs system at some point.

[thompsongl]

I forgot to revert 2b9eee0 🤦

[goodroot]

OOh yeah this is real slick. Thanks for the awareness.

[jackamondo]

Apologies for the necro on a merged topic, I'm using this component currently and I'm just wondering if anyone knows if it would be possible to dynamically highlight code? I have some json i'm displaying in the code block and ideally I want to highlight sections that match a certain syntax or result (i.e. only highlight objects with type "error"?) or is there any way to expose the API for prism? I'd massively appreciate if anyone could point me in the right direction!

[miukimiu]

Hi, @jackamondo I don't think is possible right now to dynamically highlight code that matches a certain syntax. Not sure @thompsongl can point out a workaround.

But there is a discussion with some feature requests for the EuiCodeBlock where you can comment there and propose the enhancements you would like to see: #5609.

[thompsongl]

I don't think is possible right now to dynamically highlight code that matches a certain syntax. Not sure @thompsongl can point out a workaround.

No workround at the moment unless you write a script that manipulates the DOM (not actually sure how this would work). I see you've added to the discussion, so that's best course right now.