traxys/tree-sitter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add some documentation to the playground page

Browse source 
The minimal UI of the Playground could benefit from some documentation to make it easier for the newer users to understand what's going on. Also added a link to the new documentation from the local playground.

Closes https://github.com/tree-sitter/tree-sitter/issues/1305
This commit is contained in:
Nickolay 2024-02-15 18:24:21 +03:00 • committed by GitHub
parent 657d2b9c48
commit 6895b7a1e1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 22 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
cli/src/playground.html
View file

@ -29,6 +29,10 @@
<span id="update-time"></span>
</div>
<div class=header-item>
<a href="https://tree-sitter.github.io/tree-sitter/playground#about">(?)</a>
</div>
<select id="language-select" style="display: none;">
<option value="parser">Parser</option>
</select>

4
docs/assets/css/style.scss
View file

@ -162,6 +162,10 @@ a > span {
.CodeMirror div.CodeMirror-cursor {
border-left: 3px solid red;
}
h4#about {
margin: 10ex 0 0 0;
}
}
#output-container {

14
docs/section-7-playground.html
View file

@ -51,6 +51,20 @@ permalink: playground
<pre id="output-container" class="highlight"></pre>
</div>
<h4 id="about">About </h4>
<p>You can try out tree-sitter with a few pre-selected grammars on this page.
You can also run playground locally (with your own grammar) using the
<a href="/creating-parsers">CLI</a>'s <code>tree-sitter playground</code> subcommand.</p>
<p>The syntax tree should update as you type in the code. As you move around the
code, the current node should be highlighted in the tree; you can also click any
node in the tree to select the corresponding part of the code.</p>
<p>Logging (if enabled) can be viewed in the browser's console.</p>
<p>You can enter one or more <a href="/using-parsers#pattern-matching-with-queries">patterns</a>
into the Query panel. If the query is valid, its captures will be
highlighted both in the Code and in the Query panels. Otherwise
the problematic parts of the query will be underlined, and detailed
diagnostics will be available on hover. Note that to see any results
you must use at least one capture, like <code>(node_name) @capture-name</code></p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.45.0/codemirror.min.js"></script>