Cara Membuat Syntax Highlighter (Kotak Script) di Blogger - Xudhax Blog

Cara Membuat Syntax Highlight - Kali ini kita saya akan Share Cara Membuat Script/Syntax HighLighter Kotak Script Pada Blog yang berfungsi Sebagai Kolom kode dalam tutorial seperti yang digunakan pada website atau blog tutorial .

Memang sudah banyak situs atau blog yang membahas tentang cara memasang dan menggunakan syntax highlighter serta berbagi code dan cara memasang syntax highlighter pada blog dan website ( baik yang menggunakan javascript, jQuery, maupun markup HTML) seperti Prisma, GeSHi, Google Code Prettify, SyntaxHighlighter, SHJS – Syntax Highlighting in JavaScript, Ultraviolet dan yang lainya.

Sebelum kita membuatnya , kita kenali dulu pengertian apa itu Syntax Highlight

PENGERTIAN SYNTAX HIGHLIGHT

Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan SyntaxHighlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language).

Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.

Saya disini akan memberikan tutorial membuat syntax highlighter dengan 2 metode:

CARA MEMASANG SYNTAX HIGHLIGHTING PADA BLOG 

Cara Pertama:

Langkah 1: Buka webDISINI

Langkah 2: Tampilan Awal

Langkah 3: Setelah Itu Masukan Script dan atur bahasa program dan warna sesuai selera agan,setelahitu klik highlight

Langkah 4: Lihat Preview dulu, sampai cocok

Langkah 5: Kemudian copy script hasil highlight

Langkah 6: Lalu buka blogger → buat entri baru, pastekan script,sebelum itu ubah dulu dari Compose ke HTML

Langkah 7: Kemudian pastekan script tadi dibagian yang agan inginkan

Langkah 8: Klik Compose dan lihat hasilnya 

Langkah 9: Tadaaaa, selesai gan

Cara Kedua:

⭕Pertama-tama, Silahkan anda masuk ke akun blogger anda
⭕Lalu pilih dan klik menu Tema, klik Edit HTML
⭕Kemudian masukan script di bawah ini teoat di atas code </style> atau ]]></b:skin>

/* syntax highlighter Otomatis Tanpa Javascript */ pre { padding: .8em 1em; margin: 0.5em 0; background-color: #20201d; border-left: 4px solid #1194f2; font-size: 13px; color: #fff; font-family: Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace; line-height: 1.4em; position: relative; white-space: pre-wrap; word-wrap: break-word; overflow: auto; max-height: 200px; } code { font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace; font-size: 13px; color: #1194f2; } pre code { padding: 0!important; color: #fff; background: none!important; border: none!important; display: block; } pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic} pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E} pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800} pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2} pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F} pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold} pre .deletion{color:#dc322f} pre .tex .formula{background:#eee8d5}

⭕Keterangan:

• #1194f2 adalah kode warna biru muda garis di samping kiri syntax highlighter.
• #20201d adalah kode warna background dari syntax highlighter.
• #fff adalah kode warna putih text syntax highlighter. Silahkan ganti warna-warna tersebut sesuai keinginan agan.
• Setelah selesai klik Simpan tema.

Cara Merapkannya:

Sekarang untuk mulai menggunakan Syntax Highlighter maka anda harus membuat post baru pada postingan mode HTML dengan kode pemanggil CSS nya dibawah ini.
<pre><code> Masukan code yang sudah di parse di sini </pre> </code>
Yap itu tutorial Cara Membuat Script/Syntax HighLighter Kotak Script Pada Blog, Bila Berkenan atau kesulitan bisa comment,Monggo..., Selamat Mencoba 😃😃😃

Related Posts