Memasang Prism Syntax Highlighter di Blogger - Bagi Anda yang sering membuatkan tutorial tentunya sudah tidak ajaib lagi dengan istilah Syntax Highlighter.
Syntax Highlighter ini pertama kali aku lihat di blog Kang Ismet tempatnya membuatkan tutorial seputar blogger dan sekarang aku telah menerapkan arahan tersebut sebagai fitur pendukung blog ini. Kemudian aku padukan dengan fitur penomoran yang didapat dari blog Kompi Ajaib.
Ok pribadi saja, silahkan buka Blogger > Template > Edit HTML > Kemudian salin dan terapkan arahan di bawah ini sebelum </style>
/* 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}Setelah itu simpan 3 arahan di bawah ini sempurna sebelum </body> atau </head>
<script src='https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/prisma.js' type='text/javascript'/><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></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/javascript'> 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>Simpan template.
Selanjutnya dikala Anda menciptakan post baru, terapkan arahan pemanggil di bawah ini pada postingan Tab HTML
<pre title="Memasang Prism Syntax Highlighter di Blogger" data-codetype ="HTMLku"><code class="language-markup"> ... arahan HTML (yang sudah di`escape`) di sini ... </code></pre> <pre title="Memasang Prism Syntax Highlighter di Blogger" data-codetype ="CSSku"><code class="language-css"> ... arahan CSS di sini ... </code></pre> <pre title="Memasang Prism Syntax Highlighter di Blogger" data-codetype ="JavaScriptku"><code class="language-javascript"> ... arahan JavaScript di sini ... </code></pre> <pre title="Memasang Prism Syntax Highlighter di Blogger" data-codetype ="JQueryku"><code class="language-javascript"> ... arahan jQuery di sini ... </code></pre>Source : https://tutoorbagus.blogspot.com//search?q=memasang-prism-syntax-highlighter-di-blogger
0 Response to "Memasang Prism Syntax Highlighter Di Blogger"
Post a Comment