A Prism based web text editor with syntax highlighting

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.

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