Cara Membuat Syantax Highligter Keren 2021

Cara Membuat Syantax Highligter Keren - Hai sabat blogger kesempatan kali ini saya akan membagikan tutorial cara membuat syantax highligter, memang sudah banyak yang membuat tutorial nya dan tampilan nya pun beragam dan kesempatan kali ini saya membagikan model seperti thumbnail postingan ini jika penasan simak penjelasan berikut ini.

Fungsi Syantax Highligter ini bertujuan utuk menaruh tempat kode html, javascript, css, dan lain sebagainya untuk menggunakan nya terlebih dahulu memparse kode tersebutb, baiklah langsung saja kita ke tutorial nya berikut ini

/* Sintak*/
.post-body code{color:#666;font-family:monospace,monospace;font-size:95%;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;background-color:rgba(255, 51, 0,.1);padding:2px 5px;border-radius:5px}
.post-body pre,.post-body pre code{font-family:monospace,monospace; font-size:90%;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{display:block;background-color:#223344;color:#60b2d2;padding:0px;margin:10px auto;white-space:pre; word-wrap:break-word;overflow:auto;position:relative; width:100%;-moz-tab-size:1;-o-tab-size:1;tab-size:1;border-radius:8px}
.post-body pre code::-webkit-scrollbar{width:5px;height:7px}
.post-body pre code::-webkit-scrollbar-track{background:#ddd}
.post-body pre code::-webkit-scrollbar-thumb{background:#888}
.post-body pre code::-webkit-scrollbar-thumb:hover{background:#52aace}
.post-body pre code{display:block;padding:10px 20px;background-color:#192633;color:#60b2d2;max-height:300px;line-height:20px;display:block;margin:27px 0px 0px 0px}
.post-body pre::after{content:'CODE';font-family:Poppins;sans-serif;position:absolute;top:0px;right:20px;color:#60b2d2;font-size:70%}
.post-body pre::before{background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M3,14L3.5,14.07L8.07,9.5C7.89,8.85 8.06,8.11 8.59,7.59C9.37,6.8 10.63,6.8 11.41,7.59C11.94,8.11 12.11,8.85 11.93,9.5L14.5,12.07L15,12C15.18,12 15.35,12 15.5,12.07L19.07,8.5C19,8.35 19,8.18 19,8A2,2 0 0,1 21,6A2,2 0 0,1 23,8A2,2 0 0,1 21,10C20.82,10 20.65,10 20.5,9.93L16.93,13.5C17,13.65 17,13.82 17,14A2,2 0 0,1 15,16A2,2 0 0,1 13,14L13.07,13.5L10.5,10.93C10.18,11 9.82,11 9.5,10.93L4.93,15.5L5,16A2,2 0 0,1 3,18A2,2 0 0,1 1,16A2,2 0 0,1 3,14Z' fill='%2360b2d2'></path></svg>") center no-repeat;content:'';width:16px;height:16px;display:inline-block;position:absolute;top:5px;left:20px}

Untuk mengganti icon SVG nya silahkan ganti kode SVG dibawah ini
<path d='M3,14L3.5,14.07L8.07,9.5C7.89,8.85 8.06,8.11 8.59,7.59C9.37,6.8 10.63,6.8 11.41,7.59C11.94,8.11 12.11,8.85 11.93,9.5L14.5,12.07L15,12C15.18,12 15.35,12 15.5,12.07L19.07,8.5C19,8.35 19,8.18 19,8A2,2 0 0,1 21,6A2,2 0 0,1 23,8A2,2 0 0,1 21,10C20.82,10 20.65,10 20.5,9.93L16.93,13.5C17,13.65 17,13.82 17,14A2,2 0 0,1 15,16A2,2 0 0,1 13,14L13.07,13.5L10.5,10.93C10.18,11 9.82,11 9.5,10.93L4.93,15.5L5,16A2,2 0 0,1 3,18A2,2 0 0,1 1,16A2,2 0 0,1 3,14Z' fill='%2360b2d2'></path>