Tingkatkan tampilan blogmu ke level profesional! Pelajari cara menggunakan plugin Tailwind Typography untuk styling konten instan dan implementasikan syntax highlighting canggih untuk blok kode.
960m bacaanKuis WajibMicro Badge Lesson
Bab 4: Sentuhan Profesional, Styling Konten & Kode
Blog kita sudah berfungsi, tapi seorang developer profesional tahu bahwa detail visual itu penting. Di bab ini, kita akan fokus pada dua hal yang akan secara drastis meningkatkan kualitas visual dan pengalaman membaca di halaman artikel kita:
Tailwind CSS Typography: Sebuah plugin "ajaib" untuk memberi style pada konten yang dihasilkan dari MDX secara otomatis.
Syntax Highlighting: Membuat blok kode di artikel kita terlihat indah dan mudah dibaca, layaknya di VS Code.
Saat kita me-render MDX, ia menghasilkan elemen HTML standar seperti <h1>, <p>, <ul>, <blockquote>, dll. Memberi style pada masing-masing elemen ini secara manual bisa sangat melelahkan. Di sinilah plugin typography datang menyelamatkan.
A. Instalasi Plugin
Hentikan server (Ctrl+C) dan jalankan:
bash
npm install -D @tailwindcss/typography
Kita menggunakan -D karena ini adalah dependensi yang hanya dibutuhkan saat proses development/build (dev dependency).
B. Mengaktifkan Plugin
Buka file tailwind.config.ts (jika belum ada, buat di root proyek) dan tambahkan plugin tersebut. Jika Anda mengikuti dari awal dan mengkonfigurasi Tailwind v4 dari file CSS, kita bisa lewati langkah ini karena v4 akan datang dengan fitur ini secara built-in atau konfigurasinya berbeda. Namun, untuk sekarang mari kita asumsikan kita perlu tailwind.config.ts untuk plugin.
Catatan untuk v4: Dengan arsitektur baru Tailwind CSS v4, cara menambahkan plugin mungkin akan berevolusi. Untuk saat ini, mari kita gunakan pendekatan yang kompatibel. Jika tailwind.config.ts tidak ada, buat file tersebut.
typescript
// tailwind.config.tsimport type { Config } from 'tailwindcss'const config: Config = { content: [ './src/pages/**/*.{js,ts,jsx,tsx,mdx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: {}, }, plugins: [ require('@tailwindcss/typography'), // Tambahkan baris ini ],}export default config
C. Menggunakan Class prose
Sekarang, kita bisa menggunakan prose class. Kita sebenarnya sudah menggunakannya di bab sebelumnya pada file src/app/blog/[slug]/page.tsx:
prose: Menerapkan serangkaian style tipografi yang indah untuk mode terang.
dark:prose-invert: Membalikkan warna tipografi agar cocok untuk mode gelap.
max-w-none: Secara default, prose membatasi lebar teks agar mudah dibaca. Kita menonaktifkannya di sini karena kita sudah mengatur lebar kontainer di layout.tsx. Kamu bisa menghapusnya jika ingin lebar artikel lebih sempit dari layout utama.
Dengan satu baris className itu, semua judul, paragraf, link, dan daftar di dalam <article> akan otomatis terlihat bagus tanpa perlu styling manual.
2. Syntax Highlighting Kode yang Canggih
Sebagai blog developer, blok kode adalah konten kelas satu. Kita ingin membuatnya terlihat profesional. Kita akan menggunakan rehype-pretty-code, sebuah library yang luar biasa untuk ini.
A. Instalasi
rehype-pretty-code membutuhkan beberapa paket untuk bekerja:
bash
npm install rehype-pretty-code shiki
rehype-pretty-code: Inti dari library ini.
shiki: Mesin di baliknya yang melakukan pewarnaan sintaks.
B. Konfigurasi rehype-pretty-code
Kita perlu memberitahu next-mdx-remote untuk menggunakan plugin ini saat mem-parsing konten MDX.
Buka kembali file src/app/blog/[slug]/page.tsx dan perbarui menjadi seperti ini:
tsx
// src/app/blog/[slug]/page.tsximport { getPostBySlug, getAllPosts } from "@/lib/post-utils";import { MDXRemote } from "next-mdx-remote/rsc";import rehypePrettyCode from "rehype-pretty-code";import type { Options } from "rehype-pretty-code";// Opsi untuk rehype-pretty-codeconst options: Options = { theme: "one-dark-pro", // Atau tema lain dari shiki, misal: 'github-dark' onVisitLine(node) { // Mencegah baris kosong tanpa `class` agar tidak error if (node.children.length === 0) { node.children = [{ type: "text", value: " " }]; } }, onVisitHighlightedLine(node) { // Memberi style pada baris yang di-highlight node.properties.className.push("highlighted"); }, onVisitHighlightedWord(node) { // Memberi style pada kata yang di-highlight node.properties.className = ["word-highlighted"]; },};export default function BlogPostPage({ params }: BlogPostPageProps) { const { slug } = params; const { frontmatter, content } = getPostBySlug(slug); return ( <article className="prose dark:prose-invert max-w-none"> {/* ... judul dan tanggal ... */} <MDXRemote source={content} options={{ mdxOptions: { rehypePlugins: [[rehypePrettyCode, options]], }, }} /> </article> );}// ... (fungsi generateStaticParams)
Mari kita bedah perubahannya:
Impor rehypePrettyCode: Kita mengimpor library-nya.
options: Kita mendefinisikan objek konfigurasi. Yang paling penting adalah theme. Kamu bisa memilih tema apa pun yang didukung oleh Shiki. one-dark-pro adalah tema yang sangat populer. Bagian onVisit... adalah untuk kustomisasi lebih lanjut (opsional tapi bagus).
options Prop di MDXRemote: Kita memberikan konfigurasi ini ke MDXRemote melalui prop options. Kita memberitahunya untuk menggunakan rehypePrettyCode sebagai rehypePlugin.
C. Menambahkan Sedikit CSS
rehype-pretty-code akan menambahkan class ke elemen-elemen kode kita, tapi kita perlu menambahkan sedikit CSS untuk membuatnya benar-benar bersinar. Buka src/app/globals.css dan tambahkan kode ini di bagian paling bawah:
css
/* src/app/globals.css */@import "tailwindcss";/* ... (kode lain jika ada) *//* Style untuk rehype-pretty-code */pre { /* Memberi padding dan border-radius pada container kode */ @apply p-4 rounded-lg;}.highlighted { /* Memberi warna latar pada baris yang di-highlight */ @apply bg-zinc-200/50 dark:bg-zinc-800/50; display: block; margin-inline: -1rem; padding-inline: 1rem;}.word-highlighted { /* Memberi style pada kata yang di-highlight */ @apply bg-zinc-300 dark:bg-zinc-700 p-1 rounded-md;}
Gunakan @apply adalah cara Tailwind untuk menerapkan utility class di dalam blok CSS biasa.
Sekarang, jalankan servermu lagi dan lihat salah satu artikel yang memiliki blok kode. Kamu akan melihat perbedaan yang dramatis! Kode tersebut sekarang memiliki pewarnaan sintaks yang profesional, persis seperti yang kamu harapkan dari blog developer modern.
Rangkuman & Langkah Selanjutnya
Selamat! Kamu telah melakukan dua langkah paling signifikan untuk meningkatkan kualitas visual blog-mu.
✅ Menggunakan @tailwindcss/typography untuk styling konten yang konsisten dan indah.
✅ Mengimplementasikan rehype-pretty-code untuk syntax highlighting kode yang canggih.
Blog-mu tidak hanya berfungsi, tapi sekarang juga terlihat sangat profesional.
Di bab terakhir sebelum kita go-live, kita akan membahas sesuatu yang sangat penting namun sering diabaikan: Search Engine Optimization (SEO). Kita akan memastikan Google bisa menemukan dan memahami setiap artikel yang telah kita tulis.
Checkpoint KuisTarget: 70%
Kuis Styling Konten Profesional
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
