bikin judul Syntax Highlighter PRISM ( pre )

18 Jul 2013

Postingan kali ini masih tetap membahas tentang Syntax Highlighter ( PRISM ) / PRE berwarna, tetapi saya perbaharui lagi sehingga pada masing masing markup mempunyai judul tersendiri
Di sini saya hanya menggunakan before dengan content tanpa rel yang di hasilkan dari masing masing markup

pre .language-markup {
border-left:5px solid #7C0505;
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;
}
pre .language-css {
border-left:5px solid orange;
padding:.5em 1em;
}
pre .language-css,
pre .language-markup,
pre .language-javascript,
pre .language-java {
background-color:#1B2426;
font:normal 13px/15px Electrolize, Arial, Sana-Serif;
color:#ccc;
padding:10px 15px;
margin:0px 0px 10px;
position:relative;
white-space:pre;
word-wrap:normal;
overflow:auto;
}
pre .language-css,
pre .language-markup,
pre .language-javascript,
pre .language-java {
padding-top:32px;
}
pre .language-css:before, 
pre .language-markup:before,
pre .language-javascript:before,
pre .language-java:before {
font:bold 20px Electrolize, Arial, Sana-Serif;
display:block;
color:white;
background-color:#444;
padding:0px 10px;
position:absolute;
top:0px;
right:0px;
left:0px;
}
pre .language-markup:before {content:"HTML";}
pre .language-javascript:before {content:"JAVASCRIPT";}
pre .language-java:before {content:"JAVA";}
pre .language-css:before {content:"CSS";}
code {
font-family:Consolas,Monaco,'Andale Mono','Courier New'
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;
}

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

penggunaan html nya pun masih tetap manual pada 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>

kolaborasi code:

1. DTE
2. CSS-Trick

variasi

Taufik 19.21