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:

1. Tailwind CSS Typography: Sebuah plugin "ajaib" untuk memberi style pada konten yang dihasilkan dari MDX secara otomatis.
2. Syntax Highlighting: Membuat blok kode di artikel kita terlihat indah dan mudah dibaca, layaknya di VS Code.

1. Keajaiban Tailwind CSS Typography (@tailwindcss/typography)

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.ts
import 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: {},

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:

tsx

// src/app/blog/[slug]/page.tsx
// ...
export default function BlogPostPage({ params }: BlogPostPageProps) {
  // ...
  return (
    <article className="prose dark:prose-invert max-w-none">
      {/* ... */}
    </article>

• 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.tsx
import { getPostBySlug, getAllPosts } from "@/lib/post-utils";
import { MDXRemote } from "next-mdx-remote/rsc";
import

Mari kita bedah perubahannya:

1. Impor rehypePrettyCode: Kita mengimpor library-nya.
2. 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).
3. 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 */

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.