Highlighting of HTML tag tree

Since version 2.1, WebStorm & PhpStorm both come with a new code highlighting feature. It makes it easier to work with big and complex HTML files, with deep nested tags structure:

Please note that highlighting is only activated when there is more than one tag with the same name in the hierarchy.

By default, only 6 parent tags are highlighted with 6 different colors. You can change the depth to highlight or completely disable the feature in Settings | Editor | Appearance | Enable HTML tag tree highlighting.

Also you can tweak the colors in Settings | Editor | Colors & Fonts | HTML.

Download WebStorm (or PhpStorm, if you use PHP) and try!

Comments below can no longer be edited.

6 Responses to Highlighting of HTML tag tree

  1. René says:

    July 6, 2011

    i really like this Feature
    thanks!

  2. Eduard says:

    July 7, 2011

    The Settings are also present in PyCharm, but the highlights are missing both in the preview and in the editor. Any plans to fully support it in PyCharm?

  3. Eduard says:

    July 7, 2011

    Sorry, it works ok in PyCharm, I skipped the part with “highlighting is only activated when there is more than one tag with the same name in the hierarchy.”

  4. Eugene Toporov says:

    July 7, 2011

    @Eduard: the feature does not yet fully work for Django templates and all html files are treated as such in a Django project by PyCharm. We plan to have this feature supported in one of next PyCharm versions.

  5. Gregorio Ramirez says:

    July 13, 2011

    What’s with the absence of eaps?

  6. Alexey Korsun says:

    July 15, 2011

    @Gregorio: Summer 🙂 Developers also need to have vacation 🙂