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 scriptterlalu 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 redesignyang 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  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).

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 disini.

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: