Gambar, Tabel & Embed
Menyisipkan gambar yang bisa diperbesar, tabel yang rapi, video, dan konten tersemat lainnya.
Di halaman ini
Gambar yang berdiri sendiri pada satu paragraf otomatis menjadi <figure>, dan teks pada tanda kutip menjadi keterangan.
Yang terjadi otomatis:
- Klik untuk memperbesar — gambar dibuka dalam lightbox (tutup dengan Esc atau klik).
- Lazy loading dan ukuran gambar dicatat, sehingga tata letak tidak "melompat" saat memuat.
srcsetditambahkan untuk gambar dari Media Library, jadi peramban memilih ukuran yang paling pas.
Selalu isi teks alternatif. Kosongkan () hanya untuk gambar yang murni dekoratif.
| Endpoint | Metode | Kegunaan |
|---|---|---|
/tree |
GET | Mengambil pohon halaman |
/pages/{id} |
POST | Menyimpan atau menerbitkan |
/render |
POST | Merender Markdown untuk pratinjau |
/search-index |
GET | Indeks pencarian publik |
| Kolom | Rata tengah | Rata kanan |
|---|:---:|---:|
| isi | isi | isi |Tabel yang lebih lebar dari kolom teks bisa digulir mendatar, dan area gulirnya dapat difokuskan dengan papan tik.
{% embed url="https://vimeo.com/76979871" %}
{% embed url="https://www.youtube.com/watch?v=ID_VIDEO" %}Video tidak langsung memuat pemutar pihak ketiga: yang tampil hanyalah gambar sampul. Pemutar baru dimuat setelah pembaca menekan tombol putar — lebih cepat sekaligus lebih menghormati privasi pengunjung.
Penyedia yang dikenali: YouTube, Vimeo, Loom, CodePen, CodeSandbox, StackBlitz, dan Figma. URL lain ditampilkan sebagai kartu tautan:
{% file src="https://contoh.id/panduan.pdf" %}Blok kode berbahasa mermaid dirender menjadi diagram bila pustaka Mermaid tersedia di tema (lihat Kustomisasi Tema); bila tidak, sumbernya tetap ditampilkan rapi.
graph LR A[Markdown] --> B[Renderer PHP] B --> C[post_content] B --> D[Indeks pencarian] C --> E[Halaman] D --> E
\text{Skor} = \frac{\text{kecocokan judul} \times 3 + \text{kecocokan isi}}{\text{panjang dokumen}}Rumus ditulis dengan $$ dan dirender menjadi MathML asli peramban — tanpa memuat pustaka tambahan.