zdying · November 22, 2016 14:31
diff --git a/simple code editor.html b/simple code editor.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body, html{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #con{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -400px;
            margin-top: -250px;
            width: 800px;
            height: 500px;
            /*border: 1px solid red;*/
            padding: 0 0 0 40px;
            background: #2B2B2B;
            overflow: scroll;
            box-sizing: border-box;
        }

        #editor, #pre, #line{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            padding: 0 0 0 40px;
            margin: 0;
            font-size: 13px;
            line-height: 1.4;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
            box-sizing: border-box;
            background: transparent;
            outline: none;
            border: none;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        #editor{
            z-index: 1;
            resize: none;
            outline: none;
            opacity: 0.8;
            tab-size: 4;

            color: #FFFFFF;  /* change [input cursor color] by this*/
            /*text-shadow: 0px 0px 0px #D60B0B; !* change [input font] by this*!*/
            text-shadow: transparent;
            -webkit-text-fill-color: transparent;
        }

        #editor::selection{
            background: red;
        }

        #pre{
            z-index: 2;
            border-color: orange;
            pointer-events: none;
            color: white;
        }

        #line{
            z-index: 2;
            padding: 0 5px;
            box-sizing: border-box;
            width: 35px;
            color: white;
            text-align: right;
            border-right: 1px solid #555555;
            display: inline-block;
        }
    </style>
 </head>
 <body>
 <div id="con">
    <textarea id="editor">
 // javascript here ...
 function test(){
    var a = 1;
    let b = 'bcd';

    console.log(a + b + true + 'def');
 }</textarea>
    <pre id="pre"></pre>
    <div id="line"></div>
 </div>

 <script>
    function highlight(str){
        var colors = ['#C299D6','#D9854A', '#00BCD4', '#B7C753','red','#969896'];
        var reg = /(var|let|const|this|new|return|function|Math|Object|String)|(true|false)|([\w_][\w\d_]{0,}(?=\())|([\"'].*?[\"'])|([+-]?\d+(?:\.\d+)?)|(\/\/.*|\/\*[\s\S]*?\*\/)/g;
        var res = str
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(reg, function(match){
                    var args = [].slice.call(arguments,1);
                    var index = args.indexOf(match);

                    if(args[index + 1]){
                        console.log(args[index], args[index + 1]);
                        return match.replace(args[index + 1], '<span style="color:' + colors[index] + '">' + args[index + 1] + '</span>');
                    }else{
                        return '<span style="color:' + colors[index] + '">' + match + '</span>';
                    }
                });

        return res;
    }

    function initEditor(){
        var pre = document.getElementById('pre');
        var editor = document.getElementById('editor');
        var line = document.getElementById('line');

        pre.innerHTML = highlight(editor.value);
        addLine();

        editor.addEventListener('input', function(eve){
            pre.innerHTML = highlight(editor.value);
            addLine();
        });

        editor.addEventListener('scroll', function(eve){
            // pre.scrollTop = editor.scrollTop;
            pre.style.top = '-' + Math.floor(editor.scrollTop) + 'px';
            line.style.top = '-' + Math.floor(editor.scrollTop) + 'px';
        });

        editor.addEventListener('keydown', function(eve){
            var code = eve.keyCode;
            var start = editor.selectionStart;
            var end = editor.selectionEnd;
            var value = editor.value;

            if(code === 9){
                editor.value = value.slice(0, start) + '    ' + value.slice(end);
                editor.selectionStart = editor.selectionEnd = start + 4;
                eve.preventDefault();
            }
        });
    }

    function addLine(){
        var text = editor.value;
        var lines = text.split('\n');
        var arr = lines.map(function(line, index){
            return index + 1;
        });

        line.innerHTML = '<div>' + arr.join('</div><div>') + '</div>';
        pre.style.top = '-' + Math.floor(editor.scrollTop) + 'px';
        line.style.top = '-' + Math.floor(editor.scrollTop) + 'px';
    }

    initEditor();
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	body, html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	#con{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -400px;
	margin-top: -250px;
	width: 800px;
	height: 500px;
	/border: 1px solid red;/
	padding: 0 0 0 40px;
	background: #2B2B2B;
	overflow: scroll;
	box-sizing: border-box;
	}

	#editor, #pre, #line{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 0 0 0 40px;
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
	box-sizing: border-box;
	background: transparent;
	outline: none;
	border: none;
	white-space: pre-wrap;
	word-wrap: break-word;
	}

	#editor{
	z-index: 1;
	resize: none;
	outline: none;
	opacity: 0.8;
	tab-size: 4;

	color: #FFFFFF; /* change [input cursor color] by this*/
	/text-shadow: 0px 0px 0px #D60B0B; ! change [input font] by this!/
	text-shadow: transparent;
	-webkit-text-fill-color: transparent;
	}

	#editor::selection{
	background: red;
	}

	#pre{
	z-index: 2;
	border-color: orange;
	pointer-events: none;
	color: white;
	}

	#line{
	z-index: 2;
	padding: 0 5px;
	box-sizing: border-box;
	width: 35px;
	color: white;
	text-align: right;
	border-right: 1px solid #555555;
	display: inline-block;
	}
	</style>
	</head>
	<body>
	<div id="con">
	<textarea id="editor">
	// javascript here ...
	function test(){
	var a = 1;
	let b = 'bcd';

	console.log(a + b + true + 'def');
	}</textarea>
	<pre id="pre"></pre>
	<div id="line"></div>
	</div>

	<script>
	function highlight(str){
	var colors = ['#C299D6','#D9854A', '#00BCD4', '#B7C753','red','#969896'];
	var reg = /(var\|let\|const\|this\|new\|return\|function\|Math\|Object\|String)\|(true\|false)\|([\w_][\w\d_]{0,}(?=\())\|([\"'].?[\"'])\|([+-]?\d+(?:\.\d+)?)\|(\/\/.\|\/\[\s\S]?\*\/)/g;
	var res = str
	.replace(/</g, '<')
	.replace(/>/g, '>')
	.replace(reg, function(match){
	var args = [].slice.call(arguments,1);
	var index = args.indexOf(match);

	if(args[index + 1]){
	console.log(args[index], args[index + 1]);
	return match.replace(args[index + 1], '<span style="color:' + colors[index] + '">' + args[index + 1] + '</span>');
	}else{
	return '<span style="color:' + colors[index] + '">' + match + '</span>';
	}
	});

	return res;
	}

	function initEditor(){
	var pre = document.getElementById('pre');
	var editor = document.getElementById('editor');
	var line = document.getElementById('line');

	pre.innerHTML = highlight(editor.value);
	addLine();

	editor.addEventListener('input', function(eve){
	pre.innerHTML = highlight(editor.value);
	addLine();
	});

	editor.addEventListener('scroll', function(eve){
	// pre.scrollTop = editor.scrollTop;
	pre.style.top = '-' + Math.floor(editor.scrollTop) + 'px';
	line.style.top = '-' + Math.floor(editor.scrollTop) + 'px';
	});

	editor.addEventListener('keydown', function(eve){
	var code = eve.keyCode;
	var start = editor.selectionStart;
	var end = editor.selectionEnd;
	var value = editor.value;

	if(code === 9){
	editor.value = value.slice(0, start) + ' ' + value.slice(end);
	editor.selectionStart = editor.selectionEnd = start + 4;
	eve.preventDefault();
	}
	});
	}

	function addLine(){
	var text = editor.value;
	var lines = text.split('\n');
	var arr = lines.map(function(line, index){
	return index + 1;
	});

	line.innerHTML = '<div>' + arr.join('</div><div>') + '</div>';
	pre.style.top = '-' + Math.floor(editor.scrollTop) + 'px';
	line.style.top = '-' + Math.floor(editor.scrollTop) + 'px';
	}

	initEditor();
	</script>
	</body>
	</html>