Skip to content

Commit 11e056a

Browse files
develoldevelol
committed
1.0.0
1 parent 08d5320 commit 11e056a

File tree

4 files changed

+148
-0
lines changed

4 files changed

+148
-0
lines changed

‎.gitattributes‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
*.js linguist-detectable=false
2+
*.css linguist-detectable=false
3+
*.html linguist-detectable=true

‎css/index.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
html, body {
2+
3+
}
4+
5+
#editor {
6+
position: fixed;
7+
top: 48px;
8+
left: 0;
9+
height: calc(100% - 48px);
10+
width:50%;
11+
}
12+
13+
#viewer {
14+
position: fixed;
15+
top: 48px;
16+
right: 0;
17+
height: calc(100% - 52px);
18+
width: calc(50% - 4px);
19+
background:#fff;
20+
border-width: 2px;
21+
border-style: inset;
22+
border-color: initial;
23+
border-image: initial;
24+
}
25+
26+
button {
27+
position: fixed;
28+
height: 48px;
29+
border: 0;
30+
font-weight: bold;
31+
cursor: pointer;
32+
background: #f0f0f0;
33+
color: #2f3129;
34+
font-family: sans-serif;
35+
font-size: 16px;
36+
text-align: center;
37+
margin: 0;
38+
z-index: 9999;
39+
}
40+
41+
#btnMin{
42+
top: 0;
43+
left: 0;
44+
border-right: 1px solid #dcdcdc;
45+
border-bottom: 1px solid #dcdcdc;
46+
width: 48px;
47+
}
48+
49+
#btnRun{
50+
top: 0;
51+
left: 48px;
52+
width: calc(100% - 94px);
53+
border-bottom: 1px solid #dcdcdc;
54+
}
55+
56+
#btnMax{
57+
top: 0;
58+
right: 0;
59+
border-left: 1px solid #dcdcdc;
60+
border-bottom: 1px solid #dcdcdc;
61+
width: 48px;
62+
}

‎index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<html lang="en">
2+
<head>
3+
<title>HTMLExecution</title>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
6+
<link rel="stylesheet" href="./css/index.css" type="text/css"/>
7+
</head>
8+
<body>
9+
<button id="btnMin" onclick="setFontSize(false);">➖</button>
10+
<button id="btnRun">EXECUTION</button>
11+
<button id="btnMax" onclick="setFontSize(true);">➕</button>
12+
<div id="editor"></div>
13+
<iframe id="viewer"></iframe>
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.min.js" integrity="sha512-hDyKEpCc9jPn3u2VffFjScCtNqZI+BAbThAhhDYqqqZbxMqmTSNIgdU0OU9BRD/8wFxHIWLAo561hh9fW7j6sA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/theme-chrome.min.js" integrity="sha512-U6FGB8uDHjnYaZ97jiksMiooP4I+fZRFRtug4FgL9WPXHMEb3e5peKfn1+PQL3uAm7xbKJoykjr3OKAe6r7vgQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-html.min.js" integrity="sha512-vSQkVhmiIt31RHmh8b65o0ap3yoL08VJ6MeuiCGo+92JDdSSWAEWoWELEf3WBk4e2tz/0CvnTe87Y2rFrNjcbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/worker-html.min.js" integrity="sha512-Ejh+3Sdd3dSX3C/el4d2cmzdhnBEEtVNDQ0hmpzVukRs4YGpuvrGkgbLgdfOvKSCVlSEB2SlrOwDeNLj/SRtCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
18+
<script src="./js/index.js"></script>
19+
</body>
20+
</html>

‎js/index.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
var fontSize = 16;
2+
var editor = ace.edit("editor");
3+
editor.setTheme("ace/theme/monokai");
4+
editor.session.setMode("ace/mode/html");
5+
editor.setAutoScrollEditorIntoView(true);
6+
editor.setFontSize(fontSize);
7+
8+
if(localStorage.HTMLcode!=null){
9+
editor.setValue(localStorage.HTMLcode);
10+
if(localStorage.HTMLcode[0]==' '){
11+
window.frames[0].document.body.innerHTML=''+
12+
'<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">'+
13+
localStorage.HTMLcode+
14+
'</div>';
15+
}else{
16+
window.frames[0].document.body.innerHTML=localStorage.HTMLcode;
17+
}
18+
}
19+
20+
editor.setOptions({
21+
wrap: true
22+
});
23+
24+
function setFontSize(plus){
25+
if(plus){
26+
fontSize=fontSize+4;
27+
editor.setFontSize(fontSize);
28+
}else{
29+
if((fontSize-4)>0){
30+
fontSize=fontSize-4;
31+
editor.setFontSize(fontSize);
32+
}
33+
}
34+
}
35+
36+
document.getElementById('btnRun').onclick = function(){
37+
var text = editor.getValue();
38+
localStorage.setItem('HTMLcode', text);
39+
try{
40+
if(text==''){
41+
alert('EMPTY CODE');
42+
}else{
43+
if(text[0]==' '){
44+
window.frames[0].document.body.innerHTML=''+
45+
'<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">'+
46+
text+
47+
'</div>';
48+
}else{
49+
window.frames[0].document.body.innerHTML=text;
50+
}
51+
}
52+
}catch(e){
53+
alert('ERROR -> '+e);
54+
}
55+
}
56+
57+
if(window.screen.width < window.screen.height){
58+
document.getElementById('editor').style.width = '100%';
59+
document.getElementById('editor').style.height = 'calc(50% - 24px)';
60+
document.getElementById('viewer').style.width = 'calc(100% - 4px)';
61+
document.getElementById('viewer').style.height = 'calc(50% - 28px)';document.getElementById('viewer').style.top = 'calc(50% + 24px)';
62+
editor.resize();
63+
}

0 commit comments

Comments
 (0)