Cara Memasang Syntax Highlighter di Blogger

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.

Demo Click here

Akhir Kata

Nah, itulah pembahasan kali ini mengenai Cara Memasang Syntax Highlighter di Blogger dan versi ini lebih ringan dan simple. semoga bermanfaat gan

3 komentar

NoNey
September 01, 2021September 01, 2021
Hapus Komentar
Salin Permalink
Kunjungi profil
#comments
Galeh | Jagoan Redesign
Maret 13, 2021Maret 13, 2021
Hapus Komentar
Salin Permalink
Kunjungi profil
Mantap
Ikhsan Coegraphy
Desember 05, 2020Desember 05, 2020
Hapus Komentar
Salin Permalink
Kunjungi profil
Mas bikinin tutorial bikin homepage grid include icon label ama komentar kayak blog ini mas,

Cara Memasang Syntax Highlighter di Blogger

Cara Memasang Syntax Highlighter di Blogger

Cara menggunakan Syntax Highlighter di Blogger

Akhir Kata

Related Posts

3 komentar