Question

这里有一个我在互联网上找到的代码，但是有一些我想修改的问题。

我找到了html，css，js文本编辑器，但我希望像 w3schools.com 中那样对关键词进行着色。而且我也想手动运行不运行的代码。

<!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 中那样对关键词进行着色。而且我也想手动运行不运行的代码。

这是我的代码：https://jsfiddle.net/qd9sp3a5/

Answer 1

关键字与标签中的关键字一样？如果是这样，您所需要做的就是：

div.tag{
    position:absolute;
    right:5px;
    top:5px; 
    color: 'your color'
}

如何使用w3schools.com中的彩色标签创建HTML CSS JS编辑器

1 个答案: