Cara Membuat Kotak Syntax highlighter Professional Di Blog
1/30/2019
Edit
komputerdia.com - Apa yang dimaksud dengan Kotak Syntax highlighter ? Kotak Syntax highlighter merupakan salah satu ftur atau gaya yang sering digunakan oleh para blogger yang membahasa masalah coding untuk menempatkan sebuah kode, script, atau codingan kedalam sebuah kotak scroll yangd apat di copy oleh para pengunjung blognya.
Apa manfaat dari Kotak Syntax highlighter? selain terlihat professional, cara ini juga terbukti sangat populer karena masalah kerapihan dan memisahkan antara blok kode, script atau codingan dengan bahasa umum lainnya, sehingga pembaca yang membutuhkan script tersebut dapat mengambilnya secara gampang tanpa melakukan kesalahan.
Baca Juga Artikel Lainnya :
- Cara Memasang dan Membuat Kotak Syntax highlighter simpel Di Blog
- Cara Membuat Button Sosial Media Di Kombinasikan Dengan Tombol Back To Top
- Cara Mudah Memasang Anti Ad-Block Responsive Di Blogger
Membuat Kotak Syntax highlighter Professional Di Blog
- Langkah pertama silahkan kalian login ke akun blog kalian
- Masuk ke menu tema atau theme kemudian pilih menu edit html
- Setelah itu silahkan kalian kode ]]></b:skin> atau </style> dengan menekan tombol CTRL + F dan ketikkan perintah ]]></b:skin> atau </style>
- Salin dan tempelkan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>
/* CSS Prism Syntax Highlighter */
pre {
padding: 50px 10px 10px 10px;
margin: .5em 0;
white-space: pre;
word-wrap: break-word;
overflow: auto;
background-color: #2c323c;
position: relative;
border-radius: 4px;
max-height: 500px;
}
pre::before {
font-size: 16px;
content: attr(title);
position: absolute;
top: 0;
background-color: #eee;
padding: 10px;
left: 0;
right: 0;
color: #fff;
text-transform: uppercase;
display: block;
margin: 0 0 15px 0;
font-weight: bold;
}
pre::after {
content: 'Double click to selection';
padding: 2px 10px;
width: auto;
height: auto;
position: absolute;
right: 8px;
top: 8px;
color: #fff;
line-height: 20px;
transition: all 0.3s ease-in-out;
}
pre:hover::after {
opacity: 0;
top: -8px;
visibility: visible;
}
code {
font-family: Consolas,Monaco,'
Andale Mono','Courier New',Courier,Monospace;
line-height: 16px;
color: #88a9ad;
background-color: transparent;
padding: 1px 2px;
font-size: 12px;
}
pre code {
display: block;
background: none;
border: none;
color: #e9e9e9;
direction: ltr;
text-align: left;
word-spacing: normal;
padding: 0 0;
font-weight: bold;
}
code .token.punctuation {
color: #ccc;
}
pre code .token.punctuation {
color: #fafafa;
}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
color: #777;
}
code .namespace {
opacity: .8;
}
code .token.property,code .token.tag,code .token.boolean,code .token.number {
color: #e5dc56;
}
code .token.selector,code .token.attr-name,code .token.string {
color: #88a9ad;
}
pre code .token.selector,pre code .token.attr-name {
color: #fafafa;
}
pre code .token.string {
color: #40ee46;
}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
color: #ccc;
}
code .token.operator {
color: #1887dd;
}
code .token.atrule,code .token.attr-value {
color: #009999;
}
pre code .token.atrule,pre code .token.attr-value {
color: #1baeb0;
}
code .token.keyword {
color: #e13200;
font-style: italic;
}
code .token.comment {
font-style: italic;
}
code .token.regex {
color: #ccc;
}
code .token.important {
font-weight: bold;
}
code .token.entity {
cursor: help;
}
pre mark {
background-color: #ea4f4e!important;
color: #fff!important;
padding: 2px;
border-radius: 2px;
}
code mark {
background-color: #ea4f4e!important;
color: #fff!important;
padding: 2px;
border-radius: 2px;
}
pre code mark {
background-color: #ea4f4e!important;
color: #fff!important;
padding: 2px;
border-radius: 2px;
}
.comments pre {
padding: 10px 10px 15px 10px;
background: #2c323c;
}
.comments pre::before {
content: 'Code';
font-size: 13px;
position: relative;
top: 0;
background-color: #f56954;
padding: 3px 10px;
left: 0;
right: 0;
color: #fff;
text-transform: uppercase;
display: inline-block;
margin: 0 0 10px 0;
font-weight: bold;
border-radius: 4px;
border: none;
}
.comments pre::after {
font-size: 11px;
}
.comments pre code {
color: #eee;
}
.comments pre.line-numbers {
padding-left: 10px;
}
pre.line-numbers {
position: relative;
padding-left: 3.0em;
counter-reset: linenumber;
}
pre.line-numbers > code {
position: relative;
}
.line-numbers .line-numbers-rows {
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.5em;
width: 3em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
padding: 0;
}
.line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
transition: 350ms;
}
pre[data-codetype='CSSku']:before {
background-color: #00a1d6;
}
pre[data-codetype='HTMLku']:before {
background-color: #3cc888;
}
pre[data-codetype='JavaScriptku']:before {
background-color: #75d6d0;
}
pre[data-codetype='JQueryku']:before {
background-color: #e5b460;
}
- Langkah selanjutnya, silahkan kalian cari kode </head> atau </body>
- Kemudian copy dan tempelkan kode dibawah ini tepat diatas kode </head> atau </body>
<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>
<script type='text/javascript'>
var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>
- Langkah selanjutnya, silahkan kalian coba buat artikel dan slahkan copy code dibawah ini pada bagian kotak HTML bukan pada bagian Compose
- Jika kalian akan memasukkan kode html, kalian pilih bagian kode html (baris no 1). Namun untuk kode html sebelum kalian memasukkan kode tersebut kedalam artikel, sebelumnya kalian harus Parse atau Escape kdoe tersebut.
- Jika kalian akan memasukkan kode css, kalian pilih bagian kode html (baris no 2)
- Jika kalian akan memasukkan kode Javascript, kalian pilih bagian kode html (baris no 3)
- Jika kalian akan memasukkan kode JQuery, kalian pilih bagian kode html (baris no 4)
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre> <pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre> <pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre> <pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>
- Jika sudah selesai, silahkan kalian publikasikan artikel tersebut dan lihat hasilnya
- Apabila penerapan kode tersebut berhasil maka kalian akan melihat tampilan seperti dibawah ini
- Selesai, dan semoga bermanfaat untuk kalian semuanya