bikin pre berwarna dengan PRISM ~ Opic Blog

14 Jul 2013

PRISM membuat postingan script berwarna warni / Syntax Highlighter / PRE berwana. script in saya ambil dari DTE dan saya modif sedikit pada bagian border left nya dengan maksud untuk membedakan antara html, css, javascript dan java
pasang css di bawah ini di atas kode ]]></b:skin>

pre {
margin:.5em 0;
white-space:pre;
word-wrap:normal;
overflow:auto;
background-color:#1B2426;
text-shadow:none;
}
pre .language-markup {
border-left:5px solid #7C0505;
padding:.5em 1em;
}
pre .language-css {
border-left:5px solid #5DA028;
padding:.5em 1em;
}
pre .language-javascript {
border-left:5px solid yellow;
padding:.5em 1em;
}
pre .language-java {
border-left:5px solid purple;
padding:.5em 1em;
}
code {
font-family:Consolas,Monaco,&#39;Andale Mono&#39;,&#39;Courier New&#39;,Courier,Monospace;
line-height:16px;
color:#B43D3D;
background-color:#eee;
border:1px solid #ddd;
padding:1px 2px;
}
pre code {
display:block;
background:none;
border:none;
color:#B9BDB6;
direction:ltr;
text-align:left;
word-spacing:normal;
padding:0 0;
}
code .token.punctuation {
color:#83405A;
}
pre code .token.punctuation {
color:#B9BDB6;
}
code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
color:#435A4D;
}
code .namespace {
opacity:.8;
}
code .token.tag{
color:yellow;
}
code .token.property,
code .token.boolean,
code .token.number {
color:#5BA1CF;
}
code .token.selector,
code .token.attr-name,
code .token.string {
color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
color:#E0E8FF;
}
code .token.entity, code .token.url,
pre .language-css .token.string,
pre .style .token.string {
color:#E0E8FF;
}
code .token.operator {
color:#878A85;
}
code .token.atrule,
code .token.attr-value {
color:#48D30F;
}
pre code .token.atrule,
pre code .token.attr-value {
color:#48E638;
}
code .token.keyword {
color:#47A1CF;
font-style:italic;
}
code .token.comment {
font-style:italic;
}
code .token.regex {
color:#B43D3D;
}
code .token.important {
font-weight:bold;
}
code .token.entity {
cursor:help;
}

javascript di pasang diatas kode </body>

<script type="text/javascript" src='http://reader-download.googlecode.com/svn/trunk/prism.js'></script>

walaupun manual penggunaan nya pun sangat mudah, pada modus HTML sisipkan kode dibawah ini sesuai yang di perlukan, INGAT....!!! Modus HTML bukan ~~COMPOSE~~

<pre><code class="language-markup"> ... kode HTML di sini ... </code></pre>
<pre><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre><code class="language-java"> ... kode Java di sini ... </code></pre>

11 komentar

Unknown14 Juli 2013 pukul 20.54
PERTAMA, yeee akhirnya dibuatin makasih ya om opik
BalasHapus
Balasan
Unknown14 Juli 2013 pukul 21.41
kalau mau buat dikotak komentar fasilitas memasukan GAMBAR,VIDEO,CODE seperti itu gimana ya ? hehehe..maaf banyak nanya :D
BalasHapus
Balasan
Imron Fhatoni15 Juli 2013 pukul 06.17
mantap/.......

:-d :-d :-d
BalasHapus
Balasan
Unknown14 September 2013 pukul 20.41
Mas jika membuat scroll disampingnya gimana?
BalasHapus
Balasan
Taufik14 September 2013 pukul 22.15
pada tag
[code]pre .language-css {
border-left:5px solid #5DA028;
padding:.5em 1em;
}[/code]
silahkan tambahkan kode seperti di bawah ini
[code]height:250px;
overflow:auto;[/code]
sehingga kodenya akan seperti ini
[code]pre .language-css {
border-left:5px solid #5DA028;
padding:.5em 1em;
height:250px;
overflow:auto;
}[/code]

kenapa saya tambahkan kode hanya pada tag pre .language-css? karena menurut saya kode css lah yang sering panjang ke bawah sehingga saya beri nilai tingginya 250px, atur ketinggian sesuai yang sobat mau
BalasHapus
Balasan

Tambahkan komentar