Selasa, 09 April 2013

Make Code Preview on Post Area pre & code

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 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>
Disini gue masih memakai gambar untuk menampilkan tampilan strip, tetapi sekarang gue akan berbagi trik serupa full 100% pakai CSS doang :p
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 kebutuhan.css:before {
content: "CSS";
--- BLAH ---
}
.html:before {
content: "HTML";
--- BLAH ---
}
.javascript:before {
content: "JavaScript";
--- BLAH ---
}
.jquery:before {
content: "jQuery";
--- BLAH ---
}
MarkUp HTML<pre class="XXX"><code>
--- ADD PHRASE CODED HERE ---
</code></pre>
Isikan tulisan XXX dengan class css, html, javascript & jquery. Good luck :)
codepen.io/scottnix/pen/vKaCh
Happy coding \m/

Tidak ada komentar:

Posting Komentar