具有语法突出显示的iFrame中的HTML编辑器

Question

我是HTML，css等的新手，但我一直致力于一个项目来学习。

我试图在iFrame对象中嵌入HTML编辑器。到目前为止它的工作，但现在我看到一个编辑器使用语法高亮，这对我来说非常棒。

那我怎么能做到呢？

到目前为止，这是我的（！相关！）代码：

    <div> 
        <div id="button">
        <input onclick="runCode();" type="button" value="Speichern und Abschicken">
    </div>
    <td> 
        <form>
            <textarea name="sourceCode" id="sourceCode">
                <strong> Change me! </strong>
            </textarea>
        </form>
    </td>
    <iframe name="targetCode" id="targetCode"></iframe> 
</tr>

编辑：忘记了JS

function runCode()
{
    var content = document.getElementById('sourceCode').value;
    var iframe = document.getElementById('targetCode');
    iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
    iframe.document.open();
    iframe.document.write(content);
    iframe.document.close();
    return false;
}
runCode();

如果我在这里做错了，请告诉我，我已经尝试按照其描述的那样做。

Answer 1

我不确定如何在现有编辑器中添加语法高亮显示。

但是，这里有一些开源语法突出显示编辑器：

1. https://codemirror.net/mode/index.html
2. https://ace.c9.io

以下是更多开源编辑的Wiki链接：Comparison of JavaScript-based source code editors

尝试一次。