Highlight Matching Tag（Visual Studio Code 擴充功能）：HTML 開始與結束標籤強調與標示

2020/03/02 1,724 1 軟體應用 , 網站技術 , HTML

「Visual Studio Code」是由微軟（Microsoft）開發的開放原始碼程式編輯器。

之前開發 JavaScript 就有找到一款擴充功能（參考：Bracket Pair Colorizer）可以將上下括弧的區域標示出來，使程式撰寫更加容易，但 HTML 標籤同樣是有區域的，就是由開始標籤 <標籤名稱> 與結束標籤 </標籤名稱> 所框住的指定區域，但預設卻沒有標示，覺得有些不便！後來終於發現這款 Highlight Matching Tag 擴充可以做到最理想的效果，安裝後只要點擊 HTML 開始或結束標籤，就會有底線標示兩邊的標籤方便了解其包住的原始碼區域（片段），超讚！開發者還有給除了底線外的標示形式，可以看官方文檔自行設定。


▲ 請至 Visual Studio Code 延伸模組市集搜尋「Highlight Matching Tag」找到擴充後安裝。

▲ 安裝後開啟 HTML 檔案就會生效囉！預設是底線標示開始與結束標籤。

贊助廣告 ‧ Sponsor advertisements
Stable Diffusion：二次元角色雙手貼玻璃的 AI 繪圖提詞
📆 2025-02-13
📁 軟體應用, 人工智慧, AI繪圖
Photoshop：風景寫真照片之動漫風格加工實作&教學
📆 2019-04-21
📁 軟體應用, 多媒體, 靜圖處理
PhotoCap教學:調整亮度/對比
📆 2014-05-20
📁 軟體應用, 多媒體, 靜圖處理
Prism：輕亮的程式語言標記 JS 插件、已用於數千個網站
📆 2019-01-28
📁 網站技術, HTML, CSS, JavaScript
無縮圖
CSS:免去方向指令，將CSS縮短
📆 2014-01-23
📁 網站技術, CSS
After Effects：重複影片素材以增加長度、增減速度使影片素材長度符合需求
📆 2019-05-15
📁 軟體應用, 多媒體, 動畫特效
React 初嘗試：不使用 npm、Babel 和 webpack 的 HELLO 頁面
📆 2019-07-13
📁 網站技術, HTML, JavaScript, React
pgAdmin 4：將介面切換為正體中文（繁體中文）
📆 2025-05-27
📁 軟體應用, 資料庫

留言區 / Comments

萌芽論壇

萌芽站長

您好，我是萌芽系列網站（Mnya Series Website）的站長&創始人，可以稱呼我「萌芽站長」。我的興趣與專長有登山、觀察地形、攝影、旅遊、網頁設計＆架設＆經營、動畫製作、圖片處理、資料彙整等。有任何問題或建議請至萌芽論壇發表。網站業務、商業合作的聯絡方式在「關於本站 → 團隊介紹 → 站長介紹」，很高興認識您！請多指教！