featured-image-jelajah-open-source-prismjs-belajar-pemrograman

Jelajah Open Source: PrismJS

Mengenal PrismJS

PrismJS merupakan sebuah library open source syntax highligher. Syntax highlighter digunakan untuk men-style source code agar lebih mudah dan nyaman dibaca. Selain PrismJS, terdapat beberapa syntax highlighter lainnya seperti SyntaxHighlighter dan highlight.js. Syntax highlighter yang digunakan oleh BelajarPemrograman adalah PrismJS. Oleh karena itu, pada kesempatan ini kita akan membahas PrismJS.

Source Codehttps://github.com/PrismJS/prism/
Bahasa PemrogramanJavaScript
Pembuat AwalLea Verou
LisensiMIT

Struktur File/Folder Source Code PrismJS

Source code yang akan kita bahas berada di rilis v1.8.4. Struktur foldernya tidak berubah sejak versi 1.0.0. Perubahan yang ketara, pada versi 1.0.0 hanya terdapat 132 file languge definition di folder /components/ (termasuk file-file minified javascript). Sedangkan di versi 1.8.4, kini sudah ada 254 file. Selain itu, jumlah plugin-nya juga bertambah, dari 9 menjadi 25.

Source code ini juga menyertakan kode untuk website PrismJS. Berikut merupakan penjelasan tentang beberapa file/folder source code:

  • /components/ berisikan file-file .js untuk language definition. Language definition mendifinisikan setiap token pada bahasa pemrograman tertentu. Token-token tersebut diekspresikan dalam regular expression.
    • prism-abap.js merupakan file yang berisi language definition untuk bahasa pemrograman ABAP
    • prism-actionscript.js
    • prism-ada.js
  • /examples/ berisikan contoh-contoh kode untuk setiap bahasa pemrograman yang didukung.
    • prism-abap.html
    • prism-actionscript.html
    • prism-ada.html
  • /img/
  • /plugins/ berisikan source code untuk plugin-plugin guna memberikan fitur ekstra. Setiap plugin memiliki foldernya tersendiri.
    • autolinker/
    • autoloader/
    • command-line/
  • /templates/
  • /tests/ berisikan file-file test
  • /themes/ berisikan file-file .css tema PrismJS
    • prism-coy.css
    • prism-dark.css
    • prism-funky.css
  • /.gitignore mengatur file/direktori apa saja yang tidak ingin kita masukkan ke repositori git. Yang menarik di sini adalah, leaverou menggunakan nama file dengan pola hide-*.js untuk file-file tambahan yang tidak ingin dicommit ke repositori.
  • /.npmignore mengatur file/direktori apa saja yang tidak ingin kita masukkan ke package npm. PrismJS dapat ditemukan di repositori npm dengan nama prismjs.
  • /travis.yml merupakan file YAML untuk konfigurasi Travis CI. Travis CI digunakan untuk mengotomasi proses test dan build pada setiap commit.

Belajar regex (Regular Expression)

File-file language definition .js dalam folder components berisikan regular expression untuk mendefinisikan kumpulan token dari source code dalam bahasa pemrograman tertentu. Nah, di sini kita bisa belajar banyak tentang regex. Untuk membantu proses belajar, tool berikut dapat digunakan:

  • regular expression 101

    Di website ini, kita bisa memasukkan regular expression dan mendapatkan penjelasan tentangnya. Dijelaskan bagian per bagian secara detail. Kemudian, kita bisa mencoba memasukkan string untuk diuji apakah sesuai dengan regex. Kalau string cocok dengan regex, akan diberikan penjelasan tentang pencocokannya juga.

  • Regexper

    Dengan menggunaka Regexper, kita dapat memperoleh grafik yang rapi dan mudah dimengerti dari regex yang kita inputkan.

Langsung saja kita mulai. Coba kita lihat sebagian kode pada file language definition untuk CSS, components/prism-css.js:

Prism.languages.css = {
    'comment': /\/\*[\s\S]*?\*\//,
    'atrule': {
        pattern: /@[\w-]+?.*?(?:;|(?=\s*\{))/i,
        inside: {
            'rule': /@[\w-]+/
            // See rest below
        }
    },
    'url': /url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,
    'selector': /[^{}\s][^{};]*?(?=\s*\{)/,
    'string': {
        pattern: /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
        greedy: true
    },
    'property': /[\w-]+(?=\s*:)/i,
    'important': /\B!important\b/i,
    'function': /[-a-z0-9]+(?=\()/i,
    'punctuation': /[(){};:]/
};
Prism.languages.css['atrule'].inside.rest = Prism.util.clone(Prism.languages.css);

Kode di atas mendefinisikan token-token untuk language CSS.

  • comment, atrule, url, selector, string, property, important, function, dan punctuation merupakan nama token.
  • Setiap token memiliki definisi dalam regular expression. Definisi tersebut dapat dibuat dengan menggunakan cara singkat
    'namatoken': /regex/
    

    atau dengan cara panjang

    'namatoken': {
        pattern: /regex/
    }
    

    Dengan menggunakan cara panjang, objek yang mendefinisikan token dapat memiliki atribut-atribut tambahan seperti inside, greedy, dan lain-lain. Contohnya dapat dilihat pada definisi token string:

    'string': {
        pattern: /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
    greedy: true
    },
    
  • Komentar di CSS diekspresikan dengan format /* Sebuah komentar */, yaitu diawali dengan /* dan diakhiri dengan */. Token untuk komentar didefinisikan sebagai berikut:
    'comment': /\/\*[\s\S]*?\*\//
    

    Wow, itu regex bacanya gimana? Intinya, karakter apa saja (baik white space atau bukan) sebanyak apapun (boleh sepanjang 0, 1, 2, … karakter) yang diapit oleh /* dan */. regexper menghasilkan diagram cantik lagi mudah dimengerti berikut:

    Regex untuk token comment di CSS

Dengan menggunakan language definition, PrismJS dapat menentukan token-token pada source code. Selanjutnya, setiap token dapat memiliki style yang diatur oleh file CSS di tema PrismJS.

Penutup

Demikian merupakan awal dari perjalanan jelajah open source PrismJS. Jika teman-teman tertarik untuk melanjutkan perjalanan ini, semoga tulisan ini dapat membantu untuk memulai. PrismJS hanyalah salah satu dari milyaran repositori open source. Sistem operasi, ada yang open source. Text editor, ada yang open source. Photo editor, ada yang open source. 3D modelling software, ada yg open source. Browser, ada yang open source. Aplikasi chat, ada yang open source. Dan seterusnya. Itu semua bebas kita pelajari, gunakan, dan kembangkan sesuai dengan lisensinya. Wah, gak bakal kekurangan bahan belajar. Terus semangat ya…!

Muhammad Ikhsan

Senang belajar dan berbagi ilmu.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *