I want to create HTML Source code editor like W3Schools
I have tried following using jQuery syntax Highlight Its Works as follow
It works perfect, but when I try to edit it then it is not responding to large code all time. My HTML code is more that 12000 to 15000 lines, so its not useful.
I want to create as follow like W3Schools
How can I create like above?
Please give me any idea.
Suggest any Plugin to create it.
Advertisement
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
plugin/codemirror/lib/codemirror.cssplugin/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
});
});