Highlight matching HTML tag

Highlight matching HTML tag

1
NewbieNewbie
1

    May 21, 2008#1

    Hello.

    I looked a bit through the manual, couldn't find the one most important thing I'd like to have:

    When the cursor is for example somewhere on <div>, I'd like to see the matching </div> colored somehow
    .
    Is there an option to do this?

    6,686585
    Grand MasterGrand Master
    6,686585

      May 21, 2008#2

      There is no such feature in UltraEdit for Windows v14.00. UltraEdit is a general text editor and not an editor specific written for editing HTML files. If the HTML file is well structured (not everything is on the same line) and you have code folding enabled, you can fold a div block to see where the matching </div> is. You can use HTML Tidy to reformat your HTML file to get a good structure.

      If this is still not enough for you and you want the ultimate support as in real HTML editors, you can develop a script which searches for the matching tag. But this script would not be easy. Maybe there is anywhere a JavaScript which is exactly for that job and can be converted to work in UltraEdit.

      What works is using the command Search - Match Brace to select everything from <div> to the matching </div>. But only if you have in your syntax highlighting wordfile defined for "HTML":

      /Open Brace Strings =  "<h1>" "<div>" "<p>"
      /Close Brace Strings = "</h1>" "</div>" "</p>"


      But then only <div>...</div> are recognized and not <div class="name">...</div>. Using

      /Open Brace Strings =  "<h1" "<div" "<p"
      /Close Brace Strings = "</h1>" "</div>" "</p>"


      does not work (UE v14.00b) and I don't know why it fails. I reported this issue to IDM.

      With the working <div> </div> brace strings the feature auto-brace matching (syntax highlighting configuration dialog) highlights < of matching <div> or > of matching </div> depending on the caret position.

      Edit: I found out 5 years later that a brace string definition like following makes a quite good job:

      Code: Select all

      /Open Brace Strings = "<a" "<acronym" "<b>" "<b" "<body" "<button" "<caption>" "<caption" "<dd>" "<dd" "<dir>" "<dir" "<div>" "<div" "<dl>" "<dl" "<dt>" "<dt" "<em>" "<em" "<font" "<form" "<frameset" "<h1>" "<h1" "<h2>" "<h2" "<h3>" "<h3" "<h4>" "<h4" "<h5>" "<h5" "<h6>" "<h6" "<head>" "<header>" "<i>" "<i" "<iframe" "<kbd>" "<kbd" "<li>" "<li" "<map" "<noframes>" "<noscript>" "<ol>" "<ol" "<option>" "<option" "<p>" "<p" "<pre>" "<pre" "<script>" "<script" "<select" "<small>" "<small" "<span" "<strong>" "<strong" "<style>" "<style" "<sub>" "<sub" "<sup>" "<sup" "<table>" "<table" "<td>" "<td" "<textarea" "<th>" "<th" "<title>" "<tr>" "<tr" "<tt>" "<tt" "<u>" "<u" "<ul>" "<ul" "<var>"
      /Close Brace Strings = "</a>" "</acronym>" "</b>" "</b>" "</body>" "</button>" "</caption>" "</caption>" "</dd>" "</dd>" "</dir>" "</dir>" "</div>" "</div>" "</dl>" "</dl>" "</dt>" "</dt>" "</em>" "</em>" "</font>" "</form>" "</frameset>" "</h1>" "</h1>" "</h2>" "</h2>" "</h3>" "</h3>" "</h4>" "</h4>" "</h5>" "</h5>" "</h6>" "</h6>" "</head>" "</header>" "</i>" "</i>" "</iframe>" "</kbd>" "</kbd>" "</li>" "</li>" "</map>" "</noframes>" "</noscript>" "</ol>" "</ol>" "</option>" "</option>" "</p>" "</p>" "</pre>" "</pre>" "</script>" "</script>" "</select>" "</small>" "</small>" "</span>" "</strong>" "</strong>" "</style>" "</style>" "</sub>" "</sub>" "</sup>" "</sup>" "</table>" "</table>" "</td>" "</td>" "</textarea>" "</th>" "</th>" "</title>" "</tr>" "</tr>" "</tt>" "</tt>" "</u>" "</u>" "</ul>" "</ul>" "</var>"
      
      There is only 1 problem with such a brace string definition: Most of the end tags are listed twice for same start tag.

      That is necessary as most start tags can be without or with attributes and UltraEdit ignores <td> if just <td is defined as brace string in the wordfile.

      The double usage of an end tag as close brace string for different open brace strings results in an incorrect match in some cases like in the example below:

      Code: Select all

      <table border="0">
         <tr>
            <td valign="top">Parameter: <strong>/A</strong></td>
            <td>Lists files or directories with specified attributes.
               <table cellspacing="0" cellpadding="0" border="0">
                  <tr>
                    <td valign="top" rowspan="5">Attributes:&nbsp;</td>
                    <td width="25">A</td>
                    <td>files to archive</td>
                  </tr>
                  <tr>
                    <td>D</td>
                    <td>directories</td>
                  </tr>
                  <tr>
                    <td>H</td>
                    <td>hidden files</td>
                  </tr>
                  <tr>
                    <td>R</td>
                    <td>read-only files</td>
                  </tr>
                  <tr>
                    <td>S</td>
                    <td>system files</td>
                  </tr>
               </table>
               - placed first reverts the meaning.
            </td>
         </tr>
      </table>
      Setting caret at beginning of line 4 and executing the command Search - Match Brace respectively Search - Select to Matching Brace results in selecting the text up to next </td> on line 7 instead of the really matching end tag on line 29.

      The reason is that <td> on line 4 is without an attribute while the next <td valign="top" rowspan="5"> is with attributes.

      UltraEdit differentiates between <td> and <td according to the open brace strings definition, but both have </td> as close brace. So the behavior is correct from the view of the match brace command, but is not correct for a "match tag".

      The command Search - Go to Matching Brace introduced with UltraEdit for Windows v17.10 and UEStudio v11.10 can be used also with those brace strings. The caret must be set at < of start or end tag to set caret to > of matching end tag in case of using the command on < of a start tag or to set caret to < of matching start tag in case of using the command on < of an end tag.
      Best regards from an UC/UE/UES for Windows user from Austria

      1
      NewbieNewbie
      1

        Jan 27, 2009#3

        When editing HTML, is there any way to make UE highlight the matching tag of the one your cursor is currently in?

        If this isn't possible, could this be included in a future release? It's absolutely invaluable if you need to work with messy HTML or XML, yet only Notepad++, Eclipse, and Visual Studio have this feature, as far as I can tell.

        Since I'm editing HTML at least 50% of the time and even running the documents trough TIDY to clean them up isn't enough, it's a feature I can't do without. At this point, it's the only thing keeping me from switching from Notepad++ to a registered version of UE.

        6,686585
        Grand MasterGrand Master
        6,686585

          Jan 28, 2009#4

          See above. Unfortunately I don't see any change in UE v14.20.1.1008 for what I have written in my first post. Maybe more users have to report this issue by email to IDM support to increase the priority for fixing it.

            Apr 04, 2011#5

            UltraEdit for Windows v17.00 and UEStudio v11.00 have exactly the feature as discussed here and described by dpmccabe.

            At Advanced - Configuration - Editor Display - Advanced there is the configuration setting Display XML/HTML tag highlighting which is by default enabled. That feature highlights now the entire XML/HTML tag if the caret is inside the opening or closing tag and its matching tag in any file which is syntax highlighted with a wordfile containing the language marker keyword HTML_LANG or XML_LANG in the first line. There is nothing to define in the syntax highlighting wordfile for HTML, XHTML or XML for the XML/HTML tag highlighting feature. This feature can be disabled for those who want the content (tag name, attributes and values) of a tag syntax highlighted during editing a tag instead of highlighting the entire opening and closing tag.

            The color used for highlighting the matching tags can be defined at View - Set Colors or View - Themes - Manages Themes - Editor and has the name Tags.

            With UltraEdit for Windows v18.00 and UEStudio v12.00 the configuration setting Display XML/HTML tag highlighting moved to Advanced - Configuration - Editor - XML/HTML and there are the two additional configuration settings Automatically close XML/HTML tags and Position close tag on separate line.

            8
            NewbieNewbie
            8

              Aug 08, 2019#6

              This highlighting feature is not working in my UltraEdit for Windows version 26.10.0.72. On placing the cursor on the opening and closing brackets of an XML tag results in highlighting the closing/opening tag, but putting the cursor inside the tag name isn't highlighting the matching closing/opening tag name.

              I have this option enabled:
              Advanced - Configuration - Editor - XML/HTML/Markdown: Display XML/HTML tag highlighting

              This feature is working for .html files.

              6,686585
              Grand MasterGrand Master
              6,686585

                Aug 09, 2019#7

                PJP, I cannot reproduce a not working XML tag highlighting with UltraEdit v26.10.0.72 using default settings, i.e. the entire directory %APPDATA%\IDMComp\UltraEdit was created new by UltraEdit on start, see attached image. The entire start and matching end tag is highlighted with caret anywhere inside start or end tag.

                Do you use a customized wordfile for XML syntax highlighting?

                Do you use a custom theme where the color for Tags (last item on tab Editor of Manage Themes window) is not good configured?
                xml_tag_highlighting.png (8.46KiB)
                Highlighted start and end tag of an XML element in file commandpalette.xml.
                Best regards from an UC/UE/UES for Windows user from Austria

                8
                NewbieNewbie
                8

                  Aug 26, 2019#8

                  I was able to get XML tag highlighting to work, but only by enabling this option:
                  Editor display > Code folding > Enable show/hide lines and code folding

                  I do not want to see code folding, but at least this is a work-around until this bug (?) is fixed. Can anyone else confirm XML tag highlighting only works if the above option is enabled?

                  6,686585
                  Grand MasterGrand Master
                  6,686585

                    Aug 27, 2019#9

                    You are right. HTML tag highlighting works even with code folding for syntax highlighted files is not enabled in configuration. But XML tag highlighting requires at the moment (v26.10.0.72) an enabled code folding for syntax highlighted files.

                    Please report this by email to IDM support and require an enhancement for XML tag highlighting with code folding not enabled in configuration for syntax highlighted files.
                    Best regards from an UC/UE/UES for Windows user from Austria