[Live] A Code Editor based on CodeMirror | Syntax Highlighter | HTML Editor

How to make use of it:

1. Load the required JavaScript and CSS information within the doc.

<!-- Code Mirror Stylesheet -->
<link rel="stylesheet" href="/path/to/cdn/codemirror.min.css">
<link rel="stylesheet" href="/path/to/cdn/theme/material-ocean.css"></link>
<link rel="stylesheet" href="/path/to/cdn/addon/hint/show-hint.css">

<!-- HTML Editor Stylesheet -->
<link rel="stylesheet" href="css/main.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- Code Mirror JavaScript -->
<script src="/path/to/cdn/codemirror.min.js"></script>
<script src="/path/to/cdn/mode/xml/xml.js"></script>
<script src="/path/to/cdn/mode/javascript/javascript.js"></script>
<script src="/path/to/cdn/mode/css/css.js"></script>
<script src="/path/to/cdn/mode/htmlmixed/htmlmixed.js"></script>
<script src="/path/to/cdn/addon/edit/matchbrackets.js"></script>
<script src="/path/to/cdn/addon/hint/show-hint.js"></script>
<script src="/path/to/cdn/addon/hint/javascript-hint.js"></script>
<script src="/path/to/cdn/addon/hint/html-hint.js"></script>
<script src="/path/to/cdn/addon/hint/xml-hint.js"></script>
<script src="/path/to/cdn/addon/hint/css-hint.js"></script>
<script src="/path/to/cdn/keymap/sublime.js"></script>

<!-- HTML Editor JavaScript -->
<script src="js/main.js"></script>

2. Create a Textarea component for the code editor.

<div id="main">
  <textarea id="editor">
  ...
  </textarea>
</div>

3. Create an iframe output for the stay preview.

<div id="main">
  <textarea id="editor">
  ...
  </textarea>
  <div id="output">
    <iframe id="result"></iframe>
  </div>
</div>

Real-time HTML Code Editor With jQuery And CodeMirror, HTML Editor Plugin/Github

See Demo And Download