A Prism based web text editor with syntax highlighting

Dec 13, 2016 JavaScript Prism

I like to use Prism on my blog for syntax highlighting. Today I just want to test something like prototype for web text editor with Prism syntax highlighting. I know there are also working web text editors like CodeMirror for example, but as mentioned this post more a feasibility study.

Transparent textarea

The idea is just a transparent textarea above the prism code. The opacity is just 0.2 instead of 0 to show the transparent textarea.

JavaScript

Here is the editable JavaScript for my editor. Unfortunately is the cursor also transparent.

document.addEventListener("DOMContentLoaded", function(event) {
    var editorCode = document.getElementById('editor-code');
    var editorContent = document.getElementById('editor-content');
    var selector = document.getElementById('selector');
    editorCode.innerHTML = Prism.highlight(editorContent.value, Prism.languages.javascript);

    $('#editor-content').bind('input propertychange', function() {
        editorCode.innerHTML = Prism.highlight(this.value, Prism.languages.javascript);
    });
});

CSS

Here the CSS for the editor.

#editor {
    position: relative;
}
#editor-content {
    position: absolute;
    top: 1em;
    left: 1em;
    right: 1em;
    bottom: 1em;
    opacity: 0;
    width: calc(100% - 2em);
    height: calc(100% - 2em);
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

HTML

Here is the necessary HTML code for my example web editor.

<pre id="editor">
    <code class="language-javascript" id="editor-code"></code>
    <textarea id="editor-content"></textarea>
</pre>