Turn any textarea tag into syntax-highlighted code editor with 1 line of code. Code-Edit lets you turn any ordinary JavaScript syntax-highlighting theme and program into customisable syntax-highlighted textareas using an HTML <textarea> element. It uses vanilla CSS to superimpose a textarea, then handles indentations, scrolling and fixes any resulting bugs with JavaScript.

Unlike other front-end code-editor projects, the simplicity of how Code-Edit works means it is highly customisable. As it is not a full-featured editor, you can choose what features you want it to include, and use your favourite syntax-highlighting algorithms and themes. Also, key value is that Code-Edit saves original textarea with all event listners on it, so all your scripts will continue to work as before.

Code-Edit is designed to be both easy to use and customisable. Here's how to use it to create syntax-highlighted textareas:

• Just import only one JS file of Code-Edit from a downloaded release or a CDN.

  <!--In the <footer> -->
  <script src="//cdn.jsdelivr.net/gh/aels/[email protected]/code-input.min.js#//highlightjs.org/static/demo/styles/monokai-sublime.css"></script>

• Take attention. Your theme is passed via # after js script url. If it is missed, default theme will be used.
• That's All, enjoy =)