Press "Enter" to skip to content

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

HTML editor is free, easy-to-use, and real-time online HTML / CSS / JavaScript code editor with instant live preview. Built on top of the jQuery library and CodeMirror text editor.

syntax highlighter js, syntax highlighter online, syntax highlighter wordpress, syntax highlighting vscode, javascript syntax highlighter online

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

Official Website(SanjayDevTech): Click Here

This superior jQuery/javascript plugin is developed by SanjayDevTech. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.