Live Generated HTML Documentation use jQuery

Ada satu pen yang unik dari codepen.io by Maxwell Antonucci bercerita mengenai HTML Documentation Generator codepen.io/max1128/pen/obvRQW Dia menampilkan demo dari dokumen HTML bootstrap, dengan otomatis maka kode dari demo tersebut bisa langsung terlihat tanpa kita harus menuliskannya lagi! Seperti yg kita ketahui bersama, salah satu keunggulan blogspot kita dapat menyisipkan demo-demo kecil secara live seputar syntax HTML di area postingan. Akan tetapi penulisan kode demo dan kode post harus di tulis secara terpisah :-s
Berikut contoh kecil:

Box Shadows

{
  width: 195px;
  height: 70px;
  display: block;
  font-size: 25px;
  margin: 5px auto;
  text-align: center;
  padding-top: 1.3em;
  border-radius: 15px
  -webkit-box-shadow: 0 0 15px 5px #5CA8FF;
  box-shadow: 0 0 15px 5px #5CA8FF;
}

Dengan menggunakan trick HTML-Documentation Generator, sobat bisa langsung menyuguhkan kode live demo tanpa harus menuliskannya lagi ;) Bagaimana caranya bisa terjadi seperti itu? Mari ikuti langkah-langkahnya...

Syarat harus sudah terpasang jQuery script pada template.//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.jsSimpan snippet jQuery berikut ( cobalah terlebih dahulu diletakan tepat di atas tag</body> ) Kalau gagal coba simpan sebelum tag </head>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
$('*[doc-info]').each(function(){
 $(this).wrap('<div class="doc-container"></div>');
 $(this).closest('.doc-container').wrap('<div class="doc-wrapper"></div>');
   $(this).removeAttr('doc-info');
 var container = $(this).closest('.doc-container'),
  wrapper = $(this).closest('.doc-wrapper');
 //create button after div
 $("<div class='doc-button'>< /> Click to Show - Hide Code</div>").insertAfter(container);
 //create pre wrapper after button
 var button = container.next('.doc-button')
 $("<pre></pre>").insertAfter(button);
 //hide the pre so can slidetoggle later
 $("pre").hide();
 button.one("click", function() {
   var cloned = $(this).prev('.doc-container').clone(),
     code = $(cloned).html().split("\n").filter(function(n) {
       return (n.replace(/\s+$/, '') != '');
     }),
     spacesOnLeft = code[0].match(/^ */)[0].length;
   for (var i = 0, len = code.length; i < len; i++) {
       var output = button.next('pre'),
           existing_text=output.text(),
           new_text=code[i].substring(spacesOnLeft);
       output.text(existing_text + new_text + '\n');
   }
 });
});
$(".doc-button").click(function() {
 $(this).next().slideToggle("fast", function() {});
});
});
//]]></script>

Bumbu CSS dasar, silahkan sobat hias-hias lagi sendiri ya :D

.doc-wrapper {
position: relative;
width: 100%;
height: 175px;
overflow: auto;
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.doc-wrapper .doc-button {
position: absolute;
top: 0;
left: 0;
padding: .25em;
background-color: #F5F5F5;
display: none;
}
.doc-wrapper:hover {
padding-top: 40px;
}
.doc-wrapper:hover .doc-button {
display: block;
cursor: pointer;
}
.doc-wrapper pre {
padding: 1em;
background-color: #ccc;
margin: 1em 0;
white-space: pre-wrap;
}

Cara pemakaian sobat tinggal tambahkan atribut doc-info ke dalam elemen HTML.
Contoh

<div doc-info>
<div style="-webkit-box-shadow: 0 0 15px 5px #5CA8FF;box-shadow: 0 0 15px 5px #5CA8FF;width:195px;height:70px;display:block;margin:5px auto;text-align:center;padding-top:1.3em;font-size:25px;border-radius:15px">Box Shadows</div>
</div>

<div doc-info style="-webkit-box-shadow: 0 0 15px 5px #5CA8FF;box-shadow: 0 0 15px 5px #5CA8FF;width:195px;height:70px;display:block;margin:5px auto;text-align:center;padding-top:1.3em;font-size:25px;border-radius:15px">Box Shadows</div>

Happy Generate \m/