这里我有一个我在互联网上找到的代码，但有一些问题我想修改。
我找到了 html、css、js 文本编辑器，但我希望关键字像 w3schools.com 一样被着色。而且我还想手动运行代码而不是实时。
这是我的代码:https://jsfiddle.net/qd9sp3a5/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web Editor</title>
</head>
<body>
<table>
<tr>
<td>
<div class="tag">HTML (Body)</div>
<div id="html" class="content" contenteditable></div>
</td>
<td>
<div class="tag">CSS</div>
<div id="css" class="content" contenteditable></div>
</td>
</tr>
<tr>
<td>
<div class="tag">JavaScript</div>
<div id="js" class="content" contenteditable></div>
</td>
<td>
<div class="tag">Output</div>
<iframe id="output"></iframe>
</td>
</tr>
</table>
</body>
</html>
<script>
window.onload=function(){
var html=document.getElementById("html"),
css=document.getElementById("css"),
js=document.getElementById("js"),
output=document.getElementById("output"),
working=false,
fill=function(){
if(working){
return false;
}
working=true;
var document=output.contentDocument,
style=document.createElement("style"),
script=document.createElement("script");
document.body.innerHTML=html.textContent;
style.innerHTML=css.textContent.replace(/\s/g,"");
script.innerHTML=js.textContent;
document.body.appendChild(style);
document.body.appendChild(script);
working=false;
};
html.onkeyup=fill;
css.onkeyup=fill;
js.onkeyup=fill;
}
</script>
<style>
html,body,table,div.content,iframe{
border:0;
height:100%;
margin:0;
padding:0;
width:100%;
}
td{
border:2px solid black;
height:50%;
padding:25px 5px 5px 5px;
position:relative;
vertical-align:top;
width:50%;
}
div.tag{
position:absolute;
right:5px;
top:5px;
}
</style>
这里我有一个我在互联网上找到的代码，但有一些问题我想修改。
我找到了 html、css、js 文本编辑器，但我希望关键字像 w3schools.com 一样被着色。而且我还想手动运行代码而不是实时。
最佳答案
标签中的关键字？如果是这样，您需要做的就是:
div.tag{
position:absolute;
right:5px;
top:5px;
color: 'your color'
}
关于javascript - 如何创建带有彩色标签的 html css js 编辑器，如 w3schools.com，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52670452/