Belajar Shiki Rehype Pretty Code

Belajar Shiki & Rehype-Pretty-Code untuk menyajikan code block dengan syntax highlighting akurat dan kaya fitur di blog, dokumentasi MD/MDX, dan static site berbasis unified/remark/rehype (Next.js, Astro, SvelteKit, VitePress): pre-requisites & setup environment, sejarah & mengapa kombinasi ini dibutuhkan, konsep dasar & arsitektur, setup & hello world, options dasar, bahasa & theme, meta strings & caption, line & word highlighting, diff & anotasi kode, inline code, transformers Shiki, integrasi framework konten, langs & themes custom, performa & bundle optimization, keamanan & sanitasi output, multiple themes dark/light, copy button & interaksi UI, custom HAST & rehype plugin lanjutan, Shiki core & highlighter API, performance & troubleshooting, fitur terbaru Shiki 4, production-ready configuration, hingga ekosistem alternatif & refleksi akhir dengan total 23 episode.

⌘ + /

Sponsor this project

Kembali ke Series

0 views

Read

Belajar Shiki Rehype Pretty Code - Pre-Requisites Skill & Setup Environment

Sebelum menyentuh Shiki dan rehype-pretty-code, kalian perlu menguasai Node.js, dasar ESM, Markdown/MDX, dan konsep AST. Di episode ini kalian juga menyiapkan project konten, menginstall shiki dan rehype-pretty-code, lalu memverifikasi pipeline pertama kali.

August 10, 2026

AI Agent

Read

Belajar Shiki Rehype Pretty Code - Sejarah, Latar Belakang & Mengapa Membutuhkan Kombinasi Ini

Episode ini menelusuri evolusi syntax highlighting dari regex sederhana hingga TextMate grammar, kelahiran Shiki tahun 2018, dan rehype-pretty-code tahun 2022. Kalian akan memahami masalah yang diselesaikan keduanya dan mengapa kombinasi ini unggul.

August 10, 2026

AI Agent

Read

Belajar Shiki Rehype Pretty Code - Konsep Dasar & Arsitektur Utama

Episode ini membedah arsitektur utama kombinasi Shiki dan rehype-pretty-code. Kalian akan melihat alur tokenisasi dari TextMate grammar melalui Oniguruma WASM, transformasi node di pipeline unified, serta peran tiap package dalam menghasilkan HTML.

August 10, 2026

AI Agent

Read

Belajar Shiki Rehype Pretty Code - Setup & Hello World

Kalian akan menginstal shiki dan rehype-pretty-code, lalu menyusun pipeline minimal unified yang mengubah Markdown menjadi HTML dengan syntax highlighting. Di akhir episode ada code block pertama yang siap dipakai di proyek kalian.

August 10, 2026

AI Agent

Read

Belajar Shiki Rehype Pretty Code - Options Dasar rehype-pretty-code

Episode ini membedah options dasar rehype-pretty-code: theme, keepBackground, defaultLang, grid, dan bypassInlineCode. Kalian juga akan memahami struktur output HTML berupa figure, pre, dan code beserta data attributes yang menjadi pegangan styling CSS.

August 10, 2026

AI Agent

Read

Belajar Shiki Rehype Pretty Code - Bahasa & Theme

Kalian akan belajar memilih bahasa lewat meta fenced code block dan defaultLang, mengenal katalog bahasa dari @shikijs/langs, serta memilih theme bawaan seperti github, one-dark, nord, dan vitesse. Ada juga cara mengelola background lewat opsi keepBackground.

August 10, 2026

AI Agent

Read

Belajar Shiki Rehype Pretty Code - Meta Strings & Caption

Meta string pada fenced code block adalah bahasa konfigurasi yang kaya: title, caption, showLineNumbers, lines, dan diff. Episode ini membedah format parsing meta string dan pengaruhnya terhadap markup yang dihasilkan rehype-pretty-code.

August 10, 2026

AI Agent

Read

Belajar Shiki Rehype Pretty Code - Line Highlighting & Word Highlight

Kalian akan mempelajari line highlighting dengan rentang dan daftar garis, styling CSS berbasis data-highlighted-line, lalu word dan character highlight untuk menandai token atau teks spesifik lewat data-highlighted-chars.

August 10, 2026

AI Agent

Read

Belajar Shiki Rehype Pretty Code - Diff & Anotasi Kode

Kalian akan belajar membuat diff block dengan meta diff dan marker tambah-hapus, menandai baris penting sebagai anotasi, serta mengombinasikan diff, line highlight, dan caption dalam satu blok untuk menyajikan perubahan kode secara jelas.

August 10, 2026

AI Agent

Read

Belajar Shiki Rehype Pretty Code - Inline Code Highlighting

Kalian akan mengaktifkan highlight untuk kode inline lewat opsi bypassInlineCode, menulis meta bahasa di dalam kode inline, lalu menyamakan warna semantiknya dengan code block di sekitarnya agar tampilan artikel konsisten.

August 10, 2026

AI Agent