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