84 lines
2.1 KiB
HTML
84 lines
2.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>AWK Practice</title>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
|
||
|
|
<link href="css/default.min.css" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
.parent {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 3fr repeat(2, 1fr) 3fr;
|
||
|
|
grid-template-rows: 1fr 10fr 5fr;
|
||
|
|
grid-column-gap: 2px;
|
||
|
|
grid-row-gap: 2px;
|
||
|
|
height: 97vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.div1 { grid-area: 1 / 1 / 2 / 3; }
|
||
|
|
.div2 { grid-area: 1 / 3 / 2 / 5; }
|
||
|
|
.div3 { grid-area: 2 / 1 / 4 / 2; }
|
||
|
|
.div4 { grid-area: 2 / 2 / 4 / 4; }
|
||
|
|
.div5 { grid-area: 2 / 4 / 3 / 5; }
|
||
|
|
.div6 { grid-area: 3 / 4 / 4 / 5; }
|
||
|
|
|
||
|
|
.resizable-input {
|
||
|
|
width: 100%; height: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
select.ql-ui {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="parent">
|
||
|
|
<div class="div1">
|
||
|
|
<textarea class="resizable-input" placeholder="args"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="div2">
|
||
|
|
<textarea class="resizable-input" placeholder="gist"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="div3">
|
||
|
|
<textarea class="resizable-input" placeholder="stdin"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="div4">
|
||
|
|
<div id="script"></div>
|
||
|
|
</div>
|
||
|
|
<div class="div5">
|
||
|
|
<textarea class="resizable-input" placeholder="stdout"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="div6">
|
||
|
|
<textarea class="resizable-input" placeholder="stderr"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="js/highlight.min.js"></script>
|
||
|
|
<script src="js/languages/awk.min.js"></script>
|
||
|
|
<script src="js/quill.js"></script>
|
||
|
|
<script>
|
||
|
|
hljs.configure({
|
||
|
|
languages: ['awk'],
|
||
|
|
});
|
||
|
|
const quill = new Quill('#script', {
|
||
|
|
modules: {
|
||
|
|
syntax: true,
|
||
|
|
toolbar: false
|
||
|
|
},
|
||
|
|
theme: 'bubble'
|
||
|
|
});
|
||
|
|
quill.setContents([
|
||
|
|
{ insert: 'BEGIN {\n\n}\n\n{\n}\n\nEND {\n\n}\n', attributes: { 'code-block': 'awk' } },
|
||
|
|
]);
|
||
|
|
// automatically append closing curly brace when opening one
|
||
|
|
quill.keyboard.addBinding({ key: '{' }, {
|
||
|
|
collapsed: true, // cursor, not selection
|
||
|
|
}, function(range, context) {
|
||
|
|
this.quill.insertText(range.index, '{}');
|
||
|
|
this.quill.setSelection(range.index+1)
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|