Cara Membuat Syntax Highlighter Blogger
6 Des 2023
0
Komentar
SusahTidurZz - Halo sobat susahtidurzz kembali lagi bersama saya diartikel kali ini mengenai Cara Membuat Syntax Highlighter Blogger yang tentunya ga asing lagi mengenai Syntax Highlighter ini karena kita sering melihat di berbagai situs yang sering digunakan untuk membungkus kode kode.
Apa Itu Syntax Highlighter Blogger
Merupakan text editor yang menyoroti penulisan markup kode pada suatu halamab web dan bertujuan agar pengguna mengenali keseluruhan kodenya, baik dari warna ataupun struktur nya dan font
Cara membuat Syntax Highlighter Blogger
Sebelum melakukan tutorial ini sebelum harap kamu cari CSS kode .pre dan .code jika ada silahkan kamu hapus terlebih dahulu agar tampilan nya tidak bentrok
]]></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");
}<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 kamu ingin menggunakan kode Syntax Highlighter di setiap postingan artikel kamu wajib mem parse kode Html, Css, Javascript di situs parse NikamiCreatives Parse
Baik lah itu lah artikel kali ini mengenai Cara Membuat Syntax Highlighter Blogger jika ada pertanyaan jangan sungkan untuk memberikan komentar dibawah ini.
Belum ada Komentar untuk "Cara Membuat Syntax Highlighter Blogger "
Posting Komentar
Berikan Komentar Terbaik mu agar situs ini berjalan lancar