Demo Prism Syntax Highlighter by WahyuPratama.com
Tutorial : Cara Memasang Prism Syntax Highlighter di Blog
HTML
CSS
JavaScript
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; } })();
0 Response to "Demo Prism Syntax Highlighter by WahyuPratama.com"
Posting Komentar