Skip to content

Create HTML Source code editor like W3Schools using JQuery [closed]

I want to create HTML Source code editor like W3Schools

I have tried following using JQuery syntax Highlight Its Works as follow

Tried Example

It works perfect But when i try to edit it then it not responding to large code all time my html code is more that 12000 to 15000 line so its not usefull

I want to create as follow like W3Schools

What I want

How can I create like above

Please give me any idea

Suggest any Plugin to create it

Answer

I got The Answare

now its responce is great I tried more than 100000 Line of html in it & its working great

I changed the plugin from JQuery syntax Highlight to jquery-codemirror

follow The Following steps to setup the code mirror

step 1: Download the CodeMirror from Jquery-CodeMirror-Plugin

step 2: Unzip the plugin file & add that unziped folder in your solution

step 3: Add the reference of following

  1. plugin/codemirror/lib/codemirror.css
  2. plugin/codemirror/lib/codemirror.js

step 4: add <textarea> in Your html with the class codemirror-textarea as follow

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>CodeMirror</title>
        <link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css">
    </head>
    <body>
        <textarea class="codemirror-textarea"></textarea>

        <!-- javascript -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>
        <script type="text/javascript" src="js/default.js"></script>
    </body>
</html>

step 5: Add the following code in your JS

Jquery

$(document).ready(function(){
    //code here...
    var code = $(".codemirror-textarea")[0];
    var editor = CodeMirror.fromTextArea(code, {
        lineNumbers : true
    });
});