{"id":13872516,"url":"https://github.com/vincaslt/vscode-highlight-matching-tag","last_synced_at":"2026-02-20T18:32:25.285Z","repository":{"id":40685976,"uuid":"88094629","full_name":"vincaslt/vscode-highlight-matching-tag","owner":"vincaslt","description":"Highlights matching opening or closing tag in  VSCode","archived":false,"fork":false,"pushed_at":"2023-07-11T22:46:55.000Z","size":545,"stargazers_count":162,"open_issues_count":20,"forks_count":17,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-12-25T15:24:05.409Z","etag":null,"topics":["closing-tags","extension","markup","vscode"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vincaslt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-04-12T20:44:25.000Z","updated_at":"2025-08-11T06:25:31.000Z","dependencies_parsed_at":"2024-01-16T09:55:39.287Z","dependency_job_id":"d7113e4e-6b3b-42fb-ab5d-a81eefd33444","html_url":"https://github.com/vincaslt/vscode-highlight-matching-tag","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vincaslt/vscode-highlight-matching-tag","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincaslt%2Fvscode-highlight-matching-tag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincaslt%2Fvscode-highlight-matching-tag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincaslt%2Fvscode-highlight-matching-tag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincaslt%2Fvscode-highlight-matching-tag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vincaslt","download_url":"https://codeload.github.com/vincaslt/vscode-highlight-matching-tag/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincaslt%2Fvscode-highlight-matching-tag/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29660039,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-20T16:33:43.953Z","status":"ssl_error","status_checked_at":"2026-02-20T16:33:43.598Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["closing-tags","extension","markup","vscode"],"created_at":"2024-08-05T23:00:44.868Z","updated_at":"2026-02-20T18:32:25.256Z","avatar_url":"https://github.com/vincaslt.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://images2.imgbox.com/c6/c3/sLkQluHb_o.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca title=\"Average rating\" href=\"https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag#review-details\"\u003e\n\u003cimg src=\"https://img.shields.io/visual-studio-marketplace/r/vincaslt.highlight-matching-tag?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003ca title=\"Unique downloads\" href=\"https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag\"\u003e\n\u003cimg src=\"https://img.shields.io/visual-studio-marketplace/d/vincaslt.highlight-matching-tag?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003cbr/\u003e\n\u003ca title=\"Master Web Development\" href=\"https://a.paddle.com/v2/click/16413/111559?link=3267\" targer=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/Master%20Web%20Development-Try%20The%20Educative.io%20Platform%20→-gray.svg?colorA=655BE1\u0026colorB=4F44D6\u0026style=for-the-badge\"\u003e\n\u003c/a\u003e\n\u003cbr/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ci\u003eIf you're serious about your software development career,\u003cbr/\u003eThere's no better platform to learn programming online than \u003ca href=\"https://www.educative.io/explore?aff=Vp6m\" targer=\"_blank\"\u003eEducative.io\u003c/a\u003e.\u003cbr /\u003eTheir courses are excellent and your subscription supports this plugin.\u003c/i\u003e\n\u003c/p\u003e\n\n# VSCode Highlight Matching Tag\n\n_GitHub repository:_ \u003chttps://github.com/vincaslt/vscode-highlight-matching-tag\u003e\n\nThis extension highlights matching opening and/or closing tags. Optionally it also shows path to tag in the status bar.\nEven though VSCode has some basic tag matching, it's just that - basic. This extension will try to match tags anywhere: from tag attributes, inside of strings, any files, while also providing extensive styling options to customize how tags are highlighted.\n\nOfficially supported markup: **HTML** and **JSX**. Other flavors (XML, Vue, Angular, PHP) should work, but there are no guarantees. Feel free to report the issues on them anyway.\n\n## Features\n\n![demo](https://images2.imgbox.com/71/2a/zIA1XCzK_o.gif)\n\n![breadcrumbs](https://images2.imgbox.com/bc/0d/PzVAkYdU_o.png)\n\n## Extension Settings\n\nYou can override any default [settings](https://code.visualstudio.com/docs/getstarted/settings) with your own values. The plugin supports [workspace settings](https://code.visualstudio.com/docs/editor/multi-root-workspaces) as well as global user settings.\n\n| Variable                                         | Default                                          | Description                                                                                 |\n| ------------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------- |\n| `highlight-matching-tag.enabled`                 | `true`                                           | Enables/disables the highlighting and status bar                                            |\n| `highlight-matching-tag.showPath`                | `true`                                           | Enables/disables showing path to tag in status bar (e.g. `div \u003e p \u003e a`)                     |\n| `highlight-matching-tag.showRuler`               | `true`                                           | Enables/disables showing highlighted tag pair in ruler section                              |\n| `highlight-matching-tag.highlightSelfClosing`    | `false`                                          | Should self-closing tags be highlighted too (can be useful for multiline self-closing tags) |\n| `highlight-matching-tag.highlightFromContent`    | `false`                                          | Whether to highlight matching tag from inside the tag content                               |\n| `highlight-matching-tag.highlightFromName`       | `true`                                           | Whether to highlight matching tag from the tag name                                         |\n| `highlight-matching-tag.highlightFromAttributes` | `true`                                           | Whether to highlight matching tag from the tag attributes                                   |\n| `highlight-matching-tag.noDefaultEmptyElements`  | `false`                                          | Don't use default HTML empty elements                                                       |\n| `highlight-matching-tag.customEmptyElements`     | `null`                                           | Custom [empty elements](#empty-elements) in addition to the default HTML empty elements     |\n| `highlight-matching-tag.styles`                  | `{ opening: { name: { underline: 'yellow' } } }` | Custom styling configuration, see [Styling Options](#styling-options)                       |\n\n## Styling Options\n\nBy default, the tag pair's names are underlined with a yellow line. The setting looks like this:\n\n```json\n\"highlight-matching-tag.styles\": {\n  \"opening\": {\n    \"name\": {\n      \"underline\": \"yellow\"\n    }\n  }\n}\n```\n\n### Custom styling\n\nVersion 0.8.0 of this extension introduces new styling options, but old custom settings can be automatically migrated after update.\n\nNow you can change highlighting styles by providing your own style in User Settings (JSON) as `highlight-matching-tag.styles`. The setting accepts an object with two fields:\n\n- **opening: _Style_** - opening tag styles when highlighting (or both, if closing style is not provided)\n- **closing: _Style_** - closing tag styles, optional\n- **inner: _Decoration_** - styles of text between opening and closing tags, optional\n\n**_Style_** objects can have any combination of fields defining styles for parts of the tag:\n\n- **name: _Decoration_** - decoration for name part of tag\n- **left: _Decoration_** - decoration for left side of tag (character \u003c)\n- **right: _Decoration_** - decoration for right side of tag (character \u003e)\n- **full: _Decoration_** - decoration for the whole tag (including \u003c and \u003e)\n\n**_Decoration_** objects define tag's style with optional fields:\n\n- **highlight: _string_** - background color (e.g. \"#666666\")\n- **underline: _string_** - underline color\n- **surround: _string_** - surrounding border's color\n- **custom: _vscode.DecorationRenderOptions_** - custom css rules for styling ([`vscode.DecorationRenderOptions`](https://code.visualstudio.com/docs/extensionAPI/vscode-api#DecorationRenderOptions)). This is basically an object with camelCase CSS rules. It can also accept different styles for light or dark color themes.\n\nColors used in gutter are the same as the ones used for highlighting/underlining, or yellow by default for custom rules. You can change them by setting: `overviewRulerColor` decoration option to the color that you want.\n\n### Styling Examples\n\nThis is the old version's style, with the new styling options:\n\n```json\n\"highlight-matching-tag.styles\": {\n  \"opening\": {\n    \"left\": {\n      \"custom\": {\n        \"borderWidth\": \"0 0 0 1px\",\n        \"borderStyle\": \"dotted\",\n        \"borderColor\": \"white\",\n        \"borderRadius\": \"5px\",\n        \"overviewRulerColor\": \"white\"\n      }\n    },\n    \"right\": {\n      \"custom\": {\n        \"borderWidth\": \"0 1px 0 0\",\n        \"borderStyle\": \"dotted\",\n        \"borderColor\": \"white\",\n        \"borderRadius\": \"5px\",\n        \"overviewRulerColor\": \"white\"\n      }\n    }\n  }\n}\n```\n\nResult:\n\n![old](https://images2.imgbox.com/3a/c2/ljn6gN20_o.png)\n\n---\n\nThis is an example showing off different styling options:\n\n```json\n\"highlight-matching-tag.styles\": {\n  \"opening\": {\n    \"left\": {\n      \"underline\": \"yellow\"\n    },\n    \"right\": {\n      \"surround\": \"#155FFA\"\n    },\n    \"name\": {\n      \"highlight\": \"rgba(180, 20, 80, 0.3)\"\n    }\n  },\n  \"closing\": {\n    \"full\": {\n      \"custom\": {\n        \"dark\": {\n          \"borderWidth\": \"0 0 1px 0\",\n          \"borderColor\": \"white\",\n          \"borderStyle\": \"solid\",\n          \"borderRadius\": \"4px\",\n          \"right\": \"10px\"\n        },\n        \"light\": {\n          \"borderWidth\": \"0 0 1px 0\",\n          \"borderColor\": \"brown\",\n          \"borderStyle\": \"solid\",\n          \"borderRadius\": \"4px\",\n          \"right\": \"10px\"\n        }\n      }\n    }\n  }\n}\n```\n\nResult dark theme:\n\n![dark](https://images2.imgbox.com/85/d6/qRBWNUgu_o.png)\n\nResult light theme:\n\n![light](https://images2.imgbox.com/16/66/y47CkpXm_o.png)\n\n## Commands\n\nUsed in Command Palette (Win/Linux: `Ctrl`+`Shift`+`P`; Mac: `Cmd`+`Shift`+`P`) by searching for command name. Can also be bound to [Keyboard Shortcuts](https://code.visualstudio.com/docs/getstarted/keybindings).\n\n- Jump to matching tag\n- Select contents of matching tag pair\n\n## Empty elements\n\nThe plugin is able interpret some unclosed tags as self-closing. By default they correspond with HTML [empty elements](https://developer.mozilla.org/en-US/docs/Glossary/Empty_element) (img, meta, link, etc.).\n\nYou can disable or extend them by changing `highlight-matching-tag.noDefaultEmptyElements` and/or `highlight-matching-tag.customEmptyElements` configuration options.\n\nFor example, this will additionally assume that `custom` and `no-content` elements are always self-closing and can't have any content:\n\n```\n\"highlight-matching-tag.highlightSelfClosing\": true,\n\"highlight-matching-tag.customEmptyElements\": [\n  \"custom\",\n  \"no-content\"\n]\n```\n\n## Contributing\n\nIf you want to contribute to the development of the plugin, please consult the [contribution guidelines](https://github.com/vincaslt/vscode-highlight-matching-tag/blob/master/CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvincaslt%2Fvscode-highlight-matching-tag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvincaslt%2Fvscode-highlight-matching-tag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvincaslt%2Fvscode-highlight-matching-tag/lists"}