Mengenal Syntax Highlighter

Syntax Highlighter merupakan sebuah fasilitas yang berfungsi untuk memberikan warna, font, atau tampilan lainnya dari sebuah kode agar bisa disisipkan pada sebuah tulisan di internet.

Pernahkan anda menuliskan sebuah kode dari bahasa pemrograman dalam sebuah website secara langsung? Misalkan anda langsung menuliskan kode HTML pada tulisan tersebut seperti tag <title> Judul tulisan </title>, lalu tulisan tersebut kemudian hilang saat dipublish. Itu karena kita memerlukan perantara agar dapat menyisipkan beberapa kode bahasa pemrograman, selain itu kita juga perlu mempertegas tulisan tersebut agar dapat dipahami sebagai sebuah kode dari bahasa tertentu, dan bukan tulisan biasa.

SyntaxHighlighter will help a developer/coder to post code snippets online with ease and have it look pretty. It’s 100% Java Script based and it doesn’t care what you have on your server.

Mengenal Pygments

Pygments merupakan tool generic syntax highlighter yang cocok digunakan untuk menuliskan kode pemrograman pada sebuah hosting, forum, WIKI, atau aplikasi lainnya yang butuh untuk dipercantik.

Fungsi Pygments

Bila kita hanya menggunakan Highlighter biasa mungkin akan tampak seperti: <?php echo "Seperti ini"; ?>
Dan bila kita memasang pygments, akan bisa kita ubah menjadi seperti:

<?php
	echo "Seperti ini";
?>

atau dengan menambahkan beberapa fasilitas lain seperti:

1 <?php
2 	echo "Seperti ini";
3 ?>

Bagaimana Cara Memasang Pygments?

Pada kasus kali ini, saya mencoba memasang pygments pada repository Gitlab.Com, tentu saja dengan memasukannya kedalam .gitlab-ci.yml.

Untuk mempermudah, kita bisa mengambil template .gitlab-ci.yml yang sudah ada di alamat Resmi Gitlab. Selanjutnya pilih pemrograman dari web yang digunakan, misalkan pada tulisan ini saya menggunakan Hugo dengan bahasa Go-nya. Maka, saya cukup menyalin .gitlab-ci.yml dari sini, salin semua isi dari file tersebut:

 1 image: alpine
 2 
 3 variables:
 4   HUGO_VERSION: '0.23'
 5   HUGO_SHA: 'c9cf515067f396807161466c9968f10e61f762f49d766215db37b01402ca7ca7'
 6 
 7 before_script:
 8   - apk update && apk add openssl ca-certificates
 9   - wget -O ${HUGO_VERSION}.tar.gz https://github.com/spf13/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_Linux-64bit.tar.gz
10   - echo "${HUGO_SHA}  ${HUGO_VERSION}.tar.gz" | sha256sum -c
11   - tar xf ${HUGO_VERSION}.tar.gz && mv hugo* /usr/bin/hugo
12   - hugo version
13 
14 test:
15   script:
16   - hugo
17       except:
18   - master
19 
20 pages:
21   script:
22   - hugo
23       artifacts:
24     paths:
25     - public
26     only:
27   - master
28     

Lalu apa yang harus ditambahkan?
Yang harus kita tambahkan adalah skrip yang akan menginstall pip dan juga pygments, sisipkan pada bagian before_script:, maka .gitlab-ci.yml kita akan berubah menjadi seperti berikut:

 1 image: alpine
 2 
 3 variables:
 4   HUGO_VERSION: '0.23'
 5   HUGO_SHA: 'c9cf515067f396807161466c9968f10e61f762f49d766215db37b01402ca7ca7'
 6 
 7 before_script:
 8   - apk update && apk add openssl ca-certificates py-pip
 9   - pip install Pygments
10   - wget -O ${HUGO_VERSION}.tar.gz https://github.com/spf13/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_Linux-64bit.tar.gz
11   - echo "${HUGO_SHA}  ${HUGO_VERSION}.tar.gz" | sha256sum -c
12   - tar xf ${HUGO_VERSION}.tar.gz && mv hugo* /usr/bin/hugo
13   - hugo version
14 
15 test:
16   script:
17   - hugo
18       except:
19   - master
20 
21 pages:
22   script:
23   - hugo
24       artifacts:
25     paths:
26     - public
27     only:
28   - master
29     

Bilah sudah ditambahkan, kita tinggal upload .gitlab-ci.yml ke repositori utama kita.