带有语法高亮的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

这里是链接到维基更多的开源编辑器：Comparison of JavaScript-based source code editors

尝试他们曾经。