Cara Membuat dan Memasang Tools Parse Script di Blog - Bagi Anda yang berprofesi sebagai seorang ahli pemrograman, alat penguraian menjadi salah satu hal yang sangat penting untuk dimiliki. Namun sebelum melangkah lebih jauh, ada baiknya untuk mengetahui terlebih dahulu tentang pengertian parse itu sendiri.
Jika diartikan ke dalam bahasa Indonesia, kata parse berarti mengurai. Sesuai dengan artinya, parse adalah penguraian struktur kode yang ingin ditampilkan dalam format teks atau tulisan. Dalam penguraian tersebut, skrip akan dimodifikasi sedemikian rupa agar terbaca sebagai teks atau tulisan.
Halaman web dengan topik teknologi biasanya menggunakan alat ini untuk melampirkan teks skrip ke dalam postingan. Seperti yang saya jelaskan tadi, skrip hanya akan terbaca sebagai teks apabila diurai terlebih dahulu.
Umumnya, ada lima jenis karakter yang akan berubah setelah diurai, apa saja itu?
| Symbol | Entity Name | Number Code |
|---|---|---|
| & | & | & |
| < | < | < |
| > | > | > |
| ' | ' | ' |
| " | " | " |
Daripada ganti secara manual, mending pakai tools saja. Selain mudah, Anda juga tidak perlu repot kesana-sini hanya untuk mencari tools terkait. Berikut adalah tampilan lengkapnya setelah dipasang:
Cara Membuat dan Memasang Tools Parse skrip di Blog
- Masuk ke BLOGGER
- Pilih menu HALAMAN
- Pilih HALAMAN BARU
- Tempel di mode TAMPILAN HTML:
- Pilih PUBLIKASIKAN
- Selesai.
<!-- HTML --> <div id="scriptParse"> <textarea id="parseArea" placeholder="Paste your code here..." spellcheck="false"></textarea> <div class="parseButton"> <button class="subButton" type="button" onclick="convert()">Parse</button> <button class="subButton" id="clearButton" onclick="cdClear()">Clear</button> </div> <div class="creatorLink" style="font-size:12px"><a href="https://www.ferisp.com">Made by www.ferisp.com</a></div> </div> <!-- End HTML --> <!-- CSS --> <style> #scriptParse textarea{display:block;width:100%;height:240px;background:#fffeff;font-family:"Fira Mono",monospace;font-size:13px;margin:0 auto;padding:20px;border:1px solid #e6e6e6;border-radius:3px 3px 0 0;outline:none;resize:none} #scriptParse textarea::placeholder{color:#bbb} #scriptParse .parseButton{float:none;background:#009ee0;font-family:"Noto Sans",sans-serif;text-align:center;margin:0;padding:40px;border-radius:0 0 3px 3px} button{text-align:center;padding:20px;border-radius:3px;border:0;box-shadow:0 2px 6px -4px rgba(0,0,0,0.05);cursor:pointer} button:hover{background:rgba(255,255,255,.5);color:#fff} .subButton{display:inline-block;background:rgba(255,255,255,.25);color:#fff;font-size:13px;text-align:center;padding:15px;border-radius:99em;margin:5px} .creatorLink{display:none} /* Dark Mode */ .drK #scriptParse textarea{background:#2d2d30;border-color:#2d2d30} .drK #scriptParse .parseButton{background:#252526} </style> <!-- End CSS --> <!-- JavaScript --> <script> function convert(){ var ele1=document.getElementById("parseArea"); var replaced; replaced=ele1.value; replaced=replaced.replace(/&/ig,"&"); replaced=replaced.replace(/</ig,"<"); replaced=replaced.replace(/>/ig,">"); replaced=replaced.replace(/"/ig,"""); replaced=replaced.replace(/'/ig,"'"); replaced=replaced.replace(/^/,"<pre><code>"); replaced=replaced.replace(/$/,"</code></pre>"); ele1.value=replaced; document.getElementById("clearButton") .style.display="inline-block" } function cdClear(){ var wtarea=document.getElementById("parseArea"); wtarea.value=""; document.getElementById("") .style.display="none",document.getElementById("clearButton") .style.display="none" } </script> <!-- End JavaScript -->
Untuk lebih jelasnya, silahkan membuka halaman di bawah ini untuk tampilan langsung:
Catatan
Pada halaman demo, saya sengaja menggunakan font Noto Sans dan Fira Mono. Untuk hal serupa, silahkan menambahakan data font berikut di atas ]]></b:skin>:
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/notosans/v14/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format("woff2")}
@font-face{font-family:"Fira Mono";font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firamono/v9/N0bS2SlFPv1weGeLZDto1d3HnvfU.woff2) format("woff2")}Untuk menambahkan fungsi baru, ubah dan tempel kode berikut pada bagian yang telah ditandai:
cv=cv.replace(/Input/g,"Output");
Penutup
Perlu diingat, setiap ingin memasukkan skrip ke dalam bentuk teks atau tulisan, jangan lupa untuk melakukan penguraian terlebih dahulu.
Setelah itu, lanjutkan dengan memasukkan skrip tersebut dengan awalan <pre><code> dan akhiran </code></pre> agar ditampilkan sebagai syntax highlighter.
Cukup sekian artikel tentang Cara Membuat dan Memasang Tools Parse Script di Blog ini, Terima kasih.