Codemirror kullanımına örnek vereceğim. Bununla otomatik tamamlama yapabilen renklendirilmiş bir kod dizisi oluşturabiliyoruz.
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Code Mirror</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel="stylesheet" href="https://codemirror.net/addon/hint/show-hint.css"> <script src="https://codemirror.net/lib/codemirror.js"></script> <script src="https://codemirror.net/addon/hint/show-hint.js"></script> <script src="https://codemirror.net/addon/hint/xml-hint.js"></script> <script src="https://codemirror.net/addon/hint/html-hint.js"></script> <script src="https://codemirror.net/mode/xml/xml.js"></script> <script src="https://codemirror.net/mode/javascript/javascript.js"></script> <script src="https://codemirror.net/mode/css/css.js"></script> <script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script> <script src="https://codemirror.net/addon/selection/active-line.js"></script> <script src="https://codemirror.net/addon/edit/matchbrackets.js"></script> <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css"> <style type="text/css"> .CodeMirror { font-size: 15px; width: 100%, ; height: 100%; } </style> </head> <body> <div id="code"></div> <script type="text/javascript"> CodeMirror.commands.autocomplete = function(cm) { CodeMirror.showHint(cm, CodeMirror.hint.html); } window.onload = function() { editor = CodeMirror(document.getElementById("code"), { mode: "text/html", theme: "default", lineWrapping: true, lineNumbers: true, styleActiveLine: true, matchBrackets: true, extraKeys: { "Ctrl-Space": "autocomplete" }, value: "<!doctype html>\n<html>\n <div id='main'> \n \n </div> \n</html>" }); }; </script> </body> </html>
No comment