Garis Syntax Highlighter Pre Dan Code

By Unknown

Friday, July 20, 2012

Cara membuat garis strips pre dan code seperti tampilan syntax highlighter pada blogspot ini sangat mudah sekali diterapkan. Cukup sisipkan css pada baris style dan setiap penulisan pada html writing area dengan diawali kode <pre> dan diakhiri kode </pre> atau <code> isi </code> maka akan ditampilkan format tulisan yang berbeda pada halaman blogspot.

Gambar diatas ini diambil dari: http://www.office.am

pre,code{
font-family:Consolas,'Lucida Console','DejaVu Sans Mono',monospace;
font-size:100%;
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
margin-left:1em;
margin-right:1em;
padding-left:1em;
padding-right:1em;
border-radius:5px;
border:1px solid rgba(0,0,0,.3);
box-shadow:inset 0 0 5px #000;
-moz-box-shadow:inset 0 0 5px #000;
-webkit-box-shadow:inset 0 0 5px #000;
color:#444;
background-color:#f0f0f0;
background-image:linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
background-image:-moz-linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
background-image:-webkit-linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
background-size:50px 50px;line-height:25px;
}

Share :

Facebook Twitter Google+