search

rehype-pretty / rehype-pretty-code

Beautiful code blocks for Markdown or MDX.
https://rehype-pretty.pages.dev
MIT License
998 stars 63 forks source link

[feature] copy button transformer to allow show of button on hover of code block, rather than hover of button #220

Closed tlawrie closed 3 months ago

tlawrie commented 3 months ago

Description

The current 'hover' option on visibility of the copy button, only shows the button if you know to hover over the area the button is located (top right).

Hover is great so that you aren't cutting off content, however by making it visible when hovering over the code block is more usable, as an end-user doesn't necessarily know to go hover over the top right of the code block.

This is more of a user flow of Code block content is 100% uninterrupted -> user interacts with code block (such as to highlight the content to go and copy it) -> copy button is visible -> User uses copy button.

Feature

Add an additional option of codeBlockHover to provide this more usable interaction, or adjust the current hover.

FYI - @brookslybrand

tlawrie commented 3 months ago

Apologies. This is how its implemented. Needed to adjust some css on our version.