Mengenal Markdown, senjata rahasia yang mengubah aturan permainan blogging

Dalam dunia Jamstack dan ekosistem SSG, Remark adalah game-changer, senjata rahasia yang dapat dimainkan untuk mengubah aturan permainan blogging, kita dapat melakukan berbagai manipulasi pada konten Markdown, bahkan untuk sesuatu yang sangat sederhana namun tidak pernah terpikirkan.

Remark.js

Remark adalah framework open-source dan ekosistem plugin dalam unified yang digunakan untuk memproses, menganalisis, dan mentransformasi konten Markdown dengan memanfaatkan Markdown Abstract Syntax Tree (MAST). Remark bekerja di tingkat paling mentah dari konten Markdown, yaitu sebelum konten tersebut diubah jadi format semantik seperti HTML.

Kelebihan

Beberapa kelebihan remark yaitu:

• Berbasis AST (mdast), memungkinkan manipulasi Markdown yang sangat presisi
• Mudah dikombinasikan dengan remark-gfm, remark-frontmatter atau membuat plugin sendiri sesuai kebutuhan

  Catatan: Jangan ikut ketik tanda backtick   di awal dan akhir kode/perintah, itu hanya penanda blok kode untuk memudahkan penulisan.

• Digunakan luas di dokumentasi, blog statis, MDX, dan SSG (Astro, Next, dll)
• Stabil untuk proyek jangka panjang
• Cocok untuk otomasi konten

Kekurangan

Selain itu, Remark juga memiliki kekurangan yang sebagian besar bersifat teknikal, diantaranya:

• Tidak ramah pemula, harus mengerti cara kerja AST, node type mdast dan traversal tree
• Overkill untuk kebutuhan ringan, library seperti marked atau markdown-it lebih praktis untuk parsing atau render Markdown sederhana
• Dokumentasi sangat teknis, tidak banyak contoh praktis
• Sebagian besar plugin di buat sebagai private project

Contoh kode

Berikut ini adalah potongan kode dari plugin underline yang Anda lihat di beberapa kata di artikel ini.

/**
 * Plugin Remark untuk mengubah sintaks kustom `,,,teks,,,` menjadi teks bergaris bawah,
 * 
 * HASIL HTML:
 *   Ini adalah teks <u>yang digarisbawahi</u>.
 *   Ini adalah teks <u><strong>tebal dan digarisbawahi</strong></u>.
 *   Ini adalah teks <u><em>miring dan digarisbawahi</em></u>.
 */
{
  {
    // Kunjungi setiap node paragraf
    visit(tree, 'paragraph', (paragraphNode) => {
      // Iterasi melalui setiap anak (teks, tebal, miring, dll.) dari paragraf
      for (const child of paragraphNode.children) {
        // Jika node bukan teks atau tidak mengandung penanda,,, kita proses seperti biasa
        if (child.type !== 'text' || !child.value.includes(',,,')) {
          if (isUnderlining) {
            // Jika sedang dalam mode garis bawah, kumpulkan node ini
            underlineNodes.push(child);
          } else {
            // Jika tidak, langsung tambahkan ke hasil akhir
            newChildren.push(child);
          }
          continue; // Lanjut ke node berikutnya
        }
    });
  };
}

Contoh kasus

Di MauCariApa.com, kami sangat intensif menggunakan berbagai plugin Remark pada platform menulis kami, Newline. Plugin yang kami gunakan sebagian besar adalah buatan sendiri dan bersifat private project (beberapa sudah di buka untuk umum).

Elemen-elemen yang Anda lihat di situs ini, sebagian besar dihasilkan oleh Remark, seperti kartu info berikut.

Kartu DWYOR untuk artikel tutorial

Kartu info

Kartu danger

Dan inilah hasil semantiknya dalam format HTML.

<div class="bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 p-4 my-6 rounded-lg animated-rounded-border" style="--border-color: #60a5fa;" role="alert">
<p class="font-semibold mb-2 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="h-5 w-5 inline-block mr-2" fill="currentColor"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg> INFO</p><div class="alert-content">
<p>Ini adalah kartu info, ada beberapa lagi kartu yaitu tips, warning danger, dwyor (untuk artikel tutorial berisiko sedang-tinggi, misalnya UBL ponsel)</p>
</div></div>

Kita dapat melihat hasil akhirnya, sebuah kartu info yang bersih, menarik dan informatif. Ini akan meningkatkan UX sekaligus mempercantik UI, tidak ada satu komponen pun yang dikorbankan. Blok kode diatas juga dibuat dengan Remark, meskipun ada banyak library code highlight dan block editor seperti highlight.js.

Selain kartu-kartu tersebut, kami menggunakan plugin khusus untuk membuat fitur yang setara dengan tag <abbr> di HTML. Karena menulis tag <abbr> secara langsung di Markdown akan mengotori kebersihan konten, menyulitkan penulis dan tidak bagus untuk UI/UX, kami mengembangkan plugin yang menangani masalah tersebut, sehingga menghasilkan kode yang bersih dan fungsional.

Untuk meningkatkan aksesibilitas, terutama pada artikel tutorial yang teknis dan spesifik, penggunaan ikon seperti untuk menjelaskan tombol Win (yang kadang hanya ditampilkan sebagai ikon di keyboard), juga sangat berguna untuk menulis tutorial yang spesifik di macOS, tombol seperti untuk Launchpad, untuk tombol Command atau untuk tombol Option sangat penting untuk mempermudah pembaca mencari tombol yang perlu mereka tekan.

Jadi sangat jelas, bahwa tujuan utama dari penggunaan plugin Remark (yang intensif) adalah untuk kepuasan pembaca, mempermudah pekerjaan mereka ketika membaca artikel-artikel yang berkualitas dan mudah dipahami. Meskipun untuk mencapai hasil tersebut, diperlukan ratusan jam trial & error, kadang rusaknya pohon AST karena Remark salah menambil node yang berakibat pada cacatnya konten, tidak terbaca atau memotong kata yang tidak sesuai. Tapi semua ini terbayar dengan semakin meningkatnya konversi penjelajah SERP menjadi pembaca setia.

Epilog

Meskipun sangat sulit dalam proses pembuatannya, tetapi ketika melihat hasilnya, kita akan mengetahui bagaimana itu akan membantu pembaca sekaligus menunjukkan superioritas platform menulis kita. Karena sangat sedikit, dan bahkan hanya di lingkungan enterprise yang menggunakan manipulasi Remark secara intensif, karena pembuatan dan perawatan kodenya tidak main-main. Memang, ada beberapa blog pribadi yang menggunakan Remark, tapi hanya dalam jumlah kecil.