Membuat Syntax Highlighter Pada Blog Tapilan Bagus Dengan CSS - Syntax highlihgter adalah teks editor yang menyoroti penulisan markup kode pada halaman postingan web yang berfungsi untuk mempermudah pengunjung mengenali keseluruhan kodenya, selain dari itu fungsi syntax highlighter ini banyak digunakan pada blog yang bertema tutorial seperti blog Zadesign selain merapikan huruf dan mempercantik blog pengunjung dapat membedan kode yang akan kamu gunakan seperi CSS, HTML, atau JavaScript dengan tulisan biasanya
Pada dasarnya Syntax Hihglighter beraneka ragam bentuknya tapi pada kali ini saya akan membuatnya berwarna - warni agar lebih menarik dan enak dipandang oleh mata jika blog kamu bertema tutorial dan sering membagikan sourch code, maka tidak ada ruginya kamu membuat syntax highligter di blog hanya dengan css seperi dibawah ini
Cara Memasang Syntax Highlighter Pada Blog
Jika sebelumnya sudah ada sudah ada kode CSS bawaan template kamu sebaiknya kamu hapus telebih dahulu agar menghindari tumburan code nantinya silahkan kamu cari code .post-body pre dan .post-body pre code jika tidak ada coba dicari kode serupa karna setiap template berbeda - beda kemudian taruh kode CSS dibawah ini tepat diatas kode </style>
/* Syntax Highlighter Zadesign.blogspot.com */
.post-body pre {
background-color: #292E34;
padding: 0;
margin: .5em auto;
white-space: pre;
position: relative;
word-wrap: break-word;
overflow: auto;
position: relative;
width: 100%;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
word-break: normal;
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;
padding-top: 50px;
border-radius: 6px;
}
.post-body pre::before {
content: '';
background-color: #753f62;
height: 40px;
position: absolute;
width: 100%;
top: 0;
color: #242831;
font-weight: 500;
border-radius: 6px 6px 0 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z' fill='%23fff'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 12px center;
background-size: 24px 24px;
padding-top: 10px;
}
.post-body pre::after {
content: '';
background-color: #28cb41;
position: absolute;
width: 20px;
height: 20px;
top: 15px;
right: 10px;
border-radius: 50%;
}
.post-body pre code {
color: #BFBF90;
font-size: 12px;
max-height: 250px;
line-height: 1.5em;
display: block;
background: none;
border: none;
padding: 10px 15px;
font-family: 'source code pro',menlo,consolas,monaco,monospace;
white-space: pre-wrap;
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::after {
content: '';
background-color: #ffbd2d;
position: absolute;
width: 20px;
height: 20px;
top: 15px;
right: 35px;
border-radius: 50%;
}
.post-body pre code::before {
content: '';
background-color: #ff5f57;
position: absolute;
width: 20px;
height: 20px;
top: 15px;
right: 60px;
border-radius: 50%;
} Cara Menggunakan Syntax Highlighter Pada Blog
Untuk menggunakan nya pun cukup mudah sekali dengan cara pemanggilan kode nya saja seperti code dibawah ini
<pre><code>
<!-- Masukkan semua kode CSS, HTML atau Javascript disini -->
</pre></code>Jika ingin menulis tag HTML atau Javascript di dalam syntax highlighter maka wajib diparse lebih dulu di Zadesign agar tidak menghancurkan tampilan template.
demikianlah tutorial kali ini pada postingan berikut nya akan lebih banyak tutorial - tutorial lain nya silahkan nantikan update dari kamu buat kamu yang setia nungguin update berikunya.