parent
5e33205ffd
commit
0985170815
4 changed files with 359 additions and 305 deletions
@ -1,114 +0,0 @@ |
||||
<head> |
||||
<meta charSet="UTF-8"/> |
||||
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script> |
||||
<link href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> |
||||
<link href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"> |
||||
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> |
||||
<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
||||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.css" rel="stylesheet"> |
||||
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.js"></script> |
||||
|
||||
<style type="text/css"> |
||||
#divCodeWrapper { |
||||
height: calc(100vh - 200px); |
||||
max-height: 600px; |
||||
width: 1200px; |
||||
overflow: hidden; |
||||
border: 1px solid #a5a5a5; |
||||
position: relative; |
||||
} |
||||
|
||||
#preCode { |
||||
height: 100%; |
||||
width: calc(100% - 50px); |
||||
position: absolute; |
||||
top: 0; |
||||
left: 50px; |
||||
overflow: hidden; |
||||
padding: 0; |
||||
margin: 0; |
||||
background: #1b1b1b; |
||||
border: none; |
||||
} |
||||
|
||||
#preCode code { |
||||
padding: 15px; |
||||
height: calc(100% - 30px); |
||||
width: calc(100% - 30px); |
||||
overflow-y: scroll; |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
textarea { |
||||
position: absolute; |
||||
top: 0; |
||||
padding: 15px; |
||||
z-index: 2; |
||||
overflow-x: auto; |
||||
overflow-y: scroll; |
||||
white-space: nowrap; |
||||
background-color: rgba(0, 0, 0, 0); |
||||
color: rgba(0, 0, 0, 0); |
||||
caret-color: white; |
||||
border: none; |
||||
outline: none; |
||||
border-left: 1px solid #383838; |
||||
} |
||||
|
||||
#lineNumbers { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
text-align: right; |
||||
height: calc(100% - 50px); |
||||
width: 100px; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
|
||||
<link id="theme1" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/vs2015.min.css" |
||||
rel="stylesheet"/> |
||||
|
||||
<script src="codeEditorShortcutKeys.js" type="text/javascript"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js" |
||||
type="text/javascript"></script> |
||||
</head> |
||||
|
||||
|
||||
<body> |
||||
<div style="width: 600px; margin: 0 auto; padding-top: 50px"> |
||||
<script> |
||||
function postForm(form) { |
||||
axios.post('/py2php.php', { |
||||
code: form.code.value, |
||||
}, { |
||||
headers: { |
||||
'Content-Type': 'application/json' |
||||
} |
||||
}).then(response => { |
||||
if (response.data.data.result == undefined) { |
||||
form.result.value = 'ERROR' |
||||
} else { |
||||
form.result.value = response.data.data.result |
||||
} |
||||
}).catch(error => { |
||||
console.log(error); |
||||
}); |
||||
|
||||
return false; |
||||
} |
||||
</script> |
||||
<h1>phpy 工具集</h1> |
||||
<ul class="nav nav-tabs"> |
||||
<li role="presentation" class="active"><a href="#">Python 转 PHP</a></li> |
||||
</ul> |
||||
<form style="margin-top: 30px" onsubmit="return postForm(this)"> |
||||
<div class="form-group"> |
||||
<label>Python 代码</label> |
||||
<textarea class="form-control" rows="32" name="code"></textarea> |
||||
</div> |
||||
<button type="submit" class="btn btn-primary">提交</button> |
||||
</form> |
||||
</div> |
||||
|
||||
</body> |
||||
@ -0,0 +1,150 @@ |
||||
<!DOCTYPE html> |
||||
|
||||
<html> |
||||
|
||||
<head> |
||||
<title>Convert Python code to PHP</title> |
||||
<style id="styleFont"> |
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap'); |
||||
|
||||
#preCode code, |
||||
textarea, |
||||
#lineNumbers, |
||||
.lineNumbers { |
||||
font-family: "Roboto Mono", monospace; |
||||
font-weight: 400; |
||||
font-size: 12pt; |
||||
line-height: 150%; |
||||
} |
||||
|
||||
</style> |
||||
<link href="./static/css/style.css" rel="stylesheet"/> |
||||
<link id='theme1' href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/a11y-dark.min.css" |
||||
rel="stylesheet"/> |
||||
<script src="./static/js/codeEditorShortcutKeys.js" type="text/javascript"></script> |
||||
<script src="./static/js/jquery-1.10.2.js" type="text/javascript"></script> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js" |
||||
type="text/javascript"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
|
||||
<h1>PHP</h1> |
||||
<?php |
||||
define('ROOT_PATH', dirname(__DIR__)); |
||||
?> |
||||
<p style="height: 36px"> |
||||
风格: |
||||
<?php include ROOT_PATH . '/include/style.php'; ?> |
||||
字体: |
||||
<?php include ROOT_PATH . '/include/font.php'; ?> |
||||
字体尺寸: |
||||
<input id="inputFontSize" type="number" step="1" value="12" style="width: 40px;"/> |
||||
行高 (%): |
||||
<input id="lineHeight" type="number" step="10" value="200" style="width: 50px;"/> |
||||
</p> |
||||
|
||||
<div id="divCodeWrapper"> |
||||
<pre><code style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" class="lineNumbers"></code></pre> |
||||
<pre><code id="lineNumbers" style="opacity: 0.5;"></code></pre> |
||||
<pre id="preCode"><code id="codeBlock" class="language-php"></code></pre> |
||||
<textarea id="textarea1" wrap="soft" disabled="disabled" spellcheck="false"></textarea> |
||||
</div> |
||||
|
||||
<div style="margin-top: 8px"> |
||||
<button id="btn-copy" style="height: 32px; width: 90px">复制此代码</button> |
||||
</div> |
||||
|
||||
<script type="text/javascript"> |
||||
const textarea1 = document.getElementById("textarea1"); |
||||
const codeBlock = document.getElementById("codeBlock"); |
||||
const lineNumbers = document.getElementById('lineNumbers'); |
||||
|
||||
$('#btn-copy').click(function () { |
||||
navigator.clipboard.writeText(textarea1.value) |
||||
$('#btn-copy').attr('disabled', 'disabled').text('已复制代码') |
||||
}) |
||||
|
||||
function updateLineNumbers() { |
||||
let lineCount = textarea1.value.split('\n').length; |
||||
let lines = ''; |
||||
for (let i = 1; i <= lineCount; i++) { |
||||
lines += i + '\n'; |
||||
} |
||||
lineNumbers.innerHTML = lines; |
||||
} |
||||
|
||||
// copy code from textarea to code block |
||||
function updateCode() { |
||||
let content = textarea1.value; |
||||
$('#btn-copy').removeAttr('disabled').text('复制此代码') |
||||
// encode the special characters |
||||
content = content.replace(/&/g, '&'); |
||||
content = content.replace(/</g, '<'); |
||||
content = content.replace(/>/g, '>'); |
||||
|
||||
// fill the encoded text to the code |
||||
codeBlock.innerHTML = content; |
||||
updateLineNumbers(); |
||||
|
||||
// call highlight.js to render the syntax highligtning |
||||
highlightJS(); |
||||
} |
||||
|
||||
// syntax highlight |
||||
function highlightJS() { |
||||
document.querySelectorAll('pre code').forEach((el) => { |
||||
hljs.highlightElement(el); |
||||
}); |
||||
} |
||||
|
||||
// sync the scroll bar position between textarea and code block |
||||
textarea1.addEventListener("scroll", () => { |
||||
codeBlock.scrollTop = textarea1.scrollTop; |
||||
codeBlock.scrollLeft = textarea1.scrollLeft; |
||||
lineNumbers.scrollTop = textarea1.scrollTop; |
||||
}); |
||||
|
||||
// change theme |
||||
document.getElementById("selectStyle").addEventListener("change", (e) => { |
||||
document.getElementById("theme1").href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/${e.target.value}`; |
||||
}); |
||||
|
||||
// change font |
||||
function updateFont() { |
||||
let selectFont = document.getElementById("selectFont"); |
||||
let fontName = selectFont.options[selectFont.selectedIndex].text; |
||||
let fontNameUrl = fontName.replace(" ", "+"); |
||||
let inputFontSize = document.getElementById("inputFontSize"); |
||||
let lineHeight = document.getElementById("lineHeight"); |
||||
|
||||
document.getElementById("styleFont").textContent = ` |
||||
@import url('https://fonts.googleapis.com/css2?&display=swap&family=${fontNameUrl}'); |
||||
pre, code, textarea, #lineNumbers, .lineNumbers { |
||||
font-family: "${fontName}", monospace; |
||||
font-size: ${inputFontSize.value}pt; |
||||
line-height: ${lineHeight.value}%; |
||||
}`; |
||||
} |
||||
|
||||
// change font size |
||||
document.getElementById("inputFontSize").addEventListener("input", () => { |
||||
updateFont(); |
||||
}); |
||||
|
||||
// change font |
||||
document.getElementById("selectFont").addEventListener("change", () => { |
||||
updateFont(); |
||||
}); |
||||
|
||||
// change line height |
||||
document.getElementById("lineHeight").addEventListener("input", () => { |
||||
updateFont(); |
||||
}); |
||||
|
||||
bindCodeEditorShortcutKeys(textarea1); |
||||
|
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
Loading…
Reference in new issue