Saturday, May 26, 2018

√ Cara Memasang Syntax Highlighter Menyerupai Arlina Design

Assalamuallaikum Warahmatullahi Wabarakatuh

Sekarang akan menunjukkan tips cara memasang script Syntax Highlighter ibarat arlina design
Berikut screenshootnya


Syntax Highlighter biasa di gunakan untuk menaruh isyarat ibarat isyarat CSS, JAVASCRIPT, JQUERY dan HTML dan biasa di gunakan di blog blog tutorial ibarat blog ini. Cuman aku pake yang sederhana saja.

Syntax Highlighter ini biasa di gunakan blog arlina design jadi sudah niscaya keren dan responsive

Bagi yang mau memasangnya silahkan ikuti tahapan berikut ini

CARA MEMASANG SYNTAX HIGHLIGHTER


Buka Blogger pilih Tema dan klik Edit HTML lalu Salin isyarat CSS dibawah ini sempurna di atas isyarat </style>

/* CSS Syntax Highlighter */ pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;} pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;} pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px} pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute} pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto} code .token.important {font-weight:bold;} code .token.entity {cursor:help;} pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;} pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before, pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}


Jika di rasa sudah benar penempatan kodenya silahkan simpan Tema

Untuk menggukannya di postingan silahkan gunakan isyarat di bawah ini di mode Html dan jangan lupa kodenya di parse dulu

<pre data-codetype="HTMLku" title="√ Cara Memasang Syntax Highlighter Seperti Arlina Design"><code class="language-markup">  isyarat yang sudah di parse di sini</code></pre> <pre data-codetype="CSSku" title="√ Cara Memasang Syntax Highlighter Seperti Arlina Design"><code class="language-markup">  isyarat yang sudah di parse di sini </code></pre> <pre data-codetype="JQueryku" title="√ Cara Memasang Syntax Highlighter Seperti Arlina Design"><code class="language-markup">  isyarat yang sudah di parse di sini </code></pre> <pre data-codetype="Javascriptku" title="√ Cara Memasang Syntax Highlighter Seperti Arlina Design"><code class="language-markup">  isyarat yang sudah di parse di sini </code></pre>

Semoga bermanfaat dan terima kasih sudah berkunjung
Sumber http://www.czrandy.com/