Pada umumnya JSHint menjalankan di baris "Gutters" di editor yang dapat dimodifikasi dengan pekerjaan baru (Warna Khusus) dan terlihat seperti contoh image.
- JSHint terlihat di baris gutter dengan warna khusus (merah dan kuning) warna hijau hilang / tidak dilengkapi seperti Ace Live Editor. JSHint dapat dimodifikasi dengan warna dalam blok kotak (image pertama) ataupun bullet points (image kedua). Dan Image kedua dapat juga dilakukan dengan menambahkan garis tebal (blok kotak) seperti image pertama.
- JSHint terlihat di baris activeline berisi petunjuk / pesan berupa identifier scripting dalam editor (image pertama).
<!--CodeMirror CSS Basic--> <link href="https://codemirror.net/lib/codemirror.css" rel="stylesheet"/> <!--CodeMirror CSS Addon--> <link href="https://codemirror.net/addon/lint/lint.css" rel="stylesheet"/>
/* CSS Style */ /*width:50%; Pengaturan Lebar*/ .lint-error{font-family:arial;font-size:70%;background:#ffa;color:#a00;padding:2px 5px 3px} .lint-error-icon{color:white;background-color:red;font-weight:bold;border-radius:50%;padding: 0 3px;margin-right:7px}
CodeMirror js
di post sebelumnya. Silahkan berkunjung di "CodeMirror a Reliable and Luxurious Programming Editor". Kemudian sertakan Add-ons jshint.min.js
dan beberapa properti add-ons lainnya.<script src="https://codemirror.net/addon/lint/lint.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jshint/2.9.5/jshint.min.js"></script> <script src="https://codemirror.net/addon/lint/javascript-lint.js"></script>
// CodeMirror, copyright (c) by Marijn Haverbeke and others // Distributed under an MIT license: https://codemirror.net/LICENSE var widgets = [] function updateHints() { editor.operation(function(){ for (var i = 0; i < widgets.length; ++i) editor.removeLineWidget(widgets[i]); widgets.length = 0; JSHINT(editor.getValue()); for (var i = 0; i < JSHINT.errors.length; ++i) { var err = JSHINT.errors[i]; if (!err) continue; var msg = document.createElement("div"); var icon = msg.appendChild(document.createElement("span")); icon.innerHTML = "!!"; icon.className = "lint-error-icon"; msg.appendChild(document.createTextNode(err.reason)); msg.className = "lint-error"; widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true})); } }); var info = editor.getScrollInfo(); var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top; if (info.top + info.clientHeight < after) editor.scrollTo(null, after - info.clientHeight + 3); } window.onload = function() { var sc = document.getElementById("script"); var content = sc.textContent || sc.innerText || sc.innerHTML; window.editor = CodeMirror(document.getElementById("code"), { lineNumbers: true, mode: "javascript", value: content }); var waiting; editor.on("change", function() { clearTimeout(waiting); waiting = setTimeout(updateHints, 500); }); setTimeout(updateHints, 100); };
div
migrasi ke tag textarea.
<!--Code Basic Demo Official - Tag div--> <div id="code"></div> Migrasi <!--Textarea--> <textarea id="code" name="jsarea" placeholder="Code goes here..." style="display: none;"> // Rekatkan contoh Code Sumber - CodeMirror: Inline Widget Library ... </textarea> <!--Setting mode: javascript-->
Maaf Admin. Editor pada gambar di bawah sangat keren. Apakah sudah dapat di akses secara online? Dimana alamat link-nya? Saya juga sering menggunakan Editor di sini. Terima kasih sudah membantu pekerjaan saya.
ReplyDeleteMohon maaf, Editor di bawah sampai saat ini hanya di gunakan untuk pribadi saja. Semoga membantu.
Delete