Free Download Blogger Template High CTR AdSense

demo post serieswans

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
Related Posts
Newest Older
Admin BloggerByte
Nothing for Now

Related Posts

Post a comment