-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
section-7-playground.html
81 lines (68 loc) · 3.14 KB
/
section-7-playground.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
---
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="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>