Cara Memasang Syntax Highlighter Ibarat Arlina Design

Assalamuallaikum Warahmatullahi Wabarakatuh

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

Syntax Highlighter biasa di gunakan untuk menaruh instruksi ibarat instruksi CSS, JAVASCRIPT, JQUERY dan HTML dan biasa di gunakan di spider web log blog tutorial ibarat spider web log ini. Cuman saya pake yang sederhana saja.

Syntax Highlighter ini biasa di gunakan spider web log arlina blueprint jadi sudah pasti keren dan responsive

Bagi yang mau memasangnya silahkan ikuti tahapan berikut ini

CARA MEMASANG SYNTAX HIGHLIGHTER

Buka Blogger pilih Tema dan klik Edit HTML kemudian Salin instruksi CSS dibawah ini tepat di atas instruksi </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 grade {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 instruksi di bawah ini di trend Html dan jangan lupa kodenya di parse dulu

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

Semoga bermanfaat dan terima kasih sudah berkunjung

Share this post