Mungkin sudah banyak artikel yang membahas cara menampilkan kode di area postingan. Salah satu trik yg memang banyak dipakai adalah dengan mengkreasikan tagging <pre> dan <code> Sebenarnya tergantung kreasi kita juga, tidak mesti terikat dengan aturan yg ada :d Contoh: writing a professional code in blog post area, Code blink-blink on post area use img, Code blink-blink on post area full CSS3 and many more...
Koben akan berbagi cara membuat tampilan kode biar terlihat full stylish b-) Tentunya dengan penulisan syntax sesuai aturan main menggunakanXXX dengan class css , html , javascript & jquery . Good luck :)
codepen.io/scottnix/pen/vKaCh
Happy coding \m/
Koben akan berbagi cara membuat tampilan kode biar terlihat full stylish b-) Tentunya dengan penulisan syntax sesuai aturan main menggunakan
<pre><code>
--- BLAH BLEH BLOH HERE ---
</code></pre>Contoh yang sudah diterapkan di blog ini yaitu sbb:<!DOCTYPE html>
<html>
<body>
<h1>Tutorial Blog for Stylish Blogger</h1>
<p>Beben Koben</p>
</body>
</html> pre {
position: relative;
margin: 0 0 1em;
white-space: pre;
word-wrap: normal;
border-left: 2px solid #6CE26C;
}
pre:before {
position: absolute;
top: 0;
right: 0;
color: #D54E21;
font-size: 1em;
font-size: 15px;
font-weight: bold;
padding: .13em .5em;
}
pre code {
color: #333;
display: block;
padding: 0 1em;
font-size: 1em;
line-height: 1.5;
background: #F8F8F8;
background-size: 100% 3em;
background-position: 0 1.5em;
background-origin: content-box;
background-image: linear-gradient(#FFFFFF 50%, transparent 50%);
background-image: -webkit-linear-gradient(#FFFFFF 50%, transparent 50%);
background-image: -o-linear-gradient(#FFFFFF 50%, transparent 50%);
}
.css :before {
content: "CSS";
}
.html :before {
content: "HTML";
}
.javascript :before {
content: "JavaScript";
}
.jquery :before {
content: "jQuery";
}
Variabel CSS berikut bisa sobat variasikan lagi dengan menambahkan atribut lain sesuai kebutuhanposition: relative;
margin: 0 0 1em;
white-space: pre;
word-wrap: normal;
border-left: 2px solid #6CE26C;
}
pre:before {
position: absolute;
top: 0;
right: 0;
color: #D54E21;
font-size: 1em;
font-size: 15px;
font-weight: bold;
padding: .13em .5em;
}
pre code {
color: #333;
display: block;
padding: 0 1em;
font-size: 1em;
line-height: 1.5;
background: #F8F8F8;
background-size: 100% 3em;
background-position: 0 1.5em;
background-origin: content-box;
background-image: linear-gradient(#FFFFFF 50%, transparent 50%);
background-image: -webkit-linear-gradient(#FFFFFF 50%, transparent 50%);
background-image: -o-linear-gradient(#FFFFFF 50%, transparent 50%);
}
content: "CSS";
}
.
content: "HTML";
}
.
content: "JavaScript";
}
.
content: "jQuery";
}
.css :before {
content: "CSS";
--- BLAH ---
}
.html :before {
content: "HTML";
--- BLAH ---
}
.javascript :before {
content: "JavaScript";
--- BLAH ---
}
.jquery :before {
content: "jQuery";
--- BLAH ---
} <pre class="XXX "><code>
--- ADD PHRASE CODED HERE ---
</code></pre>Isikan tulisan codepen.io/scottnix/pen/vKaCh
Happy coding \m/
Loading... |
4 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...