Real-time HTML Code Editor With jQuery And CodeMirror

Real-time HTML Code Editor With jQuery And CodeMirror
File Size: 3.28 KB
Views Total: 80
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A free, easy-to-use, real-time, online HTML/CSS/JavaScript code editor(playground & sandbox) with instant live preview.

Built on top of jQuery library and CodeMirror text editor.

More Features:

  • Autocompletion hints.
  • Line numbers.
  • Custom key map.
  • Custom tab size.
  • Code validation.
  • Responsive and mobile-friendly.
  • And more via CodeMirror addons & configs.

How to use it:

1. Load the necessary JavaScript and CSS files in the document.

<!-- 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 element for the code editor.

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

3. Create an iframe output for the live preview. That's it.

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

This awesome jQuery plugin is developed by SanjayDevTech. For more Advanced Usages, please check the demo page or visit the official website.