ace-mode-xquery/demo.html at master · ajaxorg/ace-mode-xquery · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Editor</title>
    <style type="text/css" media="screen">
    body {
        overflow: hidden;
    }

    #editor1, #editor2 {
        margin: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50%;
        left: 0;
    }
    #editor2 {
        left: 50%;
    }
    </style>
</head>
<body>

<pre id="editor1">xquery version "1.0";

let $message := "Hello World!"
return &lt;results>
  &lt;message>{$message}&lt;/message>
&lt;/results>
</pre>
<pre id="editor2">let $stats := collection("stats")
for $access in $stats
group by $url := $access.url
return  {
  "url": $url,
  "avg": avg($access.response_time),
  "hits": count($access)
}
</pre>

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>
<script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<script>
require(["ace/ace"], function(ace) {
    ace.config.setModuleUrl("ace/mode/xquery", "./mode-xquery.js")
    ace.config.setModuleUrl("ace/mode/jsoniq", "./mode-jsoniq.js")

    var editor1 = ace.edit("editor1");
    editor1.session.setMode("ace/mode/xquery");
    editor1.setTheme("ace/theme/tomorrow_night");

    var editor2 = ace.edit("editor2");
    editor2.session.setMode("ace/mode/jsoniq");
    editor2.setTheme("ace/theme/tomorrow");
})
</script>

</body>
</html>