Home » Uncategories » Demo Prism Syntax Highlighter by WahyuPratama.com

Demo Prism Syntax Highlighter by WahyuPratama.com

Edit
Tutorial : Cara Memasang Prism Syntax Highlighter di Blog

HTML 

<html>
    <head>
      <meta charset="utf-8"/>
        <title>Wahyu Pratama</title>
        <link rel="stylesheet" href="style.css" />
        <style type="text/css">
        }
      </style>
    </head>
    <body>
      <header>
      <div class="intro" data-src="templates/header-main.html" data-type="text/html"></div>
      <section id="used-by">
      <h1>Wahyu Pratama</h1>

      <p>Informasi dan Tips Digital yang membahas Seputar Blogger, SEO dan Seputar dunia Internet lainnya dari Mas Wahyu Pratama.</p>

    <div class="go-to-my-blog">
      <p> Silahkan kunjungi <a href="http://wahyupratama.com" target="_blank">Wahyu Pratama</a></p>

    </div>
    </section>
    </header>
    </body>
</html>

CSS

body {
 font: 100%/1.5 Questrial, sans-serif;
 tab-size: 4;
 hyphens: auto;
}

a {
 color: inherit;
}

section h1 {
 font-size: 250%;
}

 section section h1 {
  font-size: 150%;
 }
 
 section h1 code {
  font-style: normal;
 }
 
 section h1 > a {
  text-decoration: none;
 }
 
 section h1 > a:before {
  content: '§';
  position: absolute;
  padding: 0 .2em;
  margin-left: -1em;
  border-radius: .2em;
  color: silver;
  text-shadow: 0 1px white;
 }
 
 section h1 > a:hover:before {
  color: black;
  background: #f1ad26;
 }

p {
 margin: 1em 0;
}

section h1,
h2 {
 margin: 1em 0 .3em;
}

dt {
 margin: 1em 0 0 0;
 font-size: 130%;
}

 dt:after {
  content: ':';
 }

dd {
 margin-left: 2em;
}

strong {
 font-weight: bold;
}

code, pre {
 font-family: Consolas, Monaco, 'Andale Mono', 'Lucida Console', monospace;
 hyphens: none;
}

pre {
 max-height: 30em;
 overflow: auto;
}

pre > code.highlight {
 outline: .4em solid red;
 outline-offset: .4em;
}

header,
body > section {
 display: block;
 max-width: 900px;
 margin: auto;
}

header, footer {
 position: relative;
 padding: 30px -webkit-calc(50% - 450px); /* Workaround for bug */
 padding: 30px calc(50% - 450px);
 color: white;
 text-shadow: 0 -1px 2px black;
 background: url(img/spectrum.png) fixed;
}

header:before,
footer:before {
 content: '';
 position: absolute;
 bottom: 0; left: 0; right: 0;
 height: 20px;
 background-size: 20px 40px;
 background-repeat: repeat-x;
 background-image: linear-gradient(45deg, transparent 34%, white 34%, white 66%, transparent 66%),
                   linear-gradient(135deg, transparent 34%, white 34%, white 66%, transparent 66%);
}

header {
 
}

 header .intro,
 html.simple header {
  overflow: hidden;
 }
 
 header h1 {
  float: left;
  margin-right: 30px;
  color: #7fab14;
  text-align: center;
  font-size: 140%;
  text-transform: uppercase;
  letter-spacing: .25em;
 }
 
 header h2 {
  margin-top: .5em;
  color: #f1ad26;
 }
 
  header h1 a {
   text-decoration: none;
  }

  header img {
   display: block;
   width: 150px;
   height: 128px;
   margin-bottom: .3em;
   border: 0;
  }
  
 header h2 {
  font-size: 300%;
 }
 
 header .intro p {
  margin: 0;
  font: 150%/1.4 Questrial, sans-serif;
  font-size: 150%;
 }
 
 #features {
  width: 66em;
  margin-top: 2em;
  font-size: 80%;
 }
 
  #features li {
   margin: 0 0 2em 0;
   list-style: none;
   display: inline-block;
   width: 27em;
   vertical-align: top;
  }
  
  #features li:nth-child(odd) {
   margin-right: 5em;
  }
  
   #features li:before {
    content: '✓';
    float: left;
    margin-left: -.8em;
    color: #7fab14;
    font-size: 400%;
    line-height: 1;
   }
  
    #features li strong {
     display: block;
     margin-bottom: .1em;
     font-size: 200%;
    } 
 
 header .download-button {
  float: right;
  margin: 0 0 .5em .5em;
 }
 
 #theme {
  position: relative;
  z-index: 1;
  float: right;
  margin-right: -1em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .2em;
 }
 
  #theme > p {
   position: absolute;
   left: 100%;
   transform: translateX(50%) rotate(90deg) ;
   transform-origin: top left;
   font-size: 130%;
  }
 
  #theme > label {
   position: relative;
   display: block;
   width: 7em;
   line-height: 1em;
   padding: 3em 0;
   border-radius: 50%;
   background: hsla(0,0%,100%,.5);
   cursor: pointer;
   font-size: 110%;
  }
  
  #theme > label:before {
   content: '';
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
   z-index: -1;
   border-radius: inherit;
   background: url(img/spectrum.png) fixed;
  }
    
  #theme > label:nth-of-type(n+2) {
   margin-top: -2.5em;
  }
  
  #theme > input:not(:checked) + label:hover {
   background: hsla(77, 80%, 60%, .5);
  }
  
  #theme > input {
   position: absolute;
   clip: rect(0,0,0,0);
  }
  
  #theme > input:checked + label {
   background: #7fab14;
  }

footer {
 margin-top: 2em;
 background-position: bottom;
 color: white;
 text-shadow: 0 -1px 2px black;
}

 footer:before {
  bottom: auto;
  top: 0;
  background-position: bottom;
 }

 footer p {
  font-size: 150%;
 }

 footer ul {
  column-count: 3;
 }

JavaScript

var cursor = null;
if (items && items.length > 0) {
    cursor = parseInt(items[items.length - 1].timestamp) + 1;
}
var bodyFromEntry = function (entry) {
        if (entry.gd$extendedProperty) {
            for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
                    return '' + entry.content.$t + '';
                }
            }
        }
        return entry.content.$t;
    }
var parse = function (data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
            for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
                var comment = {};
                // comment ID, parsed out of the original id format
                var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
                comment.id = id ? id[2] : null;
                comment.body = bodyFromEntry(entry);
                comment.timestamp = Date.parse(entry.published.$t) + '';
                if (entry.author && entry.author.constructor === Array) {
                    var auth = entry.author[0];
                    if (auth) {
                        comment.author = {
                            name: (auth.name ? auth.name.$t : undefined),
                            profileUrl: (auth.uri ? auth.uri.$t : undefined),
                            avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                        };
                    }
                }
                if (entry.link) {
                    if (entry.link[2]) {
                        comment.link = comment.permalink = entry.link[2].href;
                    }
                    if (entry.link[3]) {
                        var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                        if (pid && pid[1]) {
                            comment.parentId = pid[1];
                        }
                    }
                }
                comment.deleteclass = 'item-control blog-admin';
                if (entry.gd$extendedProperty) {
                    for (var k in entry.gd$extendedProperty) {
                        if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                            comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                        }
                    }
                }
                comments.push(comment);
            }
        }
        return comments;
    }
})();

Subscribe to receive free email updates:

0 Response to "Demo Prism Syntax Highlighter by WahyuPratama.com"

Posting Komentar

Langganan: Posting Komentar (Atom)