82 lines
3.2 KiB
HTML
82 lines
3.2 KiB
HTML
---
|
|
layout: default
|
|
title: Playground
|
|
permalink: playground
|
|
---
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.45.0/codemirror.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.min.css">
|
|
|
|
<h1>Syntax Tree Playground</h1>
|
|
|
|
<div id="playground-container" style="visibility: hidden;">
|
|
|
|
<h4>Code</h4>
|
|
<select id="language-select">
|
|
<option value="bash">Bash</option>
|
|
<option value="c">C</option>
|
|
<option value="cpp">C++</option>
|
|
<option value="c_sharp">C#</option>
|
|
<option value="go">Go</option>
|
|
<option value="html">HTML</option>
|
|
<option value="java">Java</option>
|
|
<option value="javascript" selected="selected">JavaScript</option>
|
|
<option value="kotlin" selected="selected">Kotlin</option>
|
|
<option value="php">PHP</option>
|
|
<option value="python">Python</option>
|
|
<option value="ruby">Ruby</option>
|
|
<option value="rust">Rust</option>
|
|
<option value="toml">TOML</option>
|
|
<option value="typescript">TypeScript</option>
|
|
<option value="yaml">YAML</option>
|
|
<option value="ql">QL</option>
|
|
</select>
|
|
|
|
<input id="logging-checkbox" type="checkbox"></input>
|
|
<label for="logging-checkbox">Log</label>
|
|
|
|
<input id="query-checkbox" type="checkbox"></input>
|
|
<label for="query-checkbox">Query</label>
|
|
|
|
<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">
|
|
<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="/tree-sitter/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="/tree-sitter/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>
|
|
|
|
{% if jekyll.environment == "development" %}
|
|
<script>LANGUAGE_BASE_URL = "/assets/js";</script>
|
|
<script src="/assets/js/tree-sitter.js"></script>
|
|
{% else %}
|
|
<script>LANGUAGE_BASE_URL = "https://tree-sitter.github.io";</script>
|
|
<script src="https://tree-sitter.github.io/tree-sitter.js"></script>
|
|
{% endif %}
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.min.js"></script>
|
|
<script src="{{ '/assets/js/playground.js' | relative_url }}"></script>
|