-->
Beranda
Blog
Blogger

Membuat Syntax Highlighter Dengan CSS dan HTML

Syntax Highlighter adalah Fitur untuk membuat hyperlink yang memilik warna unik pada tiap program, kalimat, baris, dan seluruh teks || Zypo-Code
Daftar Isi [😍 Tampilkan 😍]
Membuat Syntax Highlighter Dengan CSS dan HTML

Syntax Highlighter

Syntax Highlighter adalah fitur teks editor yang sering digunakan untuk menampilkan source code (bahasa pemerograman), Syntax Highlighter biasanya memiliki huruf yang berwarna sesuai dengan tag atau class'nya , 

untuk kali ini kita hanya akan membuat Syntax Highlighter satu warna saja dikarenakan ini hanya menggunakan CSS saja, karena apabila menggunakan huruf bewarna pastinya membuat blog anda akan menjadi lambat dan menambahkan javascript didalam template tersebut.

Format ini digunakan untuk menuliskan baris kode HTML dalam postingan, biasa dipakai pada blog dengan tema koding atau tutorial blogging. 


INFO : Ini adalah CSS Yang Saya Gunakan Untuk Menampilkan Syntax Highlighter Untuk Beberapa Website ^_^

Cara Membuat Syntax Highlighter

  1. Login pada akun Blogger kalian masing-masing
  2. Masuk ke dalam TEMA > Klik Arrow/Panah pada bagian kanan > Lalu pilih Edit HTML
  3. Cari Kode </b:skin> atau </style> lalu pastekan kode CSS di bawah Ini
    • Btw kalian masukin'nya jangan double ya, cukup pilih salah satu'nya saja yaah antara </b:skin> maupun </style>
  4. Setelah kalian letakan lalu Simpan
/* Syntax Highlighter Zypo-Code
================================ */
.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:#2962ff;
	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:0 0;
	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%
}
.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.css:before {
	content:'';
	background-color:#2962ff;
	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='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='%23fff'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:12px center;
	background-size:24px 24px;
	padding-top:10px
}
.post-body pre.css: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:0 0;
	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.css:after {
	content:'';
	background-color:#ffbd2d;
	position:absolute;
	width:20px;
	height:20px;
	top:15px;
	right:35px;
	border-radius:50%
}
.post-body pre code.css:before {
	content:'';
	background-color:#ff5f57;
	position:absolute;
	width:20px;
	height:20px;
	top:15px;
	right:60px;
	border-radius:50%
}
.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.javascript:before {
	content:'';
	background-color:#2962ff;
	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='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='%23fff'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:12px center;
	background-size:24px 24px;
	padding-top:10px
}
.post-body pre.javascript: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:0 0;
	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.javascript:after {
	content:'';
	background-color:#ffbd2d;
	position:absolute;
	width:20px;
	height:20px;
	top:15px;
	right:35px;
	border-radius:50%
}
.post-body pre code.javascript:before {
	content:'';
	background-color:#ff5f57;
	position:absolute;
	width:20px;
	height:20px;
	top:15px;
	right:60px;
	border-radius:50%
}
.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.html:before {
	content:'';
	background-color:#2962ff;
	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='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='%23fff'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:12px center;
	background-size:24px 24px;
	padding-top:10px
}
.post-body pre.html: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:0 0;
	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.html:after {
	content:'';
	background-color:#ffbd2d;
	position:absolute;
	width:20px;
	height:20px;
	top:15px;
	right:35px;
	border-radius:50%
}
.post-body pre code.html:before {
	content:'';
	background-color:#ff5f57;
	position:absolute;
	width:20px;
	height:20px;
	top:15px;
	right:60px;
	border-radius:50%
}
.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.jquery:before {
	content:'';
	background-color:#2962ff;
	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='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='%23fff'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:12px center;
	background-size:24px 24px;
	padding-top:10px
}
.post-body pre.jquery: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:0 0;
	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.jquery:after {
	content:'';
	background-color:#ffbd2d;
	position:absolute;
	width:20px;
	height:20px;
	top:15px;
	right:35px;
	border-radius:50%
}
.post-body pre code.jquery:before {
	content:'';
	background-color:#ff5f57;
	position:absolute;
	width:20px;
	height:20px;
	top:15px;
	right:60px;
	border-radius:50%
}
.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.info:before {
	content:'';
	background-color:#2962ff;
	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='M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='%23fff'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:12px center;
	background-size:24px 24px;
	padding-top:10px
}
.post-body pre.info: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:0 0;
	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.info:after {
	content:'';
	background-color:#ffbd2d;
	position:absolute;
	width:20px;
	height:20px;
	top:15px;
	right:35px;
	border-radius:50%
}
.post-body pre code.info:before {
	content:'';
	background-color:#ff5f57;
	position:absolute;
	width:20px;
	height:20px;
	top:15px;
	right:60px;
	border-radius: 50%
}
/* End Syntax Highlighter Zypo-Code */

Uji Coba Syntax Highlighter

  1. Buat Halaman/Postingan dalam bentuk Draft
  2. Dibagian sudut kiri atas Kalian rubah Tampilan Menulis menjadi Tampilan HTML
  3. Kemudian tempelkan kode dibawah ini untuk kalian kreasikan
  4. Setelah kalian tempelkan lalu Publikasikan/Draft terserah kalian. 
<pre class="html"><code>
<!-- Masukkan semua kode HTML anda disini -->
</code></pre>
<pre class="css"><code>
<!-- Masukkan semua kode CSS anda disini -->
</code></pre>
<pre class="info"><code>
<!-- Masukkan semua kode info anda disini -->
</code></pre>
<!-- Masukkan semua kode Javascript anda disini -->
</code></pre>
<pre class="jquery"><code>
<!-- Masukkan semua kode JQuery anda disini -->
</code></pre>

Semoga Cara Membuat Syntax Highlighter Menggunakan CSS dan HTML di Blogger bermanfaat bagi kalian semua. Jika ada hal yang ingin ditanyakan silakan berkomentar saja di bawah. 


INFO : Jika anda ingin memasukkan kode HTML, anda wajib mem-parse kode HTML terlebih dahulu, agar bisa terbaca oleh sistem syntax hightlighter

Posting Komentar

Situs Karoseri Indonesia