feat(developer): add button to show parsed structure (#2345)

highlightjs · Jan 15, 2020 · b33ef93 · b33ef93
1 parent 42f1df4
commit b33ef93
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -20,11 +20,15 @@ Language Improvements:
 - (vbnet) add nameof operator to the keywords (#2329) [Youssef Victor][]
 - (stan) updated with improved coverage of language keywords and patterns. (#1829) [Jeffrey Arnold][]
 
+Developer Tools:
+
+- feat(developer): add button to show parsed structure (#2345) [Nils Knappmeier][]
+
 [Jeffrey Arnold]: https://github.com/jrnold
 [Josh Goebel]: https://github.com/yyyc514
 [Philipp Engel]: https://github.com/interkosmos
 [Youssef Victor]: https://github.com/Youssef1313
-
+[Nils Knappmeier]: https://github.com/nknapp
 
 ## Version 9.17.1
 

diff --git a/tools/developer.html b/tools/developer.html
@@ -26,6 +26,24 @@
     .hljs-debug {
       color: red; font-weight: bold;
     }
+
+    .visible-structure pre code span {
+      display: block;
+      padding: 0.5em;
+      margin: 0.5em;
+      border: 1px dashed black;
+      position: relative;
+      white-space: pre;
+    }
+
+    .visible-structure pre code span:before {
+      display: block;
+      content: attr(class);
+      color: black;
+      font-size: 70%;
+      float:right;
+      margin-top: -0.5em;
+    }
   </style>
 </head>
 <body>
@@ -35,7 +53,8 @@ <h1>highlight.js developer</h1>
     <div>
       <textarea>Put code here…</textarea>
       <p>
-        <button>Update highlighting</button>
+        <button id="update-highlighting">Update highlighting</button>
+        <button id="show-structure">Show/hide structure</button>
         Language: <select class="languages"><option value="">(Auto)</option></select>
       </p>
     </div>
@@ -61,7 +80,7 @@ <h1>highlight.js developer</h1>
         select.append('<option>' + l + '</option>');
       });
 
-      $('.editor button').click(function(e) {
+      $('.editor button#update-highlighting').click(function(e) {
         var editor = $(this).parents('.editor');
         var language = editor.find('.languages').val();
         var source = editor.find('textarea').val();
@@ -78,6 +97,11 @@ <h1>highlight.js developer</h1>
         editor.find('output').text(result.value);
         SourceStore.save(source, language);
       });
+
+      $('.editor button#show-structure').click(function(e) {
+        var editor = $(this).parents('.editor');
+        editor.toggleClass('visible-structure');
+      });
     });
 
     var SourceStore;