ZDIRY-TUFWT-EBONM-EYJ00-IDBLANTER.COM
ZDIRY-TUFWT-EBONM-EYJ00

BLANTERWISDOM105

Cara Memasang Prism Syntax Highlighter Di Posting Blog

4/23/2020

Tutorial ini ditujukan untuk para blogger yang ingin membuat artikel yang berisi code programming di dalam sebuah postingan blogger. Mungkin di antara kalian pernah mencobanya beberapa kali namun hasilnya tidak sesuai yang diharapkan seperti tidak adanya pembeda antara warna setiap kata seperti nama class, id, title pada script yang anda sharing di postingan. Sudah anda kalian tahu bahwa Prism Syntax Highlighter telah sering di bagikan orang banyak blogger namun di antara kalian mungkin tidak mengetahui apa itu Prism Syntax Highlighter?

Prism Syntax Highlighter adalah script code berupa CSS, HTML, Javascript, JQuery yang ditampilkan dalam berbagai warna di title, class, id, dan lainnya sehingga code script dapat mudah dipahami oleh para pembaca artikel. Seperti gambar di bawah ini,

Prism Syntax Highlighter

Adapun cara memasangnya dalah sebagai berikut:

1.  Masuk ke Dashboard blogger yang anda miliki, pilih Template/Tema > Edit HTML

HTML Blogger

2.  Copy kode CSS di bawah ini tepat di atas ]]</b:skin> atau buat <style> </style> baru. untuk mempermudah gunakan pencarian dengan tekan tombol CTRL + F pada keyboard.

 /* 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 {
     font-family: Droid Arabic Naskh,sans-serif;
    content: 'AgungPanduan.Com';
    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: #ff3c41;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}

3.  Setelah itu copy script di bawah ini tepat diatas </body> atau bisa juga di bawah <head>.

<script src='https://cdn.rawgit.com/iHussam/ar1web/master/preline.js'></script>

3.  Jika sudah Save Template

Cara Penggunaannya Prism Syntax Highlighter

Buka Entry Post Baru - HTML, masukan kode di bawah ini sesuaikan dengan bahasa pemograman apa yang akan di post misalkan HTML maka gunakan script <pre title="HTML" data-codetype ="HTMLku"><code class="language-markup">.


<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
.cities {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 20px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;cities&quot;&gt;
  &lt;h2&gt;Tokyo&lt;/h2&gt;
  &lt;p&gt;Tokyo is the capital of Japan.&lt;/p&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css">---Kode Yang Sudah Di Parse---</code></pre>

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript">---Kode Yang Sudah Di Parse---</code></pre>

<pre title="jQuery" data-codetype ="JQueryku"><code class=" language-javascript">---Kode Yang Sudah Di Parse---</code></pre>
Share This :

0 Comments