Gambar

Gambar adalah cara paling umum untuk menambahkan konten visual ke dokumentasi Anda.

Dasar-dasar

Sintaksmarkdown syntax memungkinkan Anda menambahkan gambar menggunakan kode berikut

![title](/path/image.jpg)

Untuk memastikan gambar ditampilkan dengan benar dalam produksi, tambahkan garis miring ke depan pada path gambar (misalnya /path/image.jpg).

Perhatikan bahwa ukuran file gambar harus kurang dari 20MB. Jika tidak, kami menyarankan untuk meng-host pada penyedia CDN seperti S3, Cloudinary atau layanan serupa.

Embeds

Untuk mendapatkan lebih banyak kemampuan kustomisasi dengan gambar, Anda juga dapat menggunakan embeds untuk menambahkan gambar.

<img height="200" src="/path/image.jpg" />

Menonaktifkan Zoom Gambar

Untuk menonaktifkan zoom default saat mengklik gambar, tambahkan properti noZoom ke embeds gambar.

<img height="200" noZoom src="/path/image.jpg" />

Menautkan Gambar

Untuk menautkan gambar, misalnya untuk membuat tombol pada dokumentasi Anda, masukkan gambar dalam tautan dengan properti noZoom. Gambar dalam tag a akan secara otomatis memiliki kursor pointer.

<a href="https://mintlify.com" target="_blank">
  <img height="200" noZoom src="/path/image.jpg" />
</a>

Mode Gelap

Untuk menggunakan gambar yang berbeda untuk mode terang dan gelap, gunakan Tailwind CSS untuk menyembunyikan dan menampilkan gambar.

<img className="block dark:hidden" src="/path/image-light.jpg" />
<img className="hidden dark:block" src="/path/image-dark.jpg" />

Terkait

Untuk informasi lebih lanjut, kami merekomendasikan bagian-bagian berikut:

Frame Component Reference

Baca referensi untuk komponen Frame

Video


Mintlify mendukung HTML tags in Markdown. Ini berguna jika Anda lebih suka tag HTML daripada sintaks Markdown, dan memungkinkan Anda membuat dokumentasi dengan fleksibilitas tak terbatas.

Untuk video YouTube gunakan:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/4KzFe50RQkQ"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Untuk video lainnya, gunakan:

<video
  controls
  className="w-full aspect-video"
  src="link-to-your-video.com"
></video>

Untuk memutar video secara otomatis, gunakan:

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full aspect-video"
  src="link-to-your-video.com"
></video>

Karena Mintlify perlu mematuhi sintaks JSX, atribut kata ganda perlu ditulis dalam camelCase: autoPlay, playsInline.

iFrames

Memuat halaman HTML lain dalam dokumen.

<iframe src="https://www.youtube.com/embed/4KzFe50RQkQ"> </iframe>