Skip to content

Commit e3e0bc0

Browse files
author
梶塚太智
committed
Update to using CodeMirror in editor and fix style
1 parent 6076652 commit e3e0bc0

File tree

1 file changed

+149
-127
lines changed

1 file changed

+149
-127
lines changed

‎oxe.html‎

Lines changed: 149 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,149 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Stack OXE</title>
7-
<!-- Bootstrap CSS -->
8-
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
9-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
10-
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
11-
</head>
12-
<body>
13-
<script type="module">
14-
import init, { run_stack } from './pkg/web_stack.js';
15-
init().then(() => {
16-
window.run_stack = run_stack;
17-
});
18-
</script>
19-
20-
<script type="text/javascript">
21-
function run() {
22-
if (!window.run_stack) {
23-
alert('WebAssembly has not finished loading. ');
24-
return;
25-
}
26-
27-
const code = document.getElementById('code').value;
28-
const result = window.run_stack(code);
29-
30-
const output_item = document.getElementById('output');
31-
output_item.innerHTML = result.output();
32-
33-
const log_item = document.getElementById('log');
34-
log_item.innerHTML = result.log();
35-
36-
37-
}
38-
39-
document.addEventListener("input", function() {
40-
const code = document.getElementById('code').value;
41-
localStorage.setItem('code', code);
42-
})
43-
44-
document.addEventListener("keydown", function (event) {
45-
if (event.key == "Tab") {
46-
event.preventDefault(false);
47-
var me = document.activeElement;
48-
49-
var cursorPosition = me.selectionStart;
50-
var text = me.value;
51-
var tab = "\t";
52-
me.value = text.substring(0, cursorPosition) + tab + text.substring(me.selectionEnd);
53-
54-
me.selectionStart = me.selectionEnd = cursorPosition + tab.length;
55-
}
56-
});
57-
58-
window.onload = function () {
59-
let code = localStorage.getItem("code");
60-
let ele = document.getElementById("code");
61-
ele.value = code;
62-
};
63-
64-
</script>
65-
66-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
67-
<a class="navbar-brand" href="/">Stack programming language - online execution environment (OXE)</a>
68-
</nav>
69-
70-
<div id="main">
71-
72-
<textarea id="code" rows=10></textarea>
73-
<button class="btn form-control btn-secondary" onclick="run()">Run</button>
74-
75-
<div class="split">
76-
<textarea id="output" rows=5>Standard output</textarea>
77-
<textarea id="log" rows=5>Inside stack</textarea>
78-
</div>
79-
</div>
80-
</body>
81-
82-
<style>
83-
#main {
84-
padding: 20px;
85-
margin-top: 50px;
86-
}
87-
88-
.btn {
89-
margin-bottom: 5px;
90-
background-color: lightslategray;
91-
border-color: lightslategray;
92-
}
93-
94-
.split {
95-
display: flex;
96-
height: 200px;
97-
}
98-
99-
.split textarea {
100-
box-sizing: border-box;
101-
resize: horizontal;
102-
}
103-
104-
#output {
105-
flex-grow: 150;
106-
}
107-
108-
#log {
109-
flex-grow: 150;
110-
}
111-
112-
#code {
113-
background-color: lightgray;
114-
width: 100%;
115-
margin-bottom: 10px;
116-
padding: 10px;
117-
}
118-
119-
#code, #output, #log {
120-
background-color:lightgray;
121-
width: 100%;
122-
margin-bottom: 10px;
123-
padding: 10px;
124-
}
125-
</style>
126-
127-
</html>
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Stack OXE</title>
7+
<!-- Bootstrap CSS -->
8+
<link
9+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
10+
rel="stylesheet"
11+
/>
12+
<link
13+
rel="stylesheet"
14+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
15+
/>
16+
!-- CodeMirrorのCSSをCDNから読み込む -->
17+
<link
18+
rel="stylesheet"
19+
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/codemirror.min.css"
20+
/>
21+
22+
<!-- CodeMirrorのモード（JavaScript）をCDNから読み込む -->
23+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/codemirror.min.js"></script>
24+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/mode/javascript/javascript.min.js"></script>
25+
26+
<!-- 必要に応じて、CodeMirrorの追加機能やテーマも読み込む -->
27+
<!-- 例: Themeの追加 -->
28+
<link
29+
rel="stylesheet"
30+
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/theme/dracula.min.css"
31+
/>
32+
33+
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
34+
</head>
35+
<body>
36+
<script type="module">
37+
import init, { run_stack } from "./pkg/web_stack.js";
38+
init().then(() => {
39+
window.run_stack = run_stack;
40+
});
41+
</script>
42+
43+
<script type="text/javascript">
44+
let code;
45+
let output;
46+
let log;
47+
document.addEventListener("DOMContentLoaded", function () {
48+
output = document.getElementById("output");
49+
log = document.getElementById("log");
50+
let element = document.getElementById("code");
51+
52+
// CodeMirrorエディタの初期化
53+
code = CodeMirror.fromTextArea(element, {
54+
mode: "stack", // モードを指定（ここではJavaScript）
55+
lineNumbers: true, // 行番号を表示
56+
theme: "monokai", // テーマを指定（必要に応じて）
57+
});
58+
// CodeMirrorエディタの初期化
59+
60+
code.setValue(localStorage.getItem("code"));
61+
});
62+
63+
function run() {
64+
if (!window.run_stack) {
65+
alert("WebAssembly has not finished loading. ");
66+
return;
67+
}
68+
69+
const result = window.run_stack(code.getValue());
70+
output.value = result.output();
71+
log.value = result.log();
72+
}
73+
74+
document.addEventListener("input", function () {
75+
localStorage.setItem("code", code.getValue());
76+
});
77+
</script>
78+
79+
<nav
80+
style="background-color: #17288b; border-color: #17288bl"
81+
class="navbar navbar-expand-lg navbar-dark fixed-top"
82+
>
83+
<a class="navbar-brand" href="/"
84+
>Stack programming language - online execution environment
85+
(OXE)</a
86+
>
87+
</nav>
88+
89+
<div id="main" class="bg-light">
90+
<textarea id="code" rows="15"></textarea>
91+
<button class="btn form-control btn-primary" onclick="run()">
92+
Run
93+
</button>
94+
95+
<div class="split">
96+
<textarea id="output" rows="15">Standard output</textarea>
97+
<textarea id="log" rows="15">Inside stack</textarea>
98+
</div>
99+
</div>
100+
</body>
101+
102+
<style>
103+
#main {
104+
padding: 20px;
105+
margin-top: 4vh;
106+
}
107+
108+
.btn {
109+
margin-top: 5px;
110+
margin-bottom: 5px;
111+
background-color: #17288b;
112+
border-color: #17288b;
113+
}
114+
115+
.split {
116+
display: flex;
117+
height: 200px;
118+
}
119+
120+
.split textarea {
121+
box-sizing: border-box;
122+
resize: horizontal;
123+
}
124+
125+
#log,
126+
#output:focus {
127+
outline: none;
128+
}
129+
#code {
130+
background-color: white;
131+
width: 100%;
132+
margin-bottom: 10px;
133+
padding: 10px;
134+
}
135+
136+
.CodeMirror {
137+
height: 50vh;
138+
}
139+
140+
#code,
141+
#output,
142+
#log {
143+
background-color: white;
144+
width: 100%;
145+
margin-bottom: 10px;
146+
padding: 10px;
147+
}
148+
</style>
149+
</html>

0 commit comments

Comments
 (0)