Cara Membuat dan Memasang Tools Parse Script di Blog

Cara Membuat dan Memasang Tools Parse Script di Blog

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?

SymbolEntity NameNumber Code
&&&
<&lt;&#060;
>&gt;&#062;
'&apos;&#039;
"&quot;&#034;

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:

Parse Script

Cara Membuat dan Memasang Tools Parse skrip di Blog

  • Masuk ke BLOGGER
  • Pilih menu HALAMAN
  • Pilih HALAMAN BARU
  • Tempel di mode TAMPILAN HTML:
  • <!-- 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,"&amp;");
      replaced=replaced.replace(/</ig,"&lt;");
      replaced=replaced.replace(/>/ig,"&gt;");
      replaced=replaced.replace(/"/ig,"&quot;");
      replaced=replaced.replace(/'/ig,"&#039;");
      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 -->
  • Pilih PUBLIKASIKAN
  • Selesai.

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.

Suka menulis berita yang berhubungan dengan dunia teknologi khususnya Blog, Aplikasi, Provider, Smartphone, dan Desktop

6 komentar

  1. Mantap sekali
    1. Terima kasih
  2. Sukses selalu mas
    1. Terima kasih
  3. Terima kasih banyak ya
    1. Semoga bermanfaat mas