facelessuser / BracketHighlighter

Bracket and tag highlighter for Sublime Text
https://facelessuser.github.io/BracketHighlighter/
1.74k stars 245 forks source link

BracketHighlighter Bug #464

Closed jctiru closed 6 years ago

jctiru commented 6 years ago

Description

  1. Ignore threshold on popup and command palette not working.
  2. On within threshold, on some very long text, selecting/highlighting the opening bracket will result in "Matching bracket could not be found" but selecting/highlighting the closing tag will result in successful matching.

(Currently using 20,000 as threshold for testing purposes) image image

Support Info

Steps to Reproduce Issue

HTML Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="x-ua-compatible" name="ie=edge">
    <!-- Normalizer -->
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <!-- Foundation 5.5.3 -->
    <link rel="stylesheet" type="text/css" href="css/foundation.min.css">
    <!-- Foundation Icons 3 -->
    <link rel="stylesheet" type="text/css" href="css/foundation-icons.css">
    <!-- Swiper Carousel 4.0.7 -->
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
    <!-- Swiper Carousel Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/carouselstyle.css">
    <!-- Global CSS -->
    <link rel="stylesheet" type="text/css" href="css/style-global.css">
    <!-- Custom home.html CSS -->
    <link rel="stylesheet" type="text/css" href="css/style-index.css">
    <!-- Favicon -->
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
    <!-- Google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
    <title>Tokyo</title>
</head>

<body>
    <!-- Navbar -->
    <div class="fixed contain-to-grid">
        <nav class="top-bar" data-topbar>
            <ul class="title-area">
                <li class="name">
                    <h2><a href="#">Tokyo</a></h2>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
            </ul>
            <section class="top-bar-section">
                <ul class="right">
                    <li class="divider"></li>
                    <li><a href="#">Home</a></li>
                    <li class="divider"></li>
                    <li class="has-dropdown">
                        <a>Places</a>
                        <ul class="dropdown">
                            <li>
                                <label>Sites</label>
                            </li>
                            <li><a href="place-1-asakusa-and-the-seno-ji-temple.html">Asakusa and the Seno-ji Temple</a></li>
                            <li><a href="place-2-ginza-district.html">Ginza District</a></li>
                            <li><a href="place-3-imperial-palace.html">The Imperial Palace</a></li>
                            <li><a href="place-4-kabuki-za-theatre.html">The Kabuzi-ka Theatre</a></li>
                            <li><a href="place-5-meiji-shrine.html">The Meiji Shrine</a></li>
                            <li><a href="place-6-edo-tokyo-museum.html">Miraikan and Edo-Tokyo Museums</a></li>
                            <li><a href="place-7-national-art-center.html">The National Art Center</a></li>
                            <li><a href="place-8-national-museum.html">Tokyo National Museum</a></li>
                            <li><a href="place-9-museum-science.html">National Museum of Nature and Science</a></li>
                            <li><a href="place-10-museum-western-art.html">National Museum of Western Art</a></li>
                            <li><a href="place-11-skytree.html">The Tokyo Skytree</a></li>
                            <li><a href="place-12-ueno.html">Ueno Park and Zoo</a></li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li><a href="about.html">About</a></li>
                    <li class="divider"></li>
                    <li><a href="faq.html">FAQ</a></li>
                    <li class="divider"></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </section>
        </nav>
    </div>
    <!-- End Navbar -->
    <!-- Header -->
    <header class="row">
        <div class="large-12 columns text-center">
            <div class="panel">
                <h1>Welcome to Tokyo!</h1>
                <h2>東京へようこそ!</h2>
            </div>
        </div>
        <hr>
    </header>
    <!-- End Header -->
    <!-- Carousel Div -->
    <div class="row">
        <div class="large-12 columns">
            <!-- Swiper -->
            <div class="swiper-container panel th">
                <div class="swiper-container gallery-top">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-asakusa-senso-ji-temple.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-ginza.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-imperial-palace.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-kabuki-za-theatre.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-meiji-shrine.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-miraikan-edo-tokyo-museums.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-national-art-center.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-national-museum.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-national-museum-nature-science.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-national-museum-western-art.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-skytree.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-ueno-park-zoo.jpg)"></div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>
                <div class="swiper-container gallery-thumbs">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-asakusa-senso-ji-temple.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-ginza.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-imperial-palace.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-kabuki-za-theatre.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-meiji-shrine.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-miraikan-edo-tokyo-museums.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-national-art-center.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-national-museum.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-national-museum-nature-science.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-national-museum-western-art.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-skytree.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/japan-tokyo-ueno-park-zoo.jpg)"></div>
                    </div>
                </div>
            </div>
            <!-- End Swiper -->
        </div>
    </div>
    <!-- End Carousel Div -->
    <!-- Main Section -->
    <main class="text-center">
        <div class="row">
            <hr />
            <div class="large-4 columns">
                <a href="place-1-asakusa-and-the-seno-ji-temple.html" class="th"><img src="img/japan-tokyo-asakusa-senso-ji-temple.jpg"/></a>
                <div class="panel">
                    <h4>Asakusa and the Seno-ji Temple</h4>
                </div>
            </div>
            <div class="large-4 columns">
                <a href="place-2-ginza-district.html" class="th"><img src="img/japan-tokyo-ginza.jpg"/></a>
                <div class="panel">
                    <h4>Ginza District</h4>
                </div>
            </div>
            <div class="large-4 columns">
                <a href="place-3-imperial-palace.html" class="th"><img src="img/japan-tokyo-imperial-palace.jpg"/></a>
                <div class="panel">
                    <h4>The Imperial Palace</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="large-4 columns">
                <a href="place-4-kabuki-za-theatre.html" class="th"><img src="img/japan-tokyo-kabuki-za-theatre.jpg"/></a>
                <div class="panel">
                    <h4>The Kabuki-za Theatre</h4>
                </div>
            </div>
            <div class="large-4 columns">
                <a href="place-5-meiji-shrine.html" class="th"><img src="img/japan-tokyo-meiji-shrine.jpg"/></a>
                <div class="panel">
                    <h4>The Meiji Shrine</h4>
                </div>
            </div>
            <div class="large-4 columns">
                <a href="place-6-edo-tokyo-museum.html" class="th"><img src="img/japan-tokyo-miraikan-edo-tokyo-museums.jpg"/></a>
                <div class="panel">
                    <h4>Miraikan and Edo-Tokyo Museums</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="large-4 columns">
                <a href="place-7-national-art-center.html" class="th"><img src="img/japan-tokyo-national-art-center.jpg"/></a>
                <div class="panel">
                    <h4>The National Art Center</h4>
                </div>
            </div>
            <div class="large-4 columns">
                <a href="place-8-national-museum.html" class="th"><img src="img/japan-tokyo-national-museum.jpg"/></a>
                <div class="panel">
                    <h4>Tokyo National Museum</h4>
                </div>
            </div>
            <div class="large-4 columns">
                <a href="place-9-museum-science.html" class="th"><img src="img/japan-tokyo-national-museum-nature-science.jpg"/></a>
                <div class="panel">
                    <h4>National Museum of Nature and Science</h4>
                </div>
            </div>
        </div>
        </div>
        <div class="row">
            <div class="large-4 columns">
                <a href="place-10-museum-western-art.html" class="th"><img src="img/japan-tokyo-national-museum-western-art.jpg"/></a>
                <div class="panel">
                    <h4>National Museum of Western Art</h4>
                </div>
            </div>
            <div class="large-4 columns">
                <a href="place-11-skytree.html" class="th"><img src="img/japan-tokyo-skytree.jpg"/></a>
                <div class="panel">
                    <h4>The Tokyo Skytree</h4>
                </div>
            </div>
            <div class="large-4 columns">
                <a href="place-12-ueno.html" class="th"><img src="img/japan-tokyo-ueno-park-zoo.jpg"/></a>
                <div class="panel">
                    <h4>Ueno Park and Zoo</h4>
                </div>
            </div>
        </div>
    </main>
    <!-- End Main Section -->
    <!-- Contact -->
    <section class="row">
        <hr>
        <div class="large-12 columns">
            <div class="panel text-center">
                <div class="row" data-equalizer>
                    <div class="large-6 medium-6 columns" data-equalizer-watch>
                        <div id="contact-text-wrapper">
                            <h4>Get in touch!</h4>
                            <p>We'd love to hear from you, you attractive person you.</p>
                        </div>
                    </div>
                    <div class="large-6 medium-6 columns" data-equalizer-watch>
                        <a href="contact.html" class="button" id="index-button">Contact Us</a>
                    </div>
                </div>
            </div>
        </div>
        <hr />
    </section>
    <!-- End Contact -->
    <!-- Footer -->
    <footer>
        <div class="row">
            <div class="large-12 columns">
                <div class="row" data-equalizer>
                    <div class="large-6 columns" data-equalizer-watch>
                        <div class="footer-container">
                            <p class="text-center footer-element-center">Disclaimer: No copyright infringement is intended. For educational purposes only. Please check About section for more info.</p>
                        </div>
                    </div>
                    <div class="large-6 columns" data-equalizer-watch>
                        <ul class="">
                            <li><a href="#"><i class="fi-social-facebook"></i></a></li>
                            <li><a href="#"><i class="fi-social-twitter"></i></a></li>
                            <li><a href="#"><i class="fi-social-reddit"></i></a></li>
                            <li><a href="#"><i class="fi-social-github"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- End Footer -->
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="js/jquery-migrate-3.0.1.min.js"></script>
    <!-- Foundation  -->
    <script type="text/javascript" src="js/foundation.min.js"></script>
    <!-- Swiper JS -->
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <!-- Initialize Swiper -->
    <script type="text/javascript" src="js/carouselscript.js"></script>
    <!-- Sticky Footer -->
    <script type="text/javascript" src="js/stickyFooter.js"></script>
    <!-- My script -->
    <script type="text/javascript" src="js/script.js"></script>
</body>

</html>
  1. Select the opening html tag <html> and there will be no matching bracket.
  2. Click on "Match brackets without threshold" but there will be no effect.
  3. Select ignore threshold on command palette but there will be no effect.
  4. Select the closing html tag </html> and there is successful match.
facelessuser commented 6 years ago

Line 194 you have an extra </div>. Remember that just because your HTML loads in a browser, it doesn't mean that it is proper, valid HTML. HTML browsers are, in my opinion, too forgiving, which leads to people writing bad HTML. In the future, at least when dealing with HTML, please run it through an HTML validator first: https://validator.w3.org/#validate_by_input. 90% of the time when BH fails in HTML, it is because of bad HTML, not a problem with the algorithm for matching.

facelessuser commented 6 years ago

Also, BH can help you figure out issues like this if you take the time to walk down the file and see where the matching goes wrong. You can very quickly identify where things go wrong by simply testing out blocks down the document. You'll see sub-blocks match fine, and then you'll find some that don't. And as you descend into the ones which don't, you'll find the smallest possible failing blocks and usually see why your matching failed.

facelessuser commented 6 years ago

As this is a user error, I'll close this issue.

jctiru commented 6 years ago

Thank you for the fast reply and tips. It is clearly my bad and sorry for the trouble. Thanks again for the whole awesome project.