Cara Membuat Syntax Highlighter Otomatis di Blogger, Lengkap Dengan Gambar

Header Menu


Cara Membuat Syntax Highlighter Otomatis di Blogger, Lengkap Dengan Gambar

Adan Alviansyah
Friday, August 9, 2019
Penting untuk Menjadi Perhatian. Sebelum Anda Melanjutkan untuk Membaca Berita, Melihat atau Mengajukan Permohonan Kerja dari Informasi-Informasi Yang Kami Tulis di halaman ini, Harap diperhatikan Tanggal Expired Yang Tertulis di bagian Halaman Postingan atau di Halaman Sumber Kami, Agar Anda Tidak Keliru dalam Membuat Keputusan Untuk Sesuatu Yang Belum Jelas Anda Pahami. Sekali lagi Harap di Baca dengan Seksama Informasi Yang Ada di Halaman ini.

Blog / Website ini Menyajikan Berbagai Informasi Terbaru Baik Nasional Maupun Internasional Seperti: Berita Terkini, Politik, Daerah, Nasional, Viral, Kejadian Aneh dan Nyata, Lowongan Kerja Terbaru, Tips and Trick dan lain-lain. Kami Mencari Informasi dari Berbagai Sumber Terpercaya, Kemudian Kami Tulis Kembali di Blog / Website ini untuk Memperluas Jangkauan Informasi. Informasi Yang Kami Sajikan Sifatnya Hanya Sebatas Membantu Pencari Informasi dalam Menemukan Berbagai Informasi Penting Yang Ada di dunia Untuk Kebutuhan Mereka Yang Sifatnya Positif dan Mudah-Mudahan Bermanfaat. Jika Anda Ingin Terhubung Bersama Kami Silahkan Kunjungi Halaman Medsos Group Kami untuk Mengajukan Pertanyaan, Masukan, Gabung Group Loker Via Telegram Silahkan Klik Gabung Sekarang...

Cara Membuat Syntax Highlighter
Indoku - Syntax Highlighter, salah satu fitur khusus untuk para programmer yang akan memindahkan dan membagikan kode - kode rumit seperti jQuery, CSS, dan Javascript dengan tampilan yang rapih dan menarik.

Fitur Syntax Highlighter ini dapat mempermudah penulis atau programmer untuk membagikan kode script Html tersebut dengan tampilan teks yang berwarna dan posisi teks yang sama persis dengan yang terdapat pada sebuah kode pemrograman yang akan di bagikan kepada pembaca nya.

Selain untuk mempercantik tampilan potingan blog, dengan menggunakan Syntax Highlighter juga dimaksudkan agar pembaca dapat dengan mudah mengenal jenis kode yang disajikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya ialah, pengunjung blog kamu akan merasa nyaman membaca sajian konten blog, dan bagi pengelola blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorialnya

Nah, disini saya akan membagikan sedikit tutorial Cara Membuat Syntax Highloghter Otomastis di Blogger. Penasaran? Yuk, simak dalam tutorial berikut ini.

1. Buka akun Blogger kamu > Pilih Blog > Tema > Edit Html
Syntax Highlighter di Blogger
2. Copy kode di bawah ini, lalu pastekan sebelum kode </head>
<script src="https://cdn.jsdelivr.net/gh/Arlina-Design/frame@master/highlightpacks.js"/>
<script>hljs.initHighlightingOnLoad();</script>
3. Selanjut nya, Copy dan pastekan kode di bawah ini sebelum kode ]]></b:skin> atau </style>
Syntax Highlighter di Blogger

Note: Pilih salah satu Style CSS di bawah ini sesuai selera kamu
/* POJOAQUE STYLE */
pre code{display:block;padding:0.5em;color:#DCCF8F;background:url(https://sites.google.com/site/problogiz/home/pojoaque.jpg) repeat scroll left top #181914}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{color:#586e75;font-style:italic}
pre .keyword,pre .css .rule .keyword,pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .clojure .title,pre .nginx .title{color:#B64926}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#468966}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .built_in,pre .lisp .title,pre .clojure .built_in,pre .identifier,pre .id{color:#FFB03B}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#b58900}
pre .css .attribute{color:#b89859}
pre .css .number,pre .css .hexcolor{color:#DCCF8F}
pre .css .class{color:#d3a60c}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata{color:#cb4b16}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}
Atau
/* SOLARIZED DARK STYLE */
pre code{display:block;padding:0.5em;background:#002b36;color:#839496}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#586e75;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#859900}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#2aa198}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#b58900}
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{color:#cb4b16}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}
Atau
/* RAINBOW STYLE */
pre::-moz-selection{background:#FF5E99;color:#fff;text-shadow:none}
pre::selection{background:#FF5E99;color:#fff;text-shadow:none}
pre code{display:block;padding:0.5em;background:#474949;color:#D1D9E1}
pre .body,pre .collection{color:#D1D9E1}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{color:#969896;font-style:italic}
pre .keyword,pre .clojure .attribute,pre .winutils,pre .javascript .title,pre .addition,pre .css .tag{color:#cc99cc}
pre .number{color:#f99157}
pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#8abeb7}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .built_in,pre .lisp .title,pre .identifier{color:#b5bd68}
pre .class .keyword{color:#f2777a}
pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label,pre .id,pre .lisp .title,pre .clojure .title .built_in{color:#ffcc66}
pre .tag .title,pre .rules .property,pre .django .tag .keyword,pre .clojure .title .built_in{font-weight:bold}
pre .attribute,pre .clojure .title{color:#81a2be}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata{color:#f99157}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}
Atau
/* MONOKAI STYLE */
pre code{display:block;padding:0.5em;background:#272822}
pre .tag,pre .tag .title,pre .keyword,pre .literal,pre .change,pre .winutils,pre .flow,pre .lisp .title,pre .clojure .built_in,pre .nginx .title,pre .tex .special{color:#F92672}
pre code{color:#DDD}
pre code .constant{color:#66D9EF}
pre .class .title{color:white}
pre .attribute,pre .symbol,pre .symbol .string,pre .value,pre .regexp{color:#BF79DB}
pre .tag .value,pre .string,pre .subst,pre .title,pre .haskell .type,pre .preprocessor,pre .ruby .class .parent,pre .built_in,pre .sql .aggregate,pre .django .template_tag,pre .django .variable,pre .smalltalk .class,pre .javadoc,pre .django .filter .argument,pre .smalltalk .localvars,pre .smalltalk .array,pre .attr_selector,pre .pseudo,pre .addition,pre .stream,pre .envvar,pre .apache .tag,pre .apache .cbracket,pre .tex .command,pre .prompt{color:#A6E22E}
pre .comment,pre .java .annotation,pre .python .decorator,pre .template_comment,pre .pi,pre .doctype,pre .deletion,pre .shebang,pre .apache .sqbracket,pre .tex .formula{color:#75715E}
pre .keyword,pre .literal,pre .css .id,pre .phpdoc,pre .title,pre .haskell .type,pre .vbscript .built_in,pre .sql .aggregate,pre .rsl .built_in,pre .smalltalk .class,pre .diff .header,pre .chunk,pre .winutils,pre .bash .variable,pre .apache .tag,pre .tex .special,pre .request,pre .status{font-weight:bold}
pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}
4. Klik Simpan Tema


Cara Menggunakan Syntax Highlighter

Syntax Highlighter di Blogger
Untuk cara penulisan nya, kamu bisa menggunakan kode markup HTML di bawah ini pada postingan kamu.
<pre><code>
Isi Kode jQuery, Javascript atau Kode CSS atau Kode HTML di sini
</code></pre>
Source kode: Arlinadzgn