Proposal: Extend EuiCodeBlock for Documentation purposes

[gjones]

Hi all,
We're currently working on redesigning the Elastic Docs. As you might imagine, these have lots of code examples. I've been playing around with adding some features to the existing euiCodeBlock.

I'm proposing the following:

• Adding a title area that can include the request method and path for context. If the code example can have multiple languages, allow users to easily toggle between those languages.
• Allow devs to specify light or dark theme independently of current EUI theme.
• Line numbers (already exists)
• Copy raw (already exists)

At this point I'd love to get some feedback from the EUI team on the direction and design plus any potential problems with what I'm suggesting.

I'm happy to have a first stab at this component if there's nobody available to work on this, I haven't dabbled with emotion yet but this could be a good intro for me.

[gjones]

As a bonus, the current docs system also makes use of numbered dots on the code examples. I don't like these, but haven't come up with a better way to present this data. If someone wants to suggest something that we could bake into EUI, I think that would also be a useful feature.

[cchaos]

Instead of a whole new way of indicating toward specific lines, I would just reference the actual line numbers that are already available on the code block.

[snide]

For the numbering/annotations concept, I'd suggest a left/right structure. Comments can be passed a line number range, and clicking on the comment will highlight the code. Stripe does this really well. I could see us using this outside of documentation, and in the product itself (Agent installation comes to mind).

I think this would be useful enough in a lot of places (beyond docs) that it might be worthwhile to make a high order component that wraps EuiCodeBlock for some of these features.

https://snid.es/2022FEB/gULXwpUfVVyvf-eU.mp4

[jackamondo]

As per my comment here i'd really love the ability to dynamically highlight lines based on their content instead of needing to know the exact line numbers beforehand, i.e. I have some JSON in the code block with logs, some are type: "info" but some are type: "error", i'd love to be able to highlight the error ones maybe with the ability to pad the selection via lines? or at the very least it would be nice if the prism API was somehow exposed to be able to extend EuiCodeBlock manually?