Pada kesempatan kali ini aku akan membahas tutorial tentang cara menciptakan syntax highlighter berwarna di blog .
syntax highlighter ini seolah-olah dengan blockquote namun tampilan syntax highlighter ini terlihat lebih rapih dan lezat dipandang. syntax highlighter ini banyak dipakai oleh para blogger untuk membungkus suatu arahan atau script merekea mulai dari arahan CSS, HTML , Java Script, PHP , JQUERY. dan arahan lainnya.
Cara menciptakan syntax highlighter berwarna ini tidaklah sulit , untuk tutorialnya eksklusif saja , cekidot.
Cara Membuat Syntax Highlighter Berwarna
1. Buka Blogger , Klik Tema , Edit Html.
2. Letakan CSS berikut sempurna diatas kode ]]></b:skin> atau diatas arahan </style>
/* 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='HTMLku']:before{background-color:#3cc888;} pre[data-codetype='CSSku']:before{background-color:#00a1d6;} pre[data-codetype='JQueryku']:before{background-color:#e5b460;} pre[data-codetype='JavaScriptku']:before{background-color:#75d6d0;} pre[data-codetype='PHPku']:before{background-color:#75d6d0;} pre::after{content:" DOUBLE CLICK TO SELECTION ";padding:0;width:auto;height:auto;position:absolute;right:18px;top:10px;font-size:12px;color:#fff;border:1px solid #fff;border-radius:4px;line-height:20px;overflow:hidden;-webkit-backface-visibility:hidden;transition:all 0.3s ease;}} 3. Setelah itu letakan Jquery dibawah ini sempurna diatas arahan </body>
<script src='https://rawgit.com/hilmay619/pribadi/master/sintax.js' type='text/j4vascript'/> <script> $('pre').attr('class', 'line-numbers'); Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span/>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)}) </script> <script type='text/j4vascript'> var pres = document.getElementsByTagName("pre"); for (var i = 0; i < pres.length; i++) { pres[i].addEventListener("dblclick", function () { var selection = getSelection(); var range = document.createRange(); range.selectNodeContents(this); selection.removeAllRanges(); selection.addRange(range); }, false); } </script> <script type='text/j4vascript'> //<![CDATA[ //Pre Auto Selection Highlighter $('i[rel="pre"]').replaceWith(function() { return $('<pre><code>' + $(this).html() + '</code></pre>'); }); var pres = document.querySelectorAll('pre,kbd,blockquote'); for (var i = 0; i < pres.length; i++) { pres[i].addEventListener("dblclick", function () { var selection = getSelection(); var range = document.createRange(); range.selectNodeContents(this); selection.removeAllRanges(); selection.addRange(range); }, false); } //]]> </script> 5. Simpan Template
Untuk menggunakanya gunakan HTML dibawah ini didalam postingan mode HTML .
<pre data-codetype="HTMLku" title="√ Cara Membuat Syntax Highlighter Berwarna di Blog"><code class="language-markup"> ISI KODE </code></pre> <pre data-codetype="CSSku" title="√ Cara Membuat Syntax Highlighter Berwarna di Blog"><code class="language-css"> ISI KODE </code></pre> <pre data-codetype="JavaScriptku" title="√ Cara Membuat Syntax Highlighter Berwarna di Blog"><code class="language-j4vascript"> ISI KODE </code></pre> <pre data-codetype="JQueryku" title="√ Cara Membuat Syntax Highlighter Berwarna di Blog"><code class="language-j4vascript"> ISI KODE </code></pre> <pre data-codetype="PHPku" title="√ Cara Membuat Syntax Highlighter Berwarna di Blog"><code class="language-j4vascript"> ISI KODE </code></pre> Sebelum mempastekan arahan kedalam kotak syntax highlighter ada baiknya teman parse HTML terlebih dahulu memakai tool Parse HTML atau teman dapat mengunjungi HALAMAN INI .
Nah , begitulah Cara Membuat Syntax Highlighter Berwarna di Blog , biar tutorial kali ini bermanfaat , hingga berjumpa ditutorial alponse selanjutnya.
Sumber http://idalponse.blogspot.com
EmoticonEmoticon