Skip to content

Highlight a line of code within an example block#1108

Merged
amyjko merged 29 commits into
wordplaydev:mainfrom
melissachen2000:1068-line-highlighting
May 9, 2026
Merged

Highlight a line of code within an example block#1108
amyjko merged 29 commits into
wordplaydev:mainfrom
melissachen2000:1068-line-highlighting

Conversation

@melissachen2000
Copy link
Copy Markdown
Contributor

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

image

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:

  1. Open a chat
  2. Verify that the ¶ and 👀 buttons are deactivated.
  3. Insert an example by using the button or typing \. Verify that the ¶ button is active.
  4. Move the cursor to be outside of the \ (e.g., immediately to its left or right). Verify that the ¶ is inactive.
  5. Move the cursor to be between the \. Insert the ¶¶ symbol by pressing the ¶ button or by using alt+7. Verify that the text is now \¶¶. Verify that the 👀 button is active.
  6. Insert the 👀 by using the button or shortcut. Verify that the text is now \¶👀¶\

I also verified the buttons from #1061 are still working as designed.

Checklist

melissachen2000 and others added 21 commits May 8, 2026 16:46
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
@amyjko
Copy link
Copy Markdown
Collaborator

amyjko commented May 9, 2026

@copilot resolve the merge conflicts in this pull request. The locale should be sv-SE.

@amyjko amyjko merged commit 196c619 into wordplaydev:main May 9, 2026
3 checks passed
@melissachen2000 melissachen2000 deleted the 1068-line-highlighting branch May 10, 2026 19:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Highlighting code within an example code block

2 participants