Langsung ke konten utama

Cara Membuat Prism Syntax Highlighter untuk Menampilkan Script Code di Blogger

Untuk kalian yang gemar membagikan tutorial di blogger pastinya kalian membutuhkan Syntax Highlighter ini, apalagi kalian yang menerapkan blog dengan niche programming. Pada tutorial kali ini saya akan memberikan tutorial tentang cara membuat prism syntax highlighter untuk menampilkan script code di blogger.

(Baca juga : Cara Membuat Syntax Highlighter Otomatis Tanpa Javascript di Blogger)

Syntax Highlighter ini sudah tidak saya pakai sekarang, tetapi syntax highlighter ini sangat cocok untuk membagikan tutorial-tutorial yang menggunakan coding.
Cara Membuat Prism Syntax Highlighter untuk Menampilkan Script Code di Blogger

Syntax Highlighter ini saya temukan di blog Arlina Design yang menerapkan niche tutorial blog dan sering membagikan template yang responsive. Kata admin blog Arlina Design, syntax highlighter ini adalah kombinasi antara syntax highlighter yang di buat blog Kang Ismet dan fitur penomoran yang di buat blog Kompi Ajaib.

Untuk lebih jelasnya ikuti langkah-langkah dari saya mengenai cara membuat prism syntax highlighter untuk menampilkan script code di blogger. Berikut adalah langkah-langkahnya.

(Baca juga : Cara Mudah Membuat Parse HTML Tools di Halaman Blog)

Cara Membuat Prism Syntax Highlighter untuk Menampilkan Script Code di Blogger

Cara Memasang Script Prism Syntax Highlighter di Blog

  • Langah pertama buka akun Blogger kalian.
  • Pilih Tema kemudian pilih Edit HTML, lalu masukan kode dibawah 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;
    }
  • Kemudian masukan script code berikut sebelum </head> atau </body>
    • <script src='https://arlina-design.googlecode.com/svn/prism.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(&quot;pre&quot;);
    for (var i = 0; i &lt; pres.length; i++) {
      pres[i].addEventListener(&quot;dblclick&quot;, function () {
        var selection = getSelection();
        var range = document.createRange();
        range.selectNodeContents(this);
        selection.removeAllRanges();
        selection.addRange(range);
      }, false);
    }
    </script>
  • Setelah itu pilih Simpan tema.

Cara Memasang Prism Syntax Highlighter di Artikel

  • Langkah pertama masuk ke artikel blog agan, pilih Entri baru atau klik edit di artikel yang sudah ada
  • Kemudian masuk ke tab HTML
    Memasang Prism Syntax Highlighter di Blogger
  • Masukan kode pembungkus di bawah ini
    • Untuk HTML
      • <pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... masukan kode HTML yang sudah di parse di sini ... </code></pre>
    • Untuk CSS
      • <pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... masukan kode CSS di sini ... </code></pre>
    • Untuk Javascript
      • <pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... masukan kode JavaScript yang sudah di parse di sini ... </code></pre>
    • Untuk JQuery
      • <pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... masukan kode jQuery yang sudah di parse di sini ... </code></pre>
  • Masukan script yang sudah di parse pada pertengahan scriptnya, silahkan parse script agan di sini
    Cara Memasang Prism Syntax Highlighter Di Blogger
  • Setelah selesai, pilih Perbarui atau Publikasikan.


Demikian tutorial singkat dari saya mengenai cara membuat prism syntax highlighter untuk menampilkan script code di blogger. Untuk tutorial yang lainnya dari saya, tetap selalu kunjungi tutorialumum.com.

Jika ada pertanyaan mengenai cara membuat prism syntax highlighter untuk menampilkan script code di blogger, silahkan masukan di kolom komentar. Saya juga menampung kritik dan saran dari kalian, karena itu sangat membantu saya dalam membangun sebuah blog.

Source :
http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html
http://www.kompiajaib.com/2014/11/menambahkan-penomoran-baris-pada-prism.html
http://www.arlinadzgn.com/2014/11/memasang-prism-syntax-highlighter-di-blogger.html

Postingan populer dari blog ini

4 Langkah Untuk Periklanan Gratis

Selalu ada beban keuangan yang signifikan terkait dengan mengiklankan produk, layanan, atau upaya seperti situs web. Omong-omong, saya selalu menjadi penggemar tren iklan gratis. Saya telah sukses dengan dua metode berbeda untuk memperoleh publisitas gratis yang ingin saya bagikan kepada Anda. Salah satu opsi adalah menempatkan iklan di situs web populer dan gratis. Saya telah menulis tentang beberapa situs teratas yang akan beriklan secara gratis. Mulailah dengan mengunjungi internetmarketinglearningcenter.com/classified-ads.html untuk menemukan platform periklanan gratis yang Anda inginkan. Cara kedua agar saya dapat memasang iklan tanpa mengeluarkan uang adalah dengan berinvestasi dalam Kursus Iklan Baris Gratis. Ini adalah kursus yang sangat singkat, dan saya harus membayar Clickbank $19,95 untuk mengakses alat promosi ini. Pergi ke tautan unduhan perangkat lunak gratis yang akan Anda gunakan untuk memposting dan memantau iklan Anda adalah sorotan dari Kursus Iklan Baris Gratis. Ku...
Baca Lebih Lanjut »

Cara Menambah Slot Widget Sidebar Template Evo Magz

Cara Menambah Slot Widget Sidebar Template Evo Magz - Widget adalah hal yang sangat penting dalam sebuah blog. Dengan sebuah widget, maka kelayakan dari blog tersebut untuk menjadi blog yang baik akan semakin terlihat. Banyak widget yang dapat di gunakan agar pengunjung dapat dengan mudah melihat halaman lain dari blog tersebut. Untuk itu menambah slot widget sangatlah di perlukan. (Baca juga : Cara Menghilangkan Garis Warna Warni Template Evo Magz ) Template Evo Magz buatan Mas Sugeng adalah template yang paling mudah untuk di kembangkan. Untuk itulah saya membuat tutorial cara menambah slot widget sidebar template evo magz . Tidak usah panjang lebar langsung saja ikuti langkah-langkah dari saya berikut ini. Cara Menambah Slot Widget Sidebar Template Evo Magz 1. Cara Menambah Slot Widget Sidebar Masuk ke akun blogger kalian Pilih menu Tata Letak , hapus semua widget yang ada di sidebar template evo magz Kemudian pilih menu Tema , pilih Edit HTML Cari skrip <b:section class='...
Baca Lebih Lanjut »