Share Pengalaman - Halo teman-teman semua sehat kah? Alhamdulillah pasti sehat semua. Pada perjumpaan kali ini Share Pengalaman akan membagikan sebuah tutorial cara membuat Syntax Highlighter otomatis tanpa harus menggunakan java script. Baca Juga: Cara Membuat Widget Sosial Media Berputar.
Sebelumnya buat teman-teman yang mungkin belum tau apa Syntax Highlighter itu disini saya akan menjelaskannya, jadi tanpa harus kalian membuka tab baru di browser kalian dan mencarinya.
Syntax Highlighter adalah sebuah sebuah kolom atau tempat yang kebiasaan di gunakan oleh para penulis blog or website yang di dalamnya akan menampilkan sebuah kode pemograman yang nantinya akan di copas oleh orang-orang. Syntax Highlighter Bukan cuma bisa menampilkan kode atau script saja, akan tetapi juga bisa menampilkan apa yang ingin kalian tampilkan yang pasti menampilkan text. Baca Juga: Cara Membuat Tombol Demo Dan Tombol Downloand Di Postingan Blog.
Sekarang bagimana? sudah jelaskah apa itu Syntax Highlighter dan kegunaanya, yang pastinya kalian sudah sangat paham karena saya tulis sangat jelas. Hehe
Nah, Pada judul di atas saya menulis Cara Membuat Syntax Highlighter Otomatis tanpa menggunakan java script. Pasti kalian yang sudah lam mengenalnya terkadang berpikir, memang bisa? ya tentu bisa, karena untuk memanggil Syntax Highlighter ini kita cukup menggunakan 2 script saja, maka itulah yang diebut dengan otomatis. Syntax Highlighter ini tidak menggunakan java script karena ia akan menampilkan satu warna saja, berbeda dengan Syntax Highlighter yang lain yang menggunakan banyak warna. Baca Juga : Cara Membuat Widget Translator Di Blog
Dan satu lagi yang harus kalian ketahui mengenai pemasangan Syntax Highlighter ini pada blog. Memasang Syntax Highlighter ini pada blog kalian, kalian tak perlu takut dengan pengaruhnya blog kalian seperti lambat loading karena Syntax Highlighter ini cuma menggunakan CSS saja.
Oe iya teman-teman sebelum menggunakan caranya lihat dulu hasilnya seperti di bawah ini. Baca Juga: Cara Membuat Judul Blog Berjalan Di Blog.
/* syntax highlighter Otomatis Tanpa Javascript */
pre {
.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}
Oke teman-teman jika memang sudah sangat jelas, dan mungkin teman-teman ingin menggunakannya kalian boleh simak caranya di bawah ini.
Cara Menampilkan Syntax Highlighter Otomatis Tanpa Java Java Script
- Pertama-tama silahkan kalian logi dulu ke akun blogger kalian
- Selanjutnya silahkan masuk ke menu edit htm dengan cara Menu > Tema > Edit Html
- Kemudian silahkan masukkan script CSS di bawah ini diatas kode </style> atau ]]></b:skin>.
Warning!!!
#1194f2 Kode warna garis pada samping Syntax Highlighter.#20201d Kode warna Background Syntax Highlighter.
#fff Kode warna tekt yang ditampilkan di dalam Syntax Highlighter.
- Jika sudah mengatur warna sesuai dengan keinginan, jangan lupa klik simpan templeat.
Cara Memasukkan Syntax Highlighter ke Dalam Postingan Blog.
- Pertama-tema silahkan menuju ke halaman postingan selanjutnya silahkan buat postingan baru atau juga bisa mengedit postingan yang lama, itu terserah kalian. (disini saya akan menulis postingan baru).
- Pada halaman penulis postingan silahkan pilih HTML bukan Compose.
- Silahkan letakkan Script di bawah ini pada tempat yang ingin kalian tampilkan.
- Selanjutnya ganti "Masukan kode yang sudah di parse di sini" dengan kode yang ingin kalian tampilkan.
- Jika sudah jangan di publiskan dulu silahkan lihat pratinjau dulu apakah sudah benar. Jika sudah silahkan publiskan.
Sampai disini sudah siap tahap pembuatan dan pemasangan Syntax Highlighter pada blog, semoga bermamfaat dan selamat menjalankan aktifitas masing-masing.
Posting Komentar
Posting Komentar