Which @codeimage/* package(s) are relevant/releated to the feature request?
No response
Description
First of all, thank you for creating CodeImage! It’s a fantastic tool for generating beautiful code snippets.
I would like to propose a new feature that I believe would significantly enhance the storytelling aspect of the images generated by CodeImage: Line Focus (or line dimming).
The Problem (The "Why")
When sharing relatively long code snippets on social media, blogs, or presentations, viewers can easily lose context. Creators often need to guide the audience's eye to specific parts of the code (e.g., the lines that were changed, or the core logic) without removing the surrounding code that provides necessary context.
The Proposed Solution (The "What")
It would be amazing to have a feature that allows users to "focus" on specific lines of code.
Visually: The selected lines would retain their full syntax highlighting and opacity, while the unselected lines would be dimmed out (e.g., lower opacity or a neutral gray color).
UI Interaction: This could be implemented by allowing users to click directly on the line numbers in the editor to toggle focus, or by adding a simple input field in the right sidebar where users can specify a range (e.g., 2-4, 7).
References
A great example of this concept in action can be seen in Slidev. When showcasing code, they allow presenters to highlight specific lines while the rest of the block is dimmed, making it incredibly easy for the audience to follow along.
Adding this to CodeImage would make it an even more powerful tool for educators and content creators.
Thank you for your time and for considering this request! I'd love to hear your thoughts on it.
Which @codeimage/* package(s) are relevant/releated to the feature request?
No response
Description
First of all, thank you for creating CodeImage! It’s a fantastic tool for generating beautiful code snippets.
I would like to propose a new feature that I believe would significantly enhance the storytelling aspect of the images generated by CodeImage: Line Focus (or line dimming).
The Problem (The "Why")
When sharing relatively long code snippets on social media, blogs, or presentations, viewers can easily lose context. Creators often need to guide the audience's eye to specific parts of the code (e.g., the lines that were changed, or the core logic) without removing the surrounding code that provides necessary context.
The Proposed Solution (The "What")
It would be amazing to have a feature that allows users to "focus" on specific lines of code.
Visually: The selected lines would retain their full syntax highlighting and opacity, while the unselected lines would be dimmed out (e.g., lower opacity or a neutral gray color).
UI Interaction: This could be implemented by allowing users to click directly on the line numbers in the editor to toggle focus, or by adding a simple input field in the right sidebar where users can specify a range (e.g., 2-4, 7).
References
A great example of this concept in action can be seen in Slidev. When showcasing code, they allow presenters to highlight specific lines while the rest of the block is dimmed, making it incredibly easy for the audience to follow along.
Adding this to CodeImage would make it an even more powerful tool for educators and content creators.
Thank you for your time and for considering this request! I'd love to hear your thoughts on it.