Online Kod Editörü


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

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.