如何使用 w3schools.com 中的彩色标签创建 html css js 编辑器
[英]How to create html css js editor with colored tags like in w3schools.com
问题描述
Here i have a code which I found on the internet but there some issues that I want to modify.
这里我有一个我在互联网上找到的代码，但有一些我想修改的问题。
I found html, css, js text editor but I want key words to be colored like in w3schools.com .我找到了 html、css、js 文本编辑器，但我希望关键字像w3schools.com中一样着色。 And also I want to run the code manually not live.而且我还想手动运行代码而不是实时运行。
Here is my code: https://jsfiddle.net/qd9sp3a5/这是我的代码： 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>
Here i have a code which I found on the internet but there some issues that I want to modify.这里我有一个我在互联网上找到的代码，但有一些我想修改的问题。
I found html, css, js text editor but I want key words to be colored like in w3schools.com .我找到了 html、css、js 文本编辑器，但我希望关键字像w3schools.com中一样着色。 And also I want to run the code manually not live.而且我还想手动运行代码而不是实时运行。
Here is my code: https://jsfiddle.net/qd9sp3a5/这是我的代码： https://jsfiddle.net/qd9sp3a5/
2 个解决方案
解决方案1
0 2018-10-05 17:35:05
Key words as in the tags? 标签中的关键词？ if so, all you need to do is: 如果是这样，您需要做的是：
div.tag{
position:absolute;
right:5px;
top:5px;
color: 'your color'
}
解决方案2
0 2022-09-07 02:14:52
by keywords he means like <head></head> <div></div> or really anything that is a tag header or footer for css,html,js etc not the pieces they has in the code already i've been searching for this answer for a while and still cant find a direct answer that actually works通过关键字，他的意思是<head></head> <div></div>或实际上是标签 header 或 css、html 等的页脚的任何内容对于这个答案一段时间，仍然无法找到实际有效的直接答案
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.