Cara Mudah Membuat Syntax Highlighter di blog

adscblog

Syntax Highlighter merupakan dimana area tersebut menyimpan kode programan untuk blog,walaupun banyak tempat penyimpanan kode programan tersebut,tetapi kebanyakan blogger menyimpan kode programan di sebuah postingan nya pasti akan menggunakan Syntax highlighter karena selain mudah untuk menyimpan sebuah kode programan juga terlihat rapi dan menarik apabila menggunakan sytax highlighter tersebut,maka jangan heran para blogger yang blog nya tentang tutorial pasti akan menyimpan atau menggunakan syntax highlighter

Dengan Menggunakan syntax highlighter tersebut akan memudahkan para pengunjung untuk menentukan kode kode programan seperti HTML,JAVASCRIPT,CSS,JQUERY atau PHP,maka apabila anda menggunakan Syntax ini para pengunjung yang datang ke postingan anda akan mudah membedakan mana CSS mana Javascript atau juga yang lain nya

Dan bagi anda para blogger yang menyediakan atau yang berbagai tutorial atau juga berbagi kode programan tersebut kepada blogger lain nya,tentu nya anda juga harus mengetahui mana yang dinamakan CSS dan mana juga yang dinamakan Javascript,agar tidak salah ketika anda menempatkan Code Programan tersebut ke dalam Syntax highlighter tersebut

Menyimpan Code Programan seperti CSS,Javascript,jQuery di Syntax Highlighter

Untuk anda yang mencari Syntax Highlighter untuk menerapkan di blog nya,silahkan anda mencoba kode berikut karena selain mudah menerapkan nya anda juga mungkin akan tertarik dengan syntax highligh ini,dan untuk penerapan nya silahkan anda ikuti langkah-langkah nya di bawah ini

• Seperti biasa silahkan anda masuk ke blogger
• Setelah itu silahkan masuk ke bagian Theme/Template
• Kemudian klik Edit Html
• Terus langkah pertama yang harus anda perhatikan untuk penerapan nya adalah silahkan letakan kode CSS berikut

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: '</>'; 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; }

• Kemudian langkah selanjut nya letakan kode JQuery berikut sebelum kode </body>

 <script src='http://yourjavascript.com/11157944646/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>

• Langkah Selanjut nya Save Template

Agar Syntax Highlighter ini berpungsi di postingan sobat,maka langkah selanjut nya adalah ketika sobat membuat postingan gunakan kode berikut,namun jika sobat masih bingung ikuti langkah langkah berikut

1. Masuk ke Post klik New Post
2. Setelah itu ketika sobat menulis sesuatu biasa nya di bagian "Compose" Namun untuk menggunakan Syntax ini klik bagian "Html" yang berada di sebelah kanan Compose tersebut
3. Kemudian Letakan Kode berikut,dan pilih sesuai kode yang akan anda simpan di postingan

<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>

Nah itulah cara pembuatan Syntax Highlighter di postingan,semoga artikel ini bisa membantu sobat blogger,selamat mencoba dan salam blogger

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 20 Mei and have 0 komentar