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