Home
CODE EDITOR

CODEMIRROR CODE EDITOR

Codemirror Code Editor

ဒါက တော့မိမိကိုယ်တိုင် HTML CSS JavaScript Code တွေကိုရေးသားလေ့ကျင့်လို့ရအောင်ပြုလုပ်ထားတဲ့ Code Editor တခုဖြစ်ပါတယ်။ဒီ Code Editor ကတော့ Codeing တွေ Script တွေကိုစိတ်ဝင်စားတဲ့သူ တွေအတွက်အထူးသင့် လျော်တဲ့ Code Editor ဖြစ်ပါတယ်။လိုအပ်လို့ထည့်သွင်းအသုံးပြုချင်တယ်ဆိုရင်အောက်ကပြုလုပ်ထည့်သွင်းရတဲ့အဆင့်အနည်းဖြင့်ထည့်သွင်းအသုံးပြုနိုင်မှာဖြစ်ပါတယ်။



  1. မိမိ blog site ကို account အရင်ဝင်ပါ
  2. dashboard ထဲက Pages ကိုနှိပ်
  3. ➕ အိုင်ကွန်ကိုနှိပ်
  4. 🖍️ အိုင်ကွန်ကိုနှိပ်၍ < > HTML view ကိုရွေးချယ်၍နှိပ်ပါ
  5. အောက်က code ကို copy ယူပြီးကူးထည့်ပေးပါ
  6. save ကိုနှိပ်ပြီးပါပြီ

 <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css" rel="stylesheet" type="text/css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/abbott.min.css" rel="stylesheet" type="text/css"/>
<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins';
}
box{
  width: 100%;
  height: 100vh;
  background-color: #000;
}
.buttonruncode{
  float: center;
  display: block;
  color: white;
  text-align: center;
  padding:8px 10px;
  text-decoration: none;
  margin-top: 5px;
  margin-right: 20px;
  background-color:lightgreen;
   color:black;
   border-radius:8px ;
   width:150px;
   cursor: pointer;
}

.wrapper{
  display: flex;
}

.input, .output{
  flex-basis: 50%;
  height: 60vh;
}

.input{
  background-color: #0066ff;
}

.editor{
  height: 33.3%;
  display: flex;
  flex-direction: column;
}

.editor textarea{
  height: 50%;
  width:100%;
  resize: none;
  background: none;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 17px;
  color: #000;
  font-weight: 500;
  font-family: 'Cascadia Code';
}

.editor label{
  background-color: #000;
  color: #fff;
  padding: 5px;
}

i{
  margin-right: 7px;
}

.output{
  display: flex;
  flex-direction: column;
}
.output label{
  background-color:#000;
  color: #fff;
  padding: 5px;
}

iframe{
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}
</style>
<script crossorigin="anonymous" src="https://kit.fontawesome.com/f97427a625.js"></script>
<button class="buttonruncode" id="run" onclick="run()">Run </button>
<div class="wrapper">

  <div class="input">
      <div class="editor">
        <label><i class="fa-brands fa-html5"></i> HTML</label>
        <textarea id="html-code" name="html" spellcheck="false"></textarea>
      </div>
      <div class="editor">
        <label><i class="fa-brands fa-css3-alt"></i> CSS</label>
        <textarea id="css-code" name="css" spellcheck="false"></textarea>
      </div>
      <div class="editor">
        <label><i class="fa-brands fa-square-js"></i> JavaScript</label>
        <textarea id="js-code" name="js" spellcheck="false"></textarea>
      </div>
    </div>
<div class="outputeditor">	
	<iframe id="output-frame"></iframe>
	</div>
    
    </div>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js" type="text/javascript"></script>
  <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/perl/perl.min.js" type="text/javascript"></script>
<script>
var htmlValue = CodeMirror.fromTextArea(document.getElementById("html-code"), {
  lineNumbers: true,
  mode: "text/x-perl",
  theme: "abbott"
});

var cssValue = CodeMirror.fromTextArea(document.getElementById("css-code"), {
  lineNumbers: true,
  mode: "text/x-perl",
  theme: "abbott"
});
var jsValue = CodeMirror.fromTextArea(document.getElementById("js-code"), {
  lineNumbers: true,
  mode: "text/x-perl",
  theme: "abbott"
});
function run(){		
			var htmlCode=htmlValue.getValue();			
			let cssCode="<style>"+cssValue.getValue()+"</style>";
			let scriptCode=jsValue.getValue();
			let output =document.querySelector(".outputeditor #output-frame");
			output.contentDocument.body.innerHTML=htmlCode+cssCode;
			output.contentWindow.eval(scriptCode);
		}
</script>

Post a Comment