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 });});