Belajar Shiki Rehype Pretty Code - Integrasi dengan Framework Konten

#Pendahuluan

Setelah memahami pipeline rehype-pretty-code, pertanyaannya tinggal satu: bagaimana memasangnya di framework yang kalian pakai? Kabar baiknya, karena hampir semua framework konten berbasis Markdown mendukung plugin rehype, pola integrasinya nyaris identik.

Episode 11 membahas integrasi di empat framework populer: Next.js dengan @next/mdx dan Velite, Astro, SvelteKit, serta VitePress. Fokusnya pada file konfigurasi yang berbeda di tiap framework, sementara inti pipeline-nya tetap sama. Setelah episode ini, kalian bisa pindah framework tanpa belajar ulang.

#Integrasi di Next.js

#Menggunakan @next/mdx

Pasang package yang dibutuhkan lalu daftarkan plugin rehype di next.config.mjs:

npm i @next/mdx @mdx-js/loader @mdx-js/react rehype-pretty-code

Kemudian atur konfigurasi Next.js agar file .mdx diproses lewat MDX:

next.config.mjs

import withMDX from "@next/mdx";
import rehypePrettyCode from "rehype-pretty-code";
 
const nextConfig = withMDX({
  extension: /\.mdx?$/,
  options: {
    rehypePlugins: [[rehypePrettyCode, { theme: "github-dark-default" }]],
  },
});
 
export default nextConfig;

Karena Next.js membangun halaman secara statis saat build, seluruh token di-highlight pada waktu build. Kalian bisa memakai App Router maupun Pages Router; hasilnya tetap HTML statis tanpa JavaScript tambahan.

#Menggunakan Velite

Jika proyek kalian memakai Velite untuk mengelola konten, tambahkan rehypePrettyCode ke daftar plugin di velite.config.ts. Velite meneruskan options plugin rehype melalui pipeline kontennya sehingga semua post dan series memakai konfigurasi yang sama. Ini pola yang dipakai blog kalian saat ini.

#Integrasi di Astro

#markdown.rehypePlugins

Astro menyediakan opsi markdown di astro.config.mjs:

astro.config.mjs

import { defineConfig } from "astro/config";
import rehypePrettyCode from "rehype-pretty-code";
 
export default defineConfig({
  markdown: {
    rehypePlugins: [
      [rehypePrettyCode, { theme: "github-dark-default" }],
    ],
  },
});

Astro menerapkan plugin ini ke file Markdown dan MDX sekaligus. Karena Astro bersifat static-first, highlight bekerja sepenuhnya di build-time dan hasilnya bisa disajikan ke CDN tanpa JavaScript.

#Integrasi di SvelteKit dan VitePress

#SvelteKit dengan mdsvex

SvelteKit tidak mengolah Markdown secara bawaan, sehingga perlu mdsvex sebagai preprocessor:

npm i mdsvex rehype-pretty-code

svelte.config.js

import { mdsvex } from "mdsvex";
import rehypePrettyCode from "rehype-pretty-code";
 
export default {
  extensions: [".svelte", ".md"],
  preprocess: mdsvex({
    rehypePlugins: [
      [rehypePrettyCode, { theme: "github-dark-default" }],
    ],
  }),
};

Dengan mdsvex, file .md dirawat sebagai komponen Svelte dan pipeline rehype dijalankan sebelum render. Perhatikan bahwa mdsvex menjalankan plugin di build-time, sehingga konten tetap statis.

#VitePress

VitePress juga memakai plugin rehype lewat opsi markdown:

.vitepress/config.ts

import { defineConfig } from "vitepress";
import rehypePrettyCode from "rehype-pretty-code";
 
export default defineConfig({
  markdown: {
    rehypePlugins: [
      [rehypePrettyCode, { theme: "github-dark-default" }],
    ],
  },
});

VitePress cocok untuk dokumentasi karena meta string seperti title dan diff langsung menghasilkan figure yang rapi. Semua framework di episode ini memakai pola [rehypePrettyCode, options], sehingga kalian cukup membaca dokumentasi masing-masing untuk lokasi opsi rehypePlugins.

#Kesimpulan Integrasi

#Pola yang Sama di Semua Framework

Dari keempat contoh, intinya identik: daftarkan rehypePrettyCode sebagai plugin rehype dengan bentuk [rehypePrettyCode, options]. Perbedaan hanya pada file konfigurasi dan cara framework menerima plugin:

• Next.js: opsi rehypePlugins di @next/mdx atau pipeline Velite.
• Astro: opsi markdown.rehypePlugins.
• SvelteKit: opsi rehypePlugins pada mdsvex.
• VitePress: opsi markdown.rehypePlugins.

Memahami pola ini membuat kalian bisa membaca dokumentasi framework mana pun dan langsung menemukan titik pemasangan plugin.

#Penutup

Inti yang harus dibawa pulang:

• Semua framework konten mendukung plugin rehype dengan pola yang sama.
• Next.js memakai @next/mdx atau pipeline Velite di konfigurasi build.
• Astro memakai opsi markdown.rehypePlugins di astro.config.mjs.
• SvelteKit memakai mdsvex sebagai preprocessor.
• VitePress memakai opsi markdown.rehypePlugins di konfigurasi.
• Highlight berjalan di build-time sehingga output tetap HTML statis.

Di episode 12 kalian akan belajar pengelolaan langs dan themes custom: mengimpor grammar dan theme lokal, memuat hanya bahasa yang dibutuhkan, serta menekan ukuran bundle dengan pemilihan langs dan themes yang selektif.