Fix playground HTML, tweak playground colors

docs/assets/js/playground.js

@@ -3,11 +3,19 @@ let tree;
 (async () => {
   const CAPTURE_REGEX = /@\s*([\w\._-]+)/g;
   const COLORS_BY_INDEX = [
-    'red',
-    'green',
     'blue',
-    'orange',
-    'violet',
+    'chocolate',
+    'darkblue',
+    'darkcyan',
+    'darkgreen',
+    'darkred',
+    'darkslategray',
+    'dimgray',
+    'green',
+    'indigo',
+    'navy',
+    'red',
+    'sienna',
   ];
 
   const scriptURL = document.currentScript.getAttribute('src');
@@ -213,7 +221,10 @@ let tree;
           {row: startRow, column: 0},
           {row: endRow, column: 0},
         );
+        let lastNodeId;
         for (const {name, node} of captures) {
+          if (node.id === lastNodeId) continue;
+          lastNodeId = node.id;
           const {startPosition, endPosition} = node;
           codeEditor.markText(
             {line: startPosition.row, ch: startPosition.column},

docs/section-6-playground.html

@@ -37,6 +37,11 @@ permalink: playground
 <textarea id="code-input">
 </textarea>
 
+<div id="query-container" style="visibility: hidden; position: absolute;">
+  <h4>Query</h4>
+  <textarea id="query-input"></textarea>
+</div>
+
 <h4>Tree</h4>
 <span id="update-time"></span>
 <div id="output-container-scroll">