Highlight a line of code within an example block#1108
Merged
Conversation
Bumps [hono](https://github.com/honojs/hono) from 4.12.16 to 4.12.18. - [Release notes](https://github.com/honojs/hono/releases) - [Commits](honojs/hono@v4.12.16...v4.12.18) --- updated-dependencies: - dependency-name: hono dependency-version: 4.12.18 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>
…nd_yarn/hono-4.12.18 Bump hono from 4.12.16 to 4.12.18
Collaborator
|
@copilot resolve the merge conflicts in this pull request. The locale should be sv-SE. |
…en2000/wordplay into pr/melissachen2000/1108
amyjko
approved these changes
May 9, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
As noted in #1068 , it would be useful to be able to highlight a line of code within an Example. For example, this could be used to denote that a line of code was added or changed between steps of a how-to.
This PR introduces the 👀 emoji to the Wordplay syntax. When 👀 is used within a FormattedExpression, it puts a background behind the expression. A short sentence describing this feature is also added to the Guide.
To make this easier to use in the FormattedEditor, this PR also adds corresponding buttons to the FormattedEditor. alt+7 adds the doc tags and control + shift + . (or, control + >) adds the 👀 (this button is only active if the cursor is within a doc that is also within an example).
This PR was written with help from Claude code with modifications by me, since it overcomplicated the rendering for the background in DocumentedExpressionView in its implementation and struggled to handle the case of a Doc in an Example in a Doc (e.g.,
¶\¶ 👀 ¶ Phrase("this should be highlighted") \¶ Phrase("but this should not be highlighted"))Related issues
Verification
I also pasted this image into https://www.color-blindness.com/coblis-color-blindness-simulator/ to check for accessibility.
For verifying the new FormattedEditor buttons:
I also verified the buttons from #1061 are still working as designed.
Checklist