Selamat Datang

Migrasi dari SyntaxHighlighter ke Pastacode

Migrasi dari SyntaxHighlighter ke Pastacode – Beberapa bulan belakangan ini website tutorial web design indonesia menggunakan dua buah plugin untuk syntax highlight atau untuk menulis kode program di dalam postingan. Itu artinya sangat memberatkan karena menggunakan script terlalu banyak dan mubazir sekali, namun karena terkendala waktu jadi kurang memperdulikan penggunaan dua plugin sekaligus tersebut. Akan tetapi karena ingin meningkatkan performa akhirnya hari ini meluangkan waktu untuk melakukan sedikit perubahan, ini bagian dari proses redesign yang rencananya akan dilakukan awal tahun nanti. Kami harus memilih satu diantara dua buah syntax highlight, dan akhirnya memilih Pastacode.

Dari awal berdirinya website ini kami hanya menggunakan satu plugin untuk menulis sintak, yaitu SyntaxHighlighter Evolved  buatan Alex Mills (Viper007Bond), hampir satu tahun lebih kami menggunakan plugin tersebut untuk menulis potongan kode HTML, CSS, Javascript, PHP, bahkan MySQL dan Java di tutorial-webdesign.com. Namun kendala yang muncul adalah agak rumit nya langkah jika kita ingin menulis potongan kode, dimana untuk menulis potongan kode kita harus merubah editor menjadi mode text, tidak bisa di mode visual, lalu menulis manual format nya.

pastacode

Akhirnya setelah hampir dua tahun TWD berjalan, kami memutuskan untuk menggunakan Pastacode juga selain SintaxHighlighter Evolved.  Awal nya karena kami melihat plugin jquery nya yaitu PrismJS, dimana plugin tersebut juga digunakan di website Dabbblet.com, dan ternyata digunakan juga oleh situs blog ternama lain seperti Smashing Magazine, CSS-Tricks, Alist Apart, WebPlatform.org dan TypePlate. Lalu kami cari plugin sintax highlighter berbasis PrismJS dan akhirnya menemukan Pastacode ini.

Dengan Pastacode kita hanya cukup melakukan klik pada icon (P) yang ada di editor visual, dan memilih bahasa pemograman, lalu paste kode program nya, maka akan terbentuk sendiri nanti nya. Cara penggunaan Pastacode lebih mudah dibanding SintaxHighlighter menurut kami.

Masalah & Kenadala

Namun masalah muncul yaitu hasil kode yang di generate dari Pastacode tidak sama dengan SyntaxHighlighter, contohnya adalah untuk menulis kode cssSyntaxHighlighter cukup berbeda.

cara-menulis-kode

sedangkan pastacode bentuk nya seperti ini dan ini di generate langsung oleh GUI nya, tidak perlu mengetik format sendiri di mode text di editor wordpress.

pastacode

Sangat lama dan merepotkan jika harus melakukan perubahan setiap artikel yang sudah ditulis dengan SyntaxHighlighter dari halaman wp-admin, karena akan memakan waktu, hampir seratusan postingan yang harus di edit (kurang kerjaan banget kalau harus edit satu persatu).

Baca Juga:

Akhirnya kami putuskan untuk merubah langsung dengan query mysql untuk me-replace kode yang dibuat dengan SyntaxHighlighter agar sesuai dengan format Pastacode.

Query nya bisa di download pada link dibawah ini, kode query tersebut terlihat cukup banyak karena yang dirubah cukup banyak yaitu kode HTML, CSS, JS, PHP, Java dan MySQL. Karena bahasa pemograman itulah yang banyak digunakan di TWD.

DOWNLOAD QUERY

Jadi yang tadinya hanya menggunakan SintaxHighlighter saja, lalu menggunakan SintaxHighlighter dan Pastacode secara bersamaan, dan sekarang hanya menggunakan satu saja yaitu Pastacode.

Jika anda mengalami problem serupa, dimana harus migrasi dari SintaxHighlighter ke Pastacode atau ke plugin lain yang formatnya berbeda, mungkin ada bisa menggunakan script tersebut untuk dieksekusi di PHPMyAdmin atau dimanapun yang bisa mengeksekusi script SQL, bisa di edit sesuai dengan kebutuhan/format sintax anda.

Sebenarnya ada plugin untuk find & replace kasus ini, tapi untuk kecepatan dan untuk memastikan sendiri bahwa kode yang digunakan benar, maka kami putuskan menggunakan script tersebut saja dan mengeksekusinya sendiri di PHPMyAdmin.

Semoga membantu.





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

2 thoughts on “Migrasi dari SyntaxHighlighter ke Pastacode

  1. […] kami jelaskan. Anda bisa membaca bagaimana cara kami menampilkan potongan kode program pada artikel Migrasi dari SyntaxHighlighter, disitu bisa anda ketahui plugin apa yang digunakan di website […]

  2. function syntaxhighlighter_to_pastacode($str) {
    return preg_replace('#\[(php|html|css|js)\]([\s\S]*?)\[\/\1\]#', '[pastacode lang="$1" message="" highlight="" provider="manual"]<pre><code>$2</code></pre>[/pastacode]', $str);
    }

    add_filter('blablablah', 'syntaxhighlighter_to_pastacode');

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development