Trik Komputer: Make Code Preview on Post Area pre & code

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/

Trik Komputer

Selasa, 09 April 2013

Make Code Preview on Post Area pre & code

Tidak ada komentar:

Posting Komentar