iFrame中带有语法高亮显示的HTML编辑器

Question

I'm new to HTML, css etc. but I've been working on a project to learn something.

I'm trying to make a HTML Editor embedded in an iFrame object. So far its working, but now I saw an editor using syntax highlighting which looks pretty awesome to me.

So how am I able to do that?

Here is my (!relevant!) code so far:

    <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>

Edit : forgot the 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();

Let me know if I'm doing something wrong here, I've tried to make it as its described.

Answer 1

I am not sure how you can add the syntax highlighting in your existing editors.

But, here are some open source syntax highlighting editors:

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

Here is the link to Wiki for more open source editors: Comparison of JavaScript-based source code editors

Try them once.