Membuat Kode Editor Sederhana Menggunakan CodeMirror
Bagi sahabat yang suka oprek template, atau berbagi tutorial atau lagi belajar CSS dan HTML alangkah kebih baik menggunakan Kode Editor untuk melihat preview apa yang kita kerjakan.
Bagi sahabat yang belum paham seperti apa, contohnya seperti Try it W3Schools atau seperti yang saya punyai yaitu Try it Editor. Yu.. lanjut step by step pembuatannya.
Step by step Membuat Kode Editor
Kode Editor ini nantinya akan menggunakan CodeMirror untuk highlight (manampilakn kode warna-warni). Untuk membuatnya bisa di hosting sendiri atau menggunakan Github Page.
Membuat Web HTML
Dibawah ini saya sudah membuat satu Kode untuk WEB, yang nantinya akan digunakan untuk Kode Editor. Silahkab dicopy atau dimodifikasi sesuka hati.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.css'>
<style>
*, *:after, *:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {font-family: system-ui;}
/* --- HEADER --- */
.header {height:80px !important;top:0;line-height:80px;background: linear-gradient(90deg, #851B41 0%, #6937BE 100%);color: #fff;text-align:center;}
h1 {font-size:38px;font-weight:normal}
.nav {height:40px;line-height:40px;background:#374044;padding:10px;position-relative;}
/* ----------
WRAPPERS & CONTAINERS
---------- */
section {
position: relative;
padding:0;
}
.container {
position: relative;
margin: auto;
padding: 0 20px;
width: 100%;
max-width: 99%;
display:flex;
margin-top:15px;
}
/* ----------
CODE BLOCK
---------- */
.code-container {
position: relative;
overflow: hidden;
border-radius: 3px;
box-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
width:50%;
}
.CodeMirror {height:500px !important;font-size:14px}
button {border:none;outline:none;margin-top:-2px;}
.btn {
background-color: #1f92c8;
color: #fff;
padding: 5px 10px;
text-decoration: none;
border-radius: 3px;
margin-left:15px;
display:block;
cursor:pointer;
}
.btn:hover {background:#1a82b3;
}
#code_result {
margin-left:15px;
border-radius: 3px;
border:1px solid #ddd;
box-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
}
iframe {border:none;outline:none}
</style>
</head>
<body>
<header class='header'>
<h1>Simple Code Editor</h1>
</header>
<nav class='nav'>
<button class="btn" onclick="run()">Run code! ❯</button>
</nav>
<section>
<div class="container">
<div class="code-container">
<textarea id="code">
</textarea>
</div>
<iframe id="code_result" width="49%" height="500px">
</iframe>
</div>
</section>
</body>
</html>- Harus menggunakan CSS CodeMirror (sudah saya tambahkan di atas)
textareaharus menggunakanid="code"atau ID apapun, nantinya sesuaikan dengan JSiframeharus menggunakanid="code_result"atau ID yang disesuaikan dengan JS
Menambahkan Kode di textarea
Bebas menampilkan kode HTML apa saja, misalkan seperti ini:
<!DOCTYPE html>
<html>
<head>
<style>
.container {display:flex;padding:15px;border:1px solid #bbb}
.merah, .hijau{width:50%;color:white;text-align:center;padding:15px}
.merah{background:red}
.hijau{background:green}
</style>
</head>
<body>
<div class="container">
<div class="merah">
<p>Ini Merah</p>
</div>
<div class="hijau">
<p>Ini Hijau</p>
</div>
</div>
</body>
</html>Kode tersebut simpan atara textarea contoh:
<textarea id="code">
......
</textarea>Tambahkan JavaScript
tambahkan JavaScript ini sebelum </body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/xml/xml.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/css/css.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/javascript/javascript.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/htmlmixed/htmlmixed.js'></script>
<script id="rendered-js" >
var doc = document.getElementById('code_result').contentWindow.document;
var html_value;
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
styleActiveLine: true,
lineNumbers: true,
matchBrackets: true,
autoCloseBrackets: true,
autoCloseTags: true,
mode: "htmlmixed",
});
function run() {
html_value = editor.getValue();
doc.open();
doc.write(html_value);
doc.close();
}
</script> Untuk melihat hasilnya silahkan klik RUN pada halaman DEMO
Demo Hasil AkhirApabila ada pertanyaan silahkan diskusikan di kolom komentar.
mantap kang.. kalau diaplikasikan di halaman blogger bisa ga kang?
bisa aja, tapi supaya loadnya cepet pake logika pengingkaran
waduh apa lagi itu heheh, ga ngerti kang
jadi kode tidak diload dihalaman lain, dan dihalaman ini nantinya tidak meload halaman lain. nanti saya buatkan tutorialnya