title: How to properly colorize HTML tags in VSCode
body: <p>I am looking for a way to colorize the HTML start/end tags in VSCode so it's easier to read.  I installed the <a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2" rel="nofollow noreferrer">Bracket Pair Colorizer 2 Extension</a> and configured my <code>settings.json</code> file as follows to support colorized angle brackets:</p>
  
  <pre><code>"bracketPairColorizer.consecutivePairColors": [
      "()",
      "[]",
      "{}",
      ["&lt;", "&lt;/"],
      ["&lt;", "/&gt;"],
      [
          "Gold",
          "Orchid",
          "LightSkyBlue"
      ],
      "Red"
  ],
  </code></pre>
  
  <p>This works as long as all of the elements have an end tag. However, if a void element is present, then the colored tags no longer line up correctly as seen below.</p>
  
  <p><a href="https://i.stack.imgur.com/2JQYj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2JQYj.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/YG36f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YG36f.png" alt="enter image description here"></a></p>
  
  <p>Are there any workarounds to keep the brackets highlighted with the correct colors regardless of void elements?</p>