Cara Membuat Prism Syntax Highlighter Keren Di Blog

13:59:00
Cara Membuat Prism Syntax Highlighter Keren Di Blog


Selamat datang agan atau aganwati kali ini, Saya akan berbagi cara membuat syntax highlighter seperti Arliana Design di blog, untuk menerapkan di blog Anda silakan ikuti beberapa langkah berikut;



Langkah



1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu template,

3. Lalu pilih menu edit html,

4. Cari kode ]]></b:skin> dengan cara
Ctrl
+
F
,


5. Copy script di bawah ini,


 /*CSS Syntax Hightler */
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: &#39;Double click to selection&#39;;
    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,&#39;
    Andale Mono&#39;,&#39;Courier New&#39;,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: &#39;Code&#39;;
    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 &gt; 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 &gt; span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows &gt; span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype=&#39;CSS&#39;]:before {
    background-color: #00a1d6;
}

pre[data-codetype=&#39;HTML&#39;]:before {
    background-color: #3cc888;
}

pre[data-codetype=&#39;JavaScript&#39;]:before {
    background-color: #75d6d0;
}

pre[data-codetype=&#39;JQuery&#39;]:before {
    background-color: #e5b460;
} 




6. Paste script yang sudah dicopy tadi tepat di atas kode ]]></b:skin>,

7. Lalu cari kode </body> dengan cara
Ctrl
+
F
,


8. Copy script di bawah ini,


 <script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>
<script>
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)})
</script>

 <script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script> 


9. Lalu paste script yang sudah dicopy tepat di atas kode </body>,

8. Simpan.





Penerapan



1. Pada saat menerapkan pada posting pilih menu html,


Cara Membuat Prism Syntax Highlighter Keren Di Blog

2. Setelah itu tambahkan kode di bawah ini setiap akan memakai penerapan,


 <pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"><code class=" language-markup"> Taruh Script HTML Di Sini </code></pre> 


 <pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css"> Taruh Script CSS Di Sini </code></pre> 



 <pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"><code class=" language-javascript"> Taruh Script Java Script Di Sini </code></pre> 



 <pre class="line-numbers language-jquery" data-codetype="JQuery" title="JQuery"><code class=" language-jquery"> Taruh Script JQuery Di Sini </code></pre> 



3. Untuk menambahkan script pada syntax highlighter, kembalikan jenisnya menjadi compose,

Cara Membuat Prism Syntax Highlighter Keren Di Blog


4. Contoh pengisian syntax highlighter,

Cara Membuat Prism Syntax Highlighter Keren Di Blog


5. Kalimat "Taruh Script Di Sini" diganti dengan script yang akan Anda pasang,

6. Selesai.



Nah mungkin itu saja dari Saya semoga bermanfaat jangan lupa bagikan dan tinggalkan komentar, terima kasih.

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

12 Comments

irfan muda keumala 13 January 2015 at 08:42

sob! klw sperti punya sobat bagaimana sob?

Renaldy Ramadani 13 January 2015 at 14:02

itu adalah tutor syntax highlighter yang ane pake sob :D

irfan muda keumala 18 January 2015 at 08:15

Sob kok ane coba dan ikutin langkah" nya jadi nya seperti ini (blog lain) http://pengetahuansg.blogspot.com/2014/12/saya-oig-ioahgo-ahgg-gagha-aigrhairgh.html itu faktor template, atau scriptnya yang kurang sob!
*mohon petunjuknya sob! :2thumbup

Renaldy Ramadani 18 January 2015 at 09:56

Sebenarnya sudah berhasil gan, diblog agan, tetapi saya tidak tahu kok tidak muncul angka berurutan, coba agan ganti template yang lebih responsive, ex, droidpluss, subculture gitu gan :sup2

Aghtis Assiddiq 18 January 2015 at 10:28

tolong dong di modifikasi template blog yang kemarin

Renaldy Ramadani 18 January 2015 at 10:35

maaf, gan template ini miliknya mrhb404.blogspot.com silakan agan tanya dulu sama adminnya, saya dapet template ini karena saya minta gan,

Aghtis Assiddiq 16 February 2015 at 21:50

thx gan :2thumbup

Renaldy Ramadani 17 February 2015 at 15:00

:2thumbup wokeh gan

Aghtis Assiddiq 17 February 2015 at 17:23

gan tolong dong post social media seperti blog ini :request

Renaldy Ramadani 18 February 2015 at 17:26

:2thumbup segera saya buatkan, internet lagi nggak bersahabat gan, mohon ditungu :ngakak

Muhammad Thoriq 25 May 2015 at 08:21

mantap gan :2thumbup

Renaldy Ramadani 26 May 2015 at 11:30

yoi gan :2thumbup