帶有語法高亮的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

嘗試他們曾經。