Pure Javascript Syntax Highlighter Demo
pre {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyURI6xHQo3NU-EGxGk-FtOTtnwCd2eh7VvNDckgkJOCmE2cgb7_kpUnyIovLHq9TzXLg_nHRa1IM_D5-LNGB_c3t1lGJTjSIfQDUxCuMe_SYj9iY6WRWXPDYcVH3XOQG66culVV_YsRSa/s1600/pre.png) repeat scroll 0 0 #FBF2F2;
color: #888;
display: block;
font: 12px/19px Consolas, 'Andale Mono', Courier, 'Courier New', monospace;
margin: 10px 0;
overflow: auto;
padding: 19px 19px 17px;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word
}
pre .comment {
color: #A57A4C
}
pre .variable.global,
pre .variable.class,
pre .variable.instance {
color: #DC3958
}
pre .constant.numeric,
pre .constant.language,
pre .constant.hex-color,
pre .keyword.unit {
color: #F79A32
}
pre .constant,
pre .entity,
pre .entity.class,
pre .support {
color: #F06431
}
pre .constant.symbol,
pre .string {
color: #889B4A
}
pre .entity.function,
pre .support.css-property,
pre .selector {
color: #8AB1B0
}
pre .keyword,
pre .storage {
color: #98676A
}
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//28.2bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//use.fontawesome.com' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//www.facebook.com' rel='dns-prefetch'/>
<link href='//plus.google.com' rel='dns-prefetch'/>
<link href='//twitter.com' rel='dns-prefetch'/>
<link href='//www.youtube.com' rel='dns-prefetch'/>
<link href='//feedburner.google.com' rel='dns-prefetch'/>
<link href='//www.pinterest.com' rel='dns-prefetch'/>
<link href='//www.linkedin.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>
<link href='//github.com' rel='dns-prefetch'/>
<link href='//player.vimeo.com' rel='dns-prefetch'/>
<link href='//platform.twitter.com' rel='dns-prefetch'/>
<link href='//apis.google.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='preconnect'/>
<link href='//www.googletagservices.com' rel='dns-prefetch'/>
<link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//syndication.twitter.com' rel='dns-prefetch'/>