HTML CODE LITERAL & PARSED PREVIEW ON BLOGGER

HTML Code Literal & Parsed Preview On Blogger

Blogger သမားများအတွက်အလွန်အသုံးဝင် သော Tool တခုဖြစ်သည်။အဘယ်ကြောင့်ဆိုသော်ဒီ Parser Tool သည် Code များစွာကို HTML Code အဖြစ်ခွဲခြမ်းစိတ်ဖြာပေးသောကိရိယာတခုဖြစ် သော ကြောင့်ပါ။အဓိကအားဖြင့် pre tag code box အသုံးပြု‌ သောသူများအတွက်မရှိမဖြစ်လိုအပ်‌ သော Tool တခုဖြစ်သည်။အောက်တွင် Online နှင့် Offline 2 ခုပေးထားသည်။ထို 2 ခုထဲကမှကြိုက်နှစ်သက်ရာကိုအသုံးပြုပါ။ထိုကြောင့် HTML Parser ကိုဖန်တီးရန် အောက်ပါပြုလုပ်နည်းများအတိုင်းပြုလုပ် ပေးဖို့လိုအပ်ပါတယ်။

Online

Online အနေနဲ့အသုံးပြုချင်ရင်အောက်က code ကိုအသုံးပြုပါ

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

<style>
body{font-family: Arial, sans-serif;padding:10px;background:#f5f7fb;}
textarea{width:100%;min-height:80px;padding:10px;border-radius:8px;border:1px solid #d6dde6;box-sizing:border-box;resize:vertical;}
#previewWrapper{margin-top:15px;display:flex;gap:10px;flex-wrap:wrap;}
pre, .rendered{background:#fff;border:1px solid #ddd;padding:10px;white-space:pre-wrap;word-wrap:break-word;flex: 1 1 40%;max-width:320px;max-height:300px;overflow-y:auto;font-family:monospace;user-select:text;border-radius:6px;box-sizing:border-box;}
.rendered{font-family: Arial, sans-serif;}
.controls{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;}
button{padding:8px 10px;border:none;background:#0f62fe;color:white;border-radius:6px;cursor:pointer;font-size:14px;transition:background-color 0.2s ease;}
button:hover{background:#0b4dcc;}
/* Responsive for small screens */
  @media (max-width: 600px) {
    #previewWrapper {
      flex-direction: column;
    }
    pre, .rendered {
      flex: 1 1 100%;
      max-height: 200px;  
    }
    button {
      flex: 1 1 100%;
      font-size: 16px;
      padding: 12px 0;
    }
    .controls {
      flex-direction: column;
      gap: 12px;
    }
  }
</style>
  <textarea id="codeInput" placeholder="Write or paste HTML code here...">&lt;h2&gt;Hello World&lt;/h2&gt;</textarea>
  <div class="controls">
    <button id="copyBtn">Select & Copy Literal</button>
    <button id="clearBtn">Clear</button>
    <button id="parseBtn">Parse & Render</button>
  </div>
  <div id="previewWrapper">
    <div>
      <h3>Literal Preview</h3>
      <pre id="codePreview"></pre>
    </div>
    <div>
      <h3>Rendered Preview</h3>
      <div id="renderedPreview" class="rendered"></div>
    </div>
  </div>
<script>//<![CDATA[
  const textarea = document.getElementById('codeInput');
  const codePreview = document.getElementById('codePreview');
  const renderedPreview = document.getElementById('renderedPreview');
  const copyBtn = document.getElementById('copyBtn');
  const clearBtn = document.getElementById('clearBtn');
  const parseBtn = document.getElementById('parseBtn');

  function escapeHTML(str) {
    return str.replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;")
              .replace(/"/g, "&quot;")
              .replace(/'/g, "&#39;");
  }

  function updateLiteralPreview() {
    codePreview.textContent = escapeHTML(textarea.value);
  }
  updateLiteralPreview();
  renderedPreview.innerHTML = ''; 

  // Copy literal preview to clipboard
  copyBtn.addEventListener('click', () => {
    const range = document.createRange();
    range.selectNodeContents(codePreview);
    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
try {
      document.execCommand('copy');
      alert('Copied literal code to clipboard!');
      sel.removeAllRanges();
    } catch {
      alert('Copy failed. Please try manual selection.');
    }
  });

  // Clear textarea and previews
  clearBtn.addEventListener('click', () => {
    textarea.value = '';
    updateLiteralPreview();
    renderedPreview.innerHTML = '';
    textarea.focus();
  });

  // Parse & render HTML from textarea
  parseBtn.addEventListener('click', () => {
    renderedPreview.innerHTML = textarea.value;
  });

  // Update literal preview as user types
  textarea.addEventListener('input', () => {
    updateLiteralPreview();
    // Clear rendered preview on input for safety
    renderedPreview.innerHTML = '';
  });
//]]></script>

Offline

Offline အနေနဲ့အသုံးပြုချင်ရင်အောက်က link ကိုနှိပ်ပါ

1. https://kokhinmaungwin.github.io/HTML-Parser-PWA/
2. Install App ကိုနှိပ်
3. install ကိုနှိပ်
4. offline app အဖြစ်အသုံးပြုလို့ရပါပြီ

Offline အနေနဲ့အသုံးပြုမည်ဆိုပါက အောက်ကအချက်အလက်အချို့သိထားရန်လိုအပ်ပါသည်။

Browser Cache ရှင်းရင် PWA Offline မအောင်မြင်နိုင်ခြင်း အကြောင်း သိထားစေလိုပါတယ်

Progressive Web App (PWA) တွေဟာ Service Worker နဲ့ browser cache ကိုအမြဲတမ်းအသုံးပြုပြီး Offline မှာပါ အဆင်ပြေစွာ အသုံးပြုနိုင်အောင် ဒီဇိုင်းလုပ်ထားတာပါ။ ဒါပေမယ့် အသုံးပြုသူတွေ Browser Cache ကိုရှင်းလိုက်ရင် Offline mode အတွက် အချို့ assets တွေ ပျောက်ကွယ်သွားပြီး အလုပ်မလုပ်နိုင်ခြင်း၊ Error တွေဖြစ်တတ်ပါတယ်။

ဘာကြောင့် Browser Cache ရှင်းရင် ပြဿနာဖြစ်သလဲ?

Browser Cache ဆိုတာ Browser က locally သိမ်းဆည်းထားတဲ့ JavaScript, CSS, HTML ဖိုင်တွေကို ဆိုလိုပါတယ်။ Service Worker က အခြား cache storage (Cache Storage API) ကိုအသုံးပြုပြီး ထပ်မံ သိမ်းဆည်းပေမယ့် Browser Cache မှာဖိုင်တွေမရှိတော့ရင် တချို့ assets ကို မရနိုင်တဲ့အခြေအနေဖြစ်တတ်ပါတယ်။

ဒီအတွက်အချက်တွေရှိပါတယ်

1. Browser Cache ရှင်းလိုက်ရင် အသုံးပြုတဲ့ assets တွေ ပျောက်ကွယ်သွားတတ်သည်

2. Service Worker cache က သာမက browser cache ကိုတစ်ခါတစ်ရံ အသုံးချတာကြောင့် Offline မှာ အသုံးပြုချိန်မှာ လိုအပ်တဲ့ assets မတွေ့လို့ error ဖြစ်တတ်တယ်

3. ဒီလိုဖြစ်ရင် App က ပြန်တက်ဖို့ (reload) နှင့် Internet ပြန်ဖွင့်ဖို့လိုတတ်တယ်

4. Browser Cache ကိုရှင်းခြင်းက PWA Offline Usage အတွက်အန္တရာယ်ရှိတတ်ပါသဖြင့် လိုအပ်မှသာလုပ်ပါ

5. Cache ရှင်းလိုက်ရင် app offline mode မှာ အဆင်မပြေဖြစ်နိုင်တာနဲ့တင်သိထားပြီးပြဿနာဖြစ်လာရင် Internet ဖွင့်ပြန်ပြီး reload လုပ်ပါ

6. အခုအချက်တွေကို နားလည်သိရှိထားပြီဆိုရင် PWA ကို ပိုမိုကောင်းမွန်စွာအသုံးပြုနိုင်ပါသည်