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

Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger

Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger - Setelah sebelumnya saya membagikan tutorial cara membuat widget recent comments ringan di blog, kali ini saya akan membagikan widget yang sama tapi dalam bentuk yang berbeda. Apa bedanya ? Di dalam widget komentar terbaru ini sudah ada judul postingannya, jadi akan terlihat artikel apa yang terakhir di komen oleh pengunjung blog. Untuk masalah kecepatan, widget ini tidak akan menggangu kecepatan blog, jadi kalian tidak perlu khawatir untuk memasang widget ini. (Baca juga : Cara Membuat Widget Recent Comments Ringan di Blog ) Widget ini saya temukan di blog Kang Ghani yang sering membagikan berbagai tutorialnya. Bagi yang ingin tahu bagaimana cara memasangnya, ikuti langkah-langkah berikut ini. Cara Memasang Widget Komentar Terbaru Dengan Judul Postingan di Blogger Langkah pertama masuk ke akun blogger kalian Kemudian pilih menu Tata Letak , kemudian pilih lokasi widgetnya Pilih Tambahkan Gadget , kemudian pili...
Baca Lebih Lanjut »

Cara Membuat Button Responsive 13 Gaya dengan CSS

Button atau tombol adalah sebuah tampilan atau bentuk untuk mengaktifkan sebuah perintah yang di jalankan oleh admin atau penggunanya. Umumnya button atau tombol ini hanya berupa 1 atau 2 buah saja dalam bentuk terpisah-terpisah. Kali ini saya akan membagikan cara membuat button responsive 13 gaya dengan css . Button responsive ini tidak memakan loading sebuah website atau blog, karena button ini hanya menggunakan css saja. (Baca juga : Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS ) Ada beberapa pilihan untuk memilih button yang kita inginkan, diantaranya : 6 warna Biru Orange Merah Hijau Ungu Putih 4 ukuran XS (Extra Small) SM (Small) MD (Medium) LG (Large) 2 pengaturan Block Buttons Outline(Accessibility) Untuk tampilan 13 gaya buttonnya silahkan lihat di https://bttn.surge.sh/ . Tampilan Gaya Button Slant, Unite, Float Tampilan Gaya Button Pill, Material - flat, Material - circle Tampilan Gaya Button Fill, Gradient, Jelly Tampilan Gaya Button Stretch, Minimal, Bordered...
Baca Lebih Lanjut »

Cara Membuat Tombol Demo dan Download Ringan Responsive di Blogger

Tombol download dan demo sangat di butuhkan pada saat kita membagikan sesuatu di blog yang kita miliki. Apalagi untuk kalian yang memiliki blog seperti blog share template, software, film, musik, dan lain sebagainya. Untuk itu kali ini saya akan membagikan cara membuat tombol demo dan download ringan responsive di blogger . (Baca juga :  Cara Membuat Button Responsive 13 Gaya dengan CSS ) Kenapa saya bilang ringan, karena tombol ini hanya menggunakan css jadi tidak masalah karena tidak menggunakan javascript yang berlebihan. Cara konfigurasinya sangat mudah kalian tinggal memasukan link demo atau download kalian. Langsung saja saya akan memberikan cara membuat tombol demo dan download ringan responsive di blogger . (Baca juga :  Cara Membuat Button Dengan Animasi Bounce Effect ) Cara Membuat Tombol Demo dan Download Ringan Responsive di Blogger Langkah pertama masuk ke akun Blogger kalian. Pilih menu Tema , kemudian pilih Edit HTML . Cari script ]]></b:skin> atau ...
Baca Lebih Lanjut »

Update Template Tutor Magazine 3D Versi 1.0, Template Biru Paling Favorit

Update Template Tutor Magazine 3D Versi 1.0, Template Biru Paling Favorit Setelah sebelumnya saya membagikan template Hijau Magazine v1.0 , kali ini saya akan membagikan template versi terbaru dari Template Tutor Magazine , yaitu Template Tutor Magazine 3D v1.0 . (Baca juga : Download Template Premium Paling Laris 2017, Hijau Magazine V1.0 Template ) Mengapa 3D ? Karena saya sudah menyesuaikan beberapa CSS yang ada, agar tampilannya terlihat 3D atau terlihat seperti nyata. Di Template Tutor Magazine ini, saya juga sudah memperbarui beberapa bug yang ada di Template Tutor Magazine sebelumnya. Untuk keterangan beberapa bug dan update terbaru diantaranya adalah. Perbaikan Thumbnail Gambar menu Postingan Perbaikan Thumbnail Gambar menu Postingan  Perbaikan Primary menu dan Judul Blog  Perbaikan Primary menu dan Judul Blog   Update H2 Update H2  Popular Posts update style  Popular Posts update style  Perubahan Posisi & update beberapa fitur.  Perubahan ...
Baca Lebih Lanjut »