Ads

Cara Pasang Code Syntax Highlighter Di Blogger

mr ghonie - hay temen temen apa kabar nih semoga tetap baik baik saja yah.
pada kesempatan kali ini mrghonie.com akan membuat tutorial nih yaitu tentang Cara Membuat Syintax Highlighter di blogger, sebelum saya kasih tahu caranya. saya akn memberitahu fungsi Syntax Highlighter,
APA ITU SYNTAX HIGHLIGHTER DAN FUNGSINYA.
syintax highlighter merupakan suatu tempat atau wadah untuk menampilkan atau memuat suatu kode khusus seperti Kode HTML,CSS, JQUERY, JAVASCRIPT, PHP  pada postingan blog,supaya terlihat lebih rapi sehingga memudahkan pengunjung untuk pemasangan suatu code.
tanpa basa basi lagi langsung saya jelaskan ya.

CARA PASANG SYNTAX HIGHLIGHTER ( kotak yang memuat code)
CSS MODE
1. Masuk ke Blogger.com
2. Klik Tema
3. Edit HTML
4. Copy Code CSS Dibawah ini dan pastekan tepat diatas Kode ]]></b:skin> atau </style> gunakan ctrl+f untuk memudahkan pencarian kode
/* CSS Sintax Haighlighter */
pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#374760;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:'</>';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;}
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='HTML']:before{background-color:#3cc888;}
pre[data-codetype='CSS']:before{background-color:#00a1d6;}
pre[data-codetype='jQuery']:before{background-color:#e5b460;}
pre[data-codetype='Javascript']:before{background-color:#75d6d0;}
5. save.

sampai sini anda sudah melakukanya 50% lanjut kelangkah selanjutnya untuk memasang javascript.

HTML MODE
1. masuk blogger.com
2. klik tema
3. klik edit html
4. Copy Kode Js dibawah ini lalu pastekan tepat di atas kode </body> gunakan ctrl+f untuk mempermudah pencarian code
<script src='https://rawgit.com/hilmay619/pribadi/master/sintax.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>
5. Save
cara yang anda lakukan hampir selesai ikuti terus yah.

CARA MENGGUNAKAN SYINTAX HIGHLIGHTER DI POSTINGAN BLOG
1. masuk blogger.com
2. buat entry baru atau postingan baru
3. siapkan kode yang ingin dimasukkan ke syntax highlighter.
4. pastekan kode di Chompose, lanjut...
5. klik bagian HTML
6. copy salah 1 code dibawah ini sesuai code yang ingin anda pasangkan.
<pre data-codetype="HTML" title="HTML"><code class="language-markup">...KETIK CODE HTML DISINI .... </code></pre>

<pre data-codetype="CSS" title="CSS"><code class="language-css">...KETIK CODE CSS DISINI ....</code></pre>

<pre data-codetype="Javascript" title="Javascript"><code class="language-javascript">...KETIK CODE Javascript DISINI ....</code></pre>

<pre data-codetype="jQuery" title="jQuery"><code class="language-javascript">...KETIK CODE jQuery DISINI ....</code></pre>
masih di bagian HTML.

7. pastekan sebelum dan sesudah code yang tadi anda pastekan di chompos.
yang kamu pastekan di chompos kan kelihatan tuh kodenya di bagian html. nhah taruh kode diatas sebelum dan sesudah kode milikmu.
lebih jelasnya baca kesimpulan dibawah ini.

KESIMPULAN PEMASANGAN.
misal pasang javascript maka siapkan kode lalu pastekan javascript di chompos lalu masuk ke bagian HTML. kenapa begitu, sebab dengan anda mempastekan kode di chompos ketika dilihat di bagian html akan secara otomatis terparse.
lalu tambahkan kode <pre data-codetype="Javascript" title="Javascript"><code class="language-javascript"> sebelum kode Js lalu tambahkan kode ini setelah Js anda buat penutupan </code></pre>

Sekian artikel tentang Cara Membuat Code Syntax Highlighter Di Blog jika anda mengalami kesulitan terkait artikel bisa kalian berkomentar dikolom komentar yang sudah kami sediakan. bisa kita shering. dan bagi kalian yang berhasil silahkan tinggalkan komentar supaya membantu orang lain yang mampir ke mrghonie.com anda bisa request postingan melalui
email mr.ghonie@gmail.com
we a 089601708666

Sumber : http://maycyber-download.blogspot.com/2016/12/cara-membuat-syntax-highlighter.html
Berlangganan update artikel terbaru via email:




Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar

Situs web ini menggunakan cookie untuk memastikan Anda mendapatkan pengalaman terbaik di situs web kami. informasi lebih lanjut