feat(developer): add button to show parsed structure

nknapp · Jan 6, 2020 · 2210c6f · 2210c6f
1 parent bf2bd4c
commit 2210c6f
Showing 1 changed file with 27 additions and 2 deletions.
diff --git a/tools/developer.html b/tools/developer.html
@@ -26,6 +26,25 @@
     .hljs-debug {
       color: red; font-weight: bold;
     }
+
+    .visible-structure pre code span {
+      substrings: replace(" " "\t", "␣" "→→→→") prepend("\n", "↵");
+      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 +54,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 +81,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 +98,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;