-->

Beranda  ›  Blogger  ›  Desain Web

Cara Memasang Syntax Highlighter di Blogger

By Updated: 2020-10-23T01:47:43Z 3 ·
Daftar Isi [Tampilkan]
Serieswans.com - Halo sobat blogger, dikesempatan kali ini saya akan membahas mengenai Syntax Highlinter dan cara memasangnya dihalaman blog, yang pertama kita aka bahas terlebih dahulu apa sih Syntax Highlighter itu ? 

Syntax Highlighter adalaha text editor yang menyoroti penulisan markup kode pada suatu halaman web bertujuan untuk mempermudah pengunjung mengenali keselurahan kodenya, baik itu dari warna kodenya ataupun strukturnya dan fontnya. '
Cara Memasang Syntax Highlighter Mirip Igniel di Blogger


Kita bisa implementasikan dari syntax higlighter pada halama website, forum online maupun blog dan banyak digunakan juga agar memudahkan pengunjung mana markup kode CSS, HTML, Javascript dan bahasa pemrograman lainnya. 

pada umumnya syntax higlighter ini dapat membuat huruf menjadi banyak varian warna tergantung dari kode markupnya. tapi pada tutorial kali ini hanya akan membuat satu warna saja dan dibuat hanya menggunakan CSS. jika anda ingin memasangnya silahkan ikuti tutorialnya di bawah ini. 

Cara Memasang Syntax Highlighter di Blogger

tips — Perlu di perhatikan jika sebelumnya anda sudah pernah memasang Syntax Highlinter atau sudah kode ada CSS  .post-body pre dan .post-body pre code silahkan hapus terlebih dahulu agar tidak bentrok.

  • jika sudah, silahkan tambahkan kode CSS di bawah ini dan letakan di atas kode ]]></b:skin> atau </style>
/* Syntax Highlighter Mirip Igniel */
.post-body pre,
#comments pre {
    background-color: #292e34; /* Kode Warna Background */
    border-left: 5px solid #008c5f; /* Kode Warna variasi border kiri */
    padding: 0;
    margin: 0.5em auto;
    position: relative;
    white-space: pre;
    word-wrap: break-word;
    word-break: normal;
    overflow: auto;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    user-select: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
.post-body pre code,
#comments pre code {
    display: block;
    color: #bfbf90; /* Kode Warna Huruf */
    font-size: 13px; /* Ukuran Huruf */
    max-height: 250px;
    padding: 10px 15px;
    line-height: 1.5em;
    white-space: pre;
    overflow: auto;
    user-select: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.post-body pre code span {
    color: #95b2f6;
    font-style: italic;
}
.post-body pre mark,
.post-body code mark,
.post-body pre code mark {
    background-color: #95b2f6;
    color: #292e34;
    margin: 0;
    padding: 0;
}
.post-body code,
.post-body code.tutor {
    color: #d85555;
    letter-spacing: -0.3px;
    font-size: 1em;
    user-select: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.post-body pre.html:before,
.post-body pre.css:before,
.post-body pre.javascript:before,
.post-body pre.jquery:before {
    background-color: #bde0b9; /* Kode Warna Background */
    font: 500 14px "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
    color: #333333; /* Kode Warna Huruf */
    display: block;
    padding: 10px 35px;
    font-size: 16px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position-x: 7px;
    background-position-y: center;
}
.post-body pre.html:before {
    content: "HTML";
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z' fill='%231d2129'/%3E%3C/svg%3E");
}
.post-body pre.css:before {
    content: "CSS";
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z' fill='%231d2129'/%3E%3C/svg%3E");
}
.post-body pre.javascript:before {
    content: "Javascript";
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z' fill='%231d2129'/%3E%3C/svg%3E");
}
.post-body pre.jquery:before {
    content: "jQuery";
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.88,10.41C20.77,12.18 17.61,11.9 15.84,9.79C14.06,7.67 14.34,4.5 16.45,2.75L16.96,2.37C15.27,4.19 15.16,7.03 16.8,9C18.43,10.94 21.25,11.32 23.34,9.97L22.88,10.41M21.1,14.5C17.93,17.17 13.2,16.76 10.54,13.58C7.87,10.41 8.29,5.68 11.46,3L12.38,2.36C9.96,5.09 9.84,9.26 12.26,12.14C14.68,15 18.8,15.63 21.91,13.72L21.1,14.5M19.97,19.38C15.53,23.11 8.9,22.53 5.17,18.08C1.45,13.64 2.03,7 6.47,3.29L7.58,2.5C4.07,6.3 3.85,12.23 7.28,16.32C10.71,20.4 16.59,21.22 20.96,18.43L19.97,19.38Z' fill='%231d2129'/%3E%3C/svg%3E");
}
  • Jika sudah silahkan simpan Tema

Cara menggunakan Syntax Highlighter di Blogger

Untuk cara menerapakan syntax highlighter ke dalam postingan blog, tinggal anda panggil saja menggunakan kode <pre> dan <code> seperti pada contoh dibawah
<pre class="html"><code>
<!-- Masukkan semua kode HTML disini -->
</code></pre>
<pre class="css"><code>
<!-- Masukkan semua kode CSS disini -->
</code></pre>
<pre class="javascript"><code>
<!-- Masukkan semua kode Javascript disini -->
</code></pre>
<pre class="jquery"><code>
<!-- Masukkan semua kode JQuery disini -->
</code></pre>
Jika anda ingin memasangkan tag HTML atau Javascript ke dalam syntax highlighter, kode tersebut harus diparse terlebih dahulu di blogcrowsds

Untuk demonya bisa anda cek sendiri di codepen saya di bawah ini. 

Akhir Kata 

Nah, itulah pembahasan kali ini mengenai Cara Memasang Syntax Highlighter di Blogger dan versi ini lebih ringan dan simple. semoga bermanfaat gan
Tags Blogger Desain Web
Next
Previous
Tidak ada kata "Tapi" dan "Nanti" jika anda ingin Sukses
  • Facebook
  • Twitter
  • Instagram
    • Support Me
    Saweria Donasi via Saweria Trakteer Donasi via Trakteer Buy Me A Coffee Buy Me A Coffee Tentang Donasi ?

    Related Posts

    Buka Komentar ( 3 )
    Tutup Komentar

    3 Komentar

    • Mohon Tinggalkan jejak sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
    • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
    • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
    • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
      <i>#comments</i>
    • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
      <em>#comments {margin:0; padding:10px 15px}</em>

    Langganan: Posting Komentar (Atom)

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    x
    Berlangganan

    Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!