mr-ui icon indicating copy to clipboard operation
mr-ui copied to clipboard

Add style options to code snippet's `highlightElements`

Open danswick opened this issue 6 years ago • 2 comments

The code snippet component's current default style works well for self-contained pages like the mapbox.com install pages:

image

However, the hightlight style is perhaps too subtle for some other use cases. For example, tutorials that need to demonstrate which lines have changes from step to step as the reader scrolls through a single, long page. For these types of use cases, it would be useful to expose an option for a "high contrast" mode or a prop for specifying CSS classes to be passed to [highlightElements](https://github.com/mapbox/mr-ui/blob/master/src/components/code-snippet/code-snippet.js#L284).

danswick avatar Jul 24 '18 19:07 danswick

Good point, @danswick. I do wonder if the same critique could be applied to the install flow right now — so if we want to increase the contrast for tutorials we should do the same for the install flow. That would mean changing the defaults instead of adding a new option.

davidtheclark avatar Jul 24 '18 20:07 davidtheclark

per a suggestion from @colleenmcginnis, it would also be helpful to display line numbers in the highlightElements blocks.

danswick avatar Jul 24 '18 20:07 danswick