✨ Highlight Matching Tags

該 issue 未列出任何檔案、測試或進入點。首先定位編輯器中負責標籤解析、游標匹配、醒目提示和編輯同步的元件；當對於所描述的游標位置，相符的開始標籤和結束標籤都被醒目提示，並且在編輯名稱時仍保持同步，即視為完成。

Description

We want to enhance tag-matching behavior in markup languages such as HTML, XML, and JSX by highlighting matching tags based on cursor position. This feature is inspired by bracket matching in Xcode, where matching brackets are highlighted based on cursor placement.

When the cursor is placed within a tag, the corresponding opening or closing tag should be highlighted. Additionally, if any tag name is modified in either the beginning or end tag, the matching tag should update to reflect the change.

Behavior Examples

In the following examples, | represents the cursor position, and underlined text represents the highlighted matching tags:

• <|div class="wrapper">Hello world!</div>
• <div| class="wrapper">Hello world!</div>
• <div class="wrapper">|Hello world!</div>
• <div class="wrapper">Hello world!<|/div>
• <div class="wrapper">Hello world!</div|>
• <div class="wrapper">Hello world!</div>|

Requirements

1. Cursor-Based Tag Matching:

   • When the cursor is within a tag name, either at the opening or closing tag, the corresponding tag should be highlighted.

2. Tag Synchronization:

   • When a tag name is edited, the matching tag should update to reflect the change in real-time, ensuring that both tags are always in sync.

3. Highlight Behavior:

   • Highlighting should clearly indicate the matching tag, using a distinct visual style (e.g., underline or color change) for both the opening and closing tags to enhance visibility.

This feature will improve the editing experience by making it easier to identify matching tags, reducing errors in nested or complex structures.

Original Issue Description

Is it possible to highlight the opening and closing tags? Example: <div> </div>