Cara Memasang Prism Syntax Highlighter Di Blog - Sun Go Blog

Cara memasang atau menghasilkan Prism Syntax Highlighter di Blog

Prism Syntax Highlighter yakni suatu kolom yang sanggup diisi dengan banyak sekali macam isyarat yang berwarnai-warni sesuai dengan isyarat itu sendiri. Dulu aku dipusingkan untuk menghasilkan Prism Syntax Highlighter dengan banyak sekali cara , bukan alasannya yakni tidak tahu code atau scriptnya tetapi keyword yang aku pakai untuk menerima Prism. Dulu aku menggunakan keyword seperi Cara menghasilkan kolom untuk script di posting blog , Cara menghasilkan kotak untuk isyarat di posting blog dan cara menghasilkan bingkai untuk goresan pena script isyarat di posting blog. Haha... Semua yang tampil bukan menyerupai yang aku inginkan. Akhirnya setelah mengamati dan sering berkunjung ke blog Mbak Arlina , aku gres sanggup menghasilkan Prims Syntax Highlighter yang aku inginkan.

Ternyata untuk menghasilkan Prism Syntax Highlighter di posting blog itu tidak sesulit yang aku bayangkan. Karena cuma dengan beberapa langkah saja kita sudah mempunyai suatu kolom/kotak/bingkai Prism Syntax Highlighter terpampang indah di posting. Hehe...

Mari kita mulai untuk menghasilkan Prism Syntax Highlighter di blog mudah-mudahan kode-kode atau script yang ingin kita bagikan gampang untuk di copy atau indah dilihat.

1.  Masuk ke blogger kemudian masuk ke Perancangan dan arahkan ke Template dan klik Edit HTML. Setelah itu cari isyarat menyerupai berikut  dan terapkan isyarat CSS di bawah ini sebelum kode .

 /* CSS Prism Syntax Highlighter */pre {padding: 50px 10px 10px 10px;margin: .5em 0;white-space: pre;word-wrap: break-word;overflow: auto;background-color: #2c323c;position: relative;border-radius: 4px;max-height: 500px;}pre::before {font-size: 16px;content: attr(title);position: absolute;top: 0;background-color: #eee;padding: 10px;left: 0;right: 0;color: #fff;text-transform: uppercase;display: block;margin: 0 0 15px 0;font-weight: bold;}pre::after {content: 'Double click to selection';padding: 2px 10px;width: auto;height: auto;position: absolute;right: 8px;top: 8px;color: #fff;line-height: 20px;transition: all 0.3s ease-in-out;}pre:hover::after {opacity: 0;top: -8px;visibility: visible;}code {font-family: Consolas ,Monaco ,'Andale Mono' ,'Courier New' ,Courier ,Monospace;line-height: 16px;color: #88a9ad;background-color: transparent;padding: 1px 2px;font-size: 12px;}pre code {display: block;background: none;border: none;color: #e9e9e9;direction: ltr;text-align: left;word-spacing: normal;padding: 0 0;font-weight: bold;}code .token.punctuation {color: #ccc;}pre code .token.punctuation {color: #fafafa;}code .token.comment ,code .token.prolog ,code .token.doctype ,code .token.cdata {color: #777;}code .namespace {opacity: .8;}code .token.property ,code .token.tag ,code .token.boolean ,code .token.number {color: #e5dc56;}code .token.selector ,code .token.attr-name ,code .token.string {color: #88a9ad;}pre code .token.selector ,pre code .token.attr-name {color: #fafafa;}pre code .token.string {color: #40ee46;}code .token.entity ,code .token.url ,pre .language-css .token.string ,pre .style .token.string {color: #ccc;}code .token.operator {color: #1887dd;}code .token.atrule ,code .token.attr-value {color: #009999;}pre code .token.atrule ,pre code .token.attr-value {color: #1baeb0;}code .token.keyword {color: #e13200;font-style: italic;}code .token.comment {font-style: italic;}code .token.regex {color: #ccc;}code .token.important {font-weight: bold;}code .token.entity {cursor: help;}pre mark {background-color: #ea4f4e!important;color: #fff!important;padding: 2px;border-radius: 2px;}code mark {background-color: #ea4f4e!important;color: #fff!important;padding: 2px;border-radius: 2px;}pre code mark {background-color: #ea4f4e!important;color: #fff!important;padding: 2px;border-radius: 2px;}.comments pre {padding: 10px 10px 15px 10px;background: #2c323c;}.comments pre::before {content: 'Code';font-size: 13px;position: relative;top: 0;background-color: #f56954;padding: 3px 10px;left: 0;right: 0;color: #fff;text-transform: uppercase;display: inline-block;margin: 0 0 10px 0;font-weight: bold;border-radius: 4px;border: none;}.comments pre::after {font-size: 11px;}.comments pre code {color: #eee;}.comments pre.line-numbers {padding-left: 10px;}pre.line-numbers {position: relative;padding-left: 3.0em;counter-reset: linenumber;}pre.line-numbers > code {position: relative;}.line-numbers .line-numbers-rows {height: 100%;position: absolute;pointer-events: none;top: 0;font-size: 100%;left: -3.5em;width: 3em;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;padding: 0;}.line-numbers-rows > span {pointer-events: none;display: block;counter-increment: linenumber;}.line-numbers-rows > span:before {content: counter(linenumber);color: #999;display: block;padding-right: 0.8em;text-align: right;transition: 350ms;}pre[data-codetype='CSSku']:before {background-color: #00a1d6;}pre[data-codetype='HTMLku']:before {background-color: #3cc888;}pre[data-codetype='JavaScriptku']:before {background-color: #75d6d0;}pre[data-codetype='JQueryku']:before {background-color: #e5b460;}

2.  Setelah tamat menempatkan isyarat CSS di atas , kini saatnya menerapkan isyarat JavaScript dan JQuery. Copy dan paste tiga isyarat di bawah ini sebelum  atau 

Done! Sekarang Prism Syntax Highlighter sudah berhasil terpasang di blog kamu. Untuk menggunakan Prism Syntax Highlighter di Posting blog , silahkan terapkan isyarat berikut di dalam posting. Untuk menerapkan isyarat Prism di posting blog , seleksilah mode Compose dan paste salah satu dari isyarat di bawah ini. Misalnya kau ingin membagi isyarat HTML , maka seleksilah isyarat HTML , bila kau ingin membagi isyarat JavaScript di posting blog , maka seleksilah isyarat JavaScript.  Sesuaikan dengan isyarat apa yang ingin kau bagi di post blog.

 
 ... isyarat HTML (yang sudah di`escape`) di sini ... 

 ... isyarat CSS di sini ... 

 ... isyarat JavaScript di sini ... 

 ... isyarat jQuery di sini ... 

Jika kau mengalami kesusahan , silahkan berkomentar. Mana tahu aku sanggup bantu. Hehe... Terima kasih.

Source:  http://arlinadesign.blogspot.com/2014/11/memasang-prism-syntax-highlighter-di-blogger.html