Copy To Clipboard Pre Tag Code Box

Copy To Clipboard Pre Tag Code Box

ဒါလေးက တော့မိမိ Blog Post မှာတင်ထားတဲ့အကြောင်းအရာ‌ တွေနှင့်သက်ဆိုင် သော HTML/CSS/JavaScript Code တွေကိုမိမိ Website ကိုလာရောက်လည်ပတ်တဲ့ Customer တွေအနေနဲ့အလွယ်တကူ Copy ယူနိုင်ရန် ခလုတ်တချက်နှိပ်ရုံနဲ့အဲဒီ Code တွေ Copy ယူလို့ရနိုင်အောင်ပြုလုပ်ထားတဲ့ Code Box လေးဖြစ်ပါတယ်။



  1. မိမိ blogsite ကို account အရင်ဝင်ပါ
  2. dashboard ထဲက Theme ကိုနှိပ်
  3. Customize ဘေးက 🔻ကိုနှိပ်
  4. Edit HTML ကိုနှိပ်
  5. </head> (or) </body> ကိုရှာ တွေ့ပြီဆိုရင် အောက်က code ကိုအဲဒီ </head> (or) </body> အပေါ်ကနေထည့်ပေးပါ။မိမိနှစ်သက်သလိုထည့်သွင်းအသုံးပြုလို့ရပါတယ်။

<script src="https://cdn.jsdelivr.net/gh/kokhinmaungwin/BroCodeBox@1.1.0/brocodebox.min.js"></script>

<div class="bro-box" data-file="demo.html" data-lang="html" data-lines="3-6">
<pre><code>Your_code_is_here</code></pre>
</div>

<div class="bro-box" data-file="demo.css" data-lang="css" data-lines="0-0">
<pre><code>Your_code_is_here</code></pre>
</div>

<div class="bro-box" data-file="demo.js" data-lang="js" data-lines="0-0">
<pre><code>Your_code_is_here</code></pre>
</div>

  1. မိမိထည့်သွင်းအသုံးပြုမဲ့ Code များကို HTML Parser Tool တွင်ပြောင်းလဲ ပေးပါ
    1. HTML Parser Tool ကိုကိုယ်တိုင်ဖန်တီးပြုလုပ်ချင်ရင်ဒီ link ကိုနှိပ်ပါ HTML Parser Tool
    2. ပြုလုပ်ထားပြီးသားHTML Parser Tool ကိုအသုံးပြုမယ်ဆိုရင်ဒီ link ကိုနှိပ်ပါ HTML Parser Tool
    3. HTML Parser Tool တွင် Write/paste code here... နေရာ၌မိမိရဲ့ pre tag codebox တွင်ထည့်သွင်းအသုံးပြုမဲ့ code ကိုထည့်၍ Code analysis ကိုနှိပ်ပါ
    4. ထိုသို့ Code analysis နှိပ်လိုက်လျှင် code များ ပြောင်းသွားပြီဆိုရင် Copy code နှိပ်၍ copy ယူပါ
  2. Your_code_is_here နေရာ၌ HTML Parser Tool တွင်ပြောင်းလဲထား သော Code ကို Copy ယူ၍ထည့်သွင်းအသုံးပြုရမှာဖြစ်ပါတယ်

Post a Comment