| <!doctype html> |
| <html class="no-js" lang="en" dir="ltr"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> |
| <title>Using the Visual Debugger in NetBeans IDE</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta name="description" content="Using the Visual Debugger in NetBeans IDE - Apache NetBeans"> |
| <meta name="author" content="Apache NetBeans"> |
| <meta name="description" content="Using the Visual Debugger in NetBeans IDE - Apache NetBeans"> |
| <meta name="keywords" content="Apache NetBeans, Tutorials, Using the Visual Debugger in NetBeans IDE"> |
| <meta name="generator" content="Apache NetBeans"> |
| <link rel="stylesheet" href="../../../../../../_/css/font-awesome.min.css"> |
| <link rel="alternate" type="application/atom+xml" title="Apache NetBeans Blog" href="https://netbeans.apache.org/blogs/atom" /> |
| <link rel="stylesheet" href="../../../../../../_/css/highlightjs/default.min.css"> |
| <link rel="stylesheet" href="../../../../../../_/css/netbeans.css"> |
| <link rel="apple-touch-icon" sizes="180x180" href="../../../../../../_/images/fav/apple-touch-icon.png"> |
| <link rel="icon" type="image/png" sizes="32x32" href="../../../../../../_/images/fav/favicon-32x32.png"> |
| <link rel="icon" type="image/png" sizes="16x16" href="../../../../../../_/images/fav/favicon-16x16.png"> |
| <link rel="manifest" href="../../../../../../_/images/fav/site.webmanifest"> |
| <link rel="mask-icon" href="../../../../../../_/images/fav/safari-pinned-tab.svg" color="#5bbad5"> |
| <meta name="msapplication-TileColor" content="#ffc40d"> |
| <meta name="theme-color" content="#ffffff"> |
| <link href="../../../../../../_/css/font-open-sans.css" rel="stylesheet"> |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| http://www.apache.org/licenses/LICENSE-2.0 |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| </head> |
| <body> |
| <div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium"> |
| <button type="button" data-toggle="responsive-menu"><i style='font-size: 32px; color: #fff; padding: 8px' class='fa fa-bars'></i></button> |
| <div class="title-bar-title">Apache NetBeans</div> |
| </div> |
| <div class="top-bar" id="responsive-menu"> |
| <div class='top-bar-left'> |
| <a class='title' href="../../../../../../index.html"><img src='../../../../../../_/images/apache-netbeans.svg' style='padding: 8px; height: 48px;'> Apache NetBeans</a> |
| </div> |
| <div class="top-bar-right"> |
| <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown"> |
| <li> <input id="search-input" type="text" placeholder="Search the docs"> </li> |
| <li> <a href="../../../../../../front/main/community">Community</a> </li> |
| <li> <a href="../../../../../../front/main/participate">Participate</a> </li> |
| <li> <a href="../../../../../../front/main/blogs">Blog</a></li> |
| <li> <a href="../../../../../../front/main/help">Get Help</a> </li> |
| <li> <a href="https://plugins.netbeans.apache.org/">Plugins</a> </li> |
| <li> <a href="../../../../../../front/main/download">Download</a> </li> |
| </ul> |
| </div> |
| </div> |
| |
| <!-- src/templates/news --> |
| <section class="hero news alternate"> |
| <div class='grid-container'> |
| <div class='cell'> |
| <div class="annotation">Latest release</div> |
| <h1>Apache NetBeans 27</h1> |
| <p><a class="button success" href="../../../../../../front/main/download/nb27">Download</a></p> |
| </div> |
| </div> |
| </section> |
| <div class='grid-container main-content tutorial'> |
| <article class="doc"> |
| <h1 class="sect0">Using the Visual Debugger in NetBeans IDE</h1> |
| <div class="sectionbody"> |
| <div class="admonitionblock note"> |
| <table> |
| <tbody><tr> |
| <td class="icon"><i class="fa icon-note" title="Note"></i></td> |
| <td class="content">This tutorial needs a review. |
| You can <a href="https://github.com/apache/netbeans-antora-tutorials/edit/main/modules/ROOT/pages/kb/docs/java/debug-visual.adoc" title="Edit this tutorial in github">edit it in GitHub </a> |
| following these <a href="../../../../../../tutorial/main/kb/docs/contributing">contribution guidelines.</a></td> |
| </tr></tbody> |
| </table> |
| </div> |
| </div> |
| <div id="toc" class="toc"> |
| <div id="toctitle"></div> |
| <ul class="sectlevel1"> |
| <li><a href="#_creating_the_anagram_game_sample_project">Creating the Anagram Game sample project</a></li> |
| <li><a href="#_taking_a_gui_snapshot">Taking a GUI Snapshot</a></li> |
| <li><a href="#_working_with_the_visual_debugger">Working with the Visual Debugger</a> |
| <ul class="sectlevel2"> |
| <li><a href="#_locating_the_source_code_for_components">Locating the Source Code for Components</a></li> |
| <li><a href="#_exploring_component_events">Exploring Component Events</a></li> |
| </ul> |
| </li> |
| </ul> |
| </div> |
| <div id="preamble"> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>This tutorial describes how to use the Visual Debugger to help you locate and debug the code for visual elements in your Java GUI applications. Specifically, you can use the Visual Debugger in Java Swing and JavaFX GUI applications.</p> |
| </div> |
| <div class="paragraph"> |
| <p>You will use the Visual Debugger to explore the Anagram Game sample project, which is a Java Swing application distributed with NetBeans. This document will demonstrate how to take a GUI snapshot of the application and then work with the snapshot to locate source code, add listeners to events, and view the event log of GUI components.</p> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="_creating_the_anagram_game_sample_project"><a class="anchor" href="#_creating_the_anagram_game_sample_project"></a>Creating the Anagram Game sample project</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>To open a new Java project, press:</p> |
| </div> |
| <table class="tableblock frame-all grid-all stretch"> |
| <colgroup> |
| <col style="width: 20%;"> |
| <col style="width: 80%;"> |
| </colgroup> |
| <tbody> |
| <tr> |
| <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Windows</strong>™/Linux</p></td> |
| <td class="tableblock halign-left valign-top"><p class="tableblock"><span class="keyseq"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>N</kbd></span></p></td> |
| </tr> |
| <tr> |
| <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>macOS</strong>™</p></td> |
| <td class="tableblock halign-left valign-top"><p class="tableblock"><span class="keyseq"><kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>N</kbd></span></p></td> |
| </tr> |
| </tbody> |
| </table> |
| <div class="paragraph"> |
| <p>or, select <strong>File > New Project…​</strong> from the menu bar. Then <strong>Choose Project</strong> by selecting <strong>Categories: Samples</strong>, <strong>Categories: Java with Ant</strong> and <strong>Projects: Anagram Game</strong>, then click <strong>Next ></strong>.</p> |
| </div> |
| <div class="paragraph"> |
| <p>For <strong>Name and Location</strong>, set <strong>Project Name: MyAnagram</strong>. Change <strong>Project Location:</strong> to any directory on your computer. From now on, this tutorial refers to this directory as <code><em>NetBeansProjects</em></code>.</p> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="_taking_a_gui_snapshot"><a class="anchor" href="#_taking_a_gui_snapshot"></a>Taking a GUI Snapshot</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>To start a debugging session, press:</p> |
| </div> |
| <table class="tableblock frame-all grid-all stretch"> |
| <colgroup> |
| <col style="width: 20%;"> |
| <col style="width: 80%;"> |
| </colgroup> |
| <tbody> |
| <tr> |
| <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Windows</strong>™/Linux</p></td> |
| <td class="tableblock halign-left valign-top"><p class="tableblock"><span class="keyseq"><kbd>Ctrl</kbd>+<kbd>F5</kbd></span></p></td> |
| </tr> |
| <tr> |
| <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>macOS</strong>™</p></td> |
| <td class="tableblock halign-left valign-top"><p class="tableblock"><span class="keyseq"><kbd>Command</kbd>+<kbd>F5</kbd></span></p></td> |
| </tr> |
| </tbody> |
| </table> |
| <div class="paragraph"> |
| <p>or, click the Debug button in the toolbar to start the debugging session. Alternatively, right-click the project node in the Projects window and choose Debug. When you start the session, the IDE will launch the Anagram Game application and open the Debugging window.</p> |
| </div> |
| <div class="paragraph"> |
| <p>Choose Debug > Take GUI Snapshot from the main menu.When you choose Take GUI Snapshot, the IDE will take a snapshot of the GUI and will open the snapshot in the main window, as shown below:</p> |
| </div> |
| <div class="openblock feature"> |
| <div class="content"> |
| <div class="imageblock xref-image left"> |
| <div class="content"> |
| <a class="image" href="../../../../_images/kb/docs/java/debug-fullscreen.png"><img src="../../../../_images/kb/docs/java/debug-fullscreen.png" alt="debug fullscreen"></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="_working_with_the_visual_debugger"><a class="anchor" href="#_working_with_the_visual_debugger"></a>Working with the Visual Debugger</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>The GUI snapshot is a visual debugging tool that can help you locate the source code for GUI components. The source code for GUI components can sometimes be difficult to locate and the snapshot provides a way for you to locate the code based on the GUI instead of searching through the code. You can select components in the snapshot and invoke tasks from the popup menu to view the source code for the component, show the listeners, and set breakpoints on components.</p> |
| </div> |
| <div class="sect2"> |
| <h3 id="_locating_the_source_code_for_components"><a class="anchor" href="#_locating_the_source_code_for_components"></a>Locating the Source Code for Components</h3> |
| <div class="paragraph"> |
| <p>This exercise will demonstrate how to use the GUI snapshot to navigate to the lines in the source code where a component is declared and defined. When you select a component in the GUI snapshot, you can use the popup menu to invoke various commands.</p> |
| </div> |
| <div class="paragraph"> |
| <p>The commands can also be invoked from the Navigator window by right-clicking the component and choosing the command in the popup menu.</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>In the GUI snapshot, select the Guess button. When you select a component in the snapshot, the IDE displays details about the selected component in the Properties window. If the Properties window is not visible you can choose Window > Properties from the main menu to open the window.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/debug-snapshot.png" alt="debug snapshot"> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>The IDE also displays the location of the component in the form hierarchy in the Navigator window. If the Navigator window is not visible you can choose Window > Navigator from the main menu to open the window.</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/debug-navigator.png" alt="debug navigator"> |
| </div> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Right-click the Guess button in the snapshot and choose Go to Component Declaration from the popup menu. When you choose Go to Component Declaration, the IDE opens the source file in the editor and moves the cursor to the line in the code where <code>guessButton</code> is declared.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/debug-gotodeclaration.png" alt="debug gotodeclaration"> |
| </div> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Right-click the Guess button in the snapshot again and choose Go to Component Source. When you choose Go to Component Source, the IDE opens the source file in the editor and moves the cursor to the line in the source code for the JButton component.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/debug-gotosource.png" alt="debug gotosource"> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>You can use the Go to Hierarchy Addition command in the GUI snapshot to locate the line in the source code where a component is added to its container. The Go to Hierarchy Addition command is disabled by default. You can enable the command in the Options window.</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Open the Options window by selecting the Option item in the Tools menu.</p> |
| </li> |
| <li> |
| <p>Click the Java Debugger tab in the Java category in the Options window.</p> |
| </li> |
| <li> |
| <p>Select Visual Debugging in the list of categories and select <strong>Track locations of component hierarchy changes</strong>. Click OK.</p> |
| </li> |
| <li> |
| <p>Stop your debugging session (if one is running). After you enable the command in the Options window, you will need to restart your debugging session and take a new GUI snapshot before you can use the Go to Hierarchy Addition command.</p> |
| </li> |
| <li> |
| <p>Start a new debugging session and take a GUI snapshot.</p> |
| </li> |
| <li> |
| <p>Right-click a component in the GUI snapshot and choose Go to Hierarchy Addition.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="paragraph"> |
| <p>The IDE will open the source code in the editor at the line where the component is added, as shown below:</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/debug-hierarchy.png" alt="debug hierarchy"> |
| </div> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="_exploring_component_events"><a class="anchor" href="#_exploring_component_events"></a>Exploring Component Events</h3> |
| <div class="paragraph"> |
| <p>This exercise will demonstrate how you can use the GUI snapshot and the Events window to explore component events, enabling you to locate component listeners and the events that are triggered by the components.</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Right-click the Guess button in the snapshot and choose Show Listeners from the popup menu. When you choose Show Listeners, the IDE opens the Events window. You can see that the Custom Listeners node is expanded.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/debug-customlisteners.png" alt="debug customlisteners"> |
| </div> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Right-click <strong>com.toy.anagrams.ui.Anagrams$3</strong> below the Custom Listeners node and choose Go to Component Source in the popup menu. The source code opens in the editor at the line where the listener is defined.</p> |
| </li> |
| <li> |
| <p>Select the empty text field in the snapshot. Alternatively, you can select the <code>guessedWord</code> text field in the Navigator window. When you select the text field, the items in the Events window will change automatically to display the listeners for the selected component.</p> |
| </li> |
| <li> |
| <p>In the Events window, double-click the Event Log node to open the Select Listener window. Alternatively, you can right-click the Event Log node and choose Set Logging Events from the popup menu.</p> |
| </li> |
| <li> |
| <p>Select the <code>java.awt.event.KeyListener</code> listener from the dialog. Click OK.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/debug-select-listener.png" alt="debug select listener"> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>This listener is now listening for keyboard events in the text field.</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>In the Anagram Game application, type some characters in the text field. When you type a character in the text field, the event is recorded in the events log. If you expand the Event Log node you can see that each keystroke is now logged. New events appear each time that you type in the Anagram Game application text field. If you expand an individual event, for example <code>keyPressed</code> , you can see the properties of that event in the log.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/java/debug-eventlog.png" alt="debug eventlog"> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>If you expand the "Called From…​" node for an event you can see the stack trace for the event.</p> |
| </div> |
| <div class="paragraph"> |
| <p>This tutorial was a basic introduction to the visual debugger in the IDE. The visual debugger enables you to easily locate the source code and log events for GUI components. This can be extremely helpful when you are debugging GUI applications.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <section class='tools'> |
| <ul class="menu align-center"> |
| <li><a title="Facebook" href="https://www.facebook.com/NetBeans"><i class="fa fa-md fa-facebook"></i></a></li> |
| <li><a title="Twitter" href="https://twitter.com/netbeans"><i class="fa fa-md fa-twitter"></i></a></li> |
| <li><a title="Github" href="https://github.com/apache/netbeans"><i class="fa fa-md fa-github"></i></a></li> |
| <li><a title="YouTube" href="https://www.youtube.com/user/netbeansvideos"><i class="fa fa-md fa-youtube"></i></a></li> |
| <li><a title="Atom Feed" href="https://netbeans.apache.org/blogs/atom"><i class="fa fa-mf fa-rss"></i></a></li> |
| <li><a title="Slack" href="https://tinyurl.com/netbeans-slack-signup/"><i class="fa fa-md fa-slack"></i></a></li> |
| <li><a title="Issues" href="https://github.com/apache/netbeans/issues"><i class="fa fa-mf fa-bug"></i></a></li> |
| </ul> |
| <ul class="menu align-center"> |
| <li><a href="https://github.com/apache/netbeans-antora-tutorials/edit/main/modules/ROOT/pages/kb/docs/java/debug-visual.adoc" title="See this page in github"><i class="fa fa-md fa-edit"></i> See this page in GitHub.</a></li> |
| </ul> |
| </section> |
| </article> |
| </div> |
| <div class='grid-container incubator-area' style='margin-top: 64px'> |
| <div class='grid-x grid-padding-x'> |
| <div class='large-auto cell text-center'> |
| <a href="https://www.apache.org/"> |
| <img style="height: 60px" title="Apache Software Foundation" src="../../../../../../_/images/asf_logo_wide.svg" /> |
| </a> |
| </div> |
| <div class='large-auto cell text-center'> |
| <a href="https://www.apache.org/events/current-event.html"> |
| <img style="width:234px; height: 60px;" title="Apache Software Foundation current event" src="https://www.apache.org/events/current-event-234x60.png"/> |
| </a> |
| </div> |
| </div> |
| </div> |
| <footer> |
| <div class="grid-container"> |
| <div class="grid-x grid-padding-x"> |
| <div class="large-auto cell"> |
| <h1><a href="../../../../../../front/main/about">About</a></h1> |
| <ul> |
| <li><a href="../../../../../../front/main/community/who">Who's Who</a></li> |
| <li><a href="https://www.apache.org/foundation/thanks.html">Thanks</a></li> |
| <li><a href="https://www.apache.org/foundation/sponsorship.html">Sponsorship</a></li> |
| <li><a href="https://www.apache.org/security/">Security</a></li> |
| </ul> |
| </div> |
| <div class="large-auto cell"> |
| <h1><a href="../../../../../../front/main/community">Community</a></h1> |
| <ul> |
| <li><a href="../../../../../../front/main/community/mailing-lists">Mailing lists</a></li> |
| <li><a href="../../../../../../front/main/community/committer">Becoming a committer</a></li> |
| <li><a href="../../../../../../front/main/community/events">NetBeans Events</a></li> |
| <li><a href="https://www.apache.org/events/current-event.html">Apache Events</a></li> |
| </ul> |
| </div> |
| <div class="large-auto cell"> |
| <h1><a href="../../../../../../front/main/participate">Participate</a></h1> |
| <ul> |
| <li><a href="../../../../../../front/main/participate/submit-pr">Submitting Pull Requests</a></li> |
| <li><a href="../../../../../../front/main/participate/report-issue">Reporting Issues</a></li> |
| <li><a href="../../../../../../front/main/participate/#documentation">Improving the documentation</a></li> |
| </ul> |
| </div> |
| <div class="large-auto cell"> |
| <h1><a href="../../../../../../front/main/help">Get Help</a></h1> |
| <ul> |
| <li><a href="../../../../../../front/main/help/#documentation">Documentation</a></li> |
| <li><a href="../../../../../../wiki/main/wiki">Wiki</a></li> |
| <li><a href="../../../../../../front/main/help/#support">Community Support</a></li> |
| <li><a href="../../../../../../front/main/help/commercial-support">Commercial Support</a></li> |
| </ul> |
| </div> |
| <div class="large-auto cell"> |
| <h1><a href="../../../../../../front/main/download">Download</a></h1> |
| <ul> |
| <li><a href="../../../../../../front/main/download">Releases</a></li> |
| <li><a href="https://plugins.netbeans.apache.org/">Plugins</a></li> |
| <li><a href="../../../../../../front/main/download/#_daily_builds_and_building_from_source">Building from source</a></li> |
| <li><a href="../../../../../../front/main/download/#_older_releases">Previous releases</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </footer> |
| <div class='footer-disclaimer'> |
| <div class="footer-disclaimer-content"> |
| <p>Copyright © 2017-2025 <a href="https://www.apache.org">The Apache Software Foundation</a>.</p> |
| <p>Licensed under the Apache <a href="https://www.apache.org/licenses/">license</a>, version 2.0</p> |
| <div style='max-width: 40em; margin: 0 auto'> |
| <p>Apache, Apache NetBeans, NetBeans, the Apache feather logo and the Apache NetBeans logo are trademarks of <a href="https://www.apache.org">The Apache Software Foundation</a>.</p> |
| <p>Oracle and Java are registered trademarks of Oracle and/or its affiliates.</p> |
| <p>The Apache NetBeans website conforms to the <a href="https://privacy.apache.org/policies/privacy-policy-public.html">Apache Software Foundation Privacy Policy</a></p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <script src="../../../../../../_/js/vendor/lunr.js"></script> |
| <script src="../../../../../../_/js/search-ui.js" id="search-ui-script" data-site-root-path="../../../../../.." data-snippet-length="100" data-stylesheet="../../../../../../_/css/search.css"></script> |
| <script async src="../../../../../../search-index.js"></script> |
| <script src="../../../../../../_/js/vendor/jquery.min.js"></script> |
| <script src="../../../../../../_/js/vendor/what-input.min.js"></script> |
| <script src="../../../../../../_/js/vendor/foundation.min.js"></script> |
| <script src="../../../../../../_/js/vendor/jquery.colorbox-min.js"></script> |
| <script src="../../../../../../_/js/netbeans.js"></script> |
| <script> |
| $(function(){ $(document).foundation(); }); |
| </script> |
| <script src="../../../../../../_/js/vendor/highlight.min.js"></script> |
| <script> |
| document.addEventListener('DOMContentLoaded', (event) => { |
| document.querySelectorAll('pre code').forEach((el) => { |
| hljs.highlightElement(el); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
