🖋ī¸ Dasar Lengkap Markdown & YAML di Quarto

Panduan menyeluruh tentang sintaks Markdown dan konfigurasi YAML untuk Quarto. Cocok untuk membuat dokumen praktikum interaktif, laporan, dan website.
Keywords

markdown quarto, yaml quarto, panduan lengkap markdown, sintaks markdown, konfigurasi yaml, quarto tips

1 📚 Pendahuluan

Markdown dan YAML adalah blok bangunan utama dalam Quarto. Dengan memahami kedua hal ini secara mendalam, kalian bisa membuat dokumen, modul, dan website praktikum yang interaktif, mudah dibaca, dan mudah dikelola.

2 📑 Daftar Isi

  1. 📑 Daftar Isi
  2. Markdown Dasar
  3. Markdown Lanjutan
  4. Fitur Quarto Khusus Markdown
  5. YAML Dasar
  6. YAML Lanjutan & Quarto
  7. Contoh Kasus: Dokumen Praktikum Interaktif

3 Markdown Dasar

3.1 Heading dan Paragraf

Gunakan # untuk heading, pisahkan paragraf dengan satu baris kosong.

Quarto
# Heading 1
## Heading 2
### Heading 3

Ini paragraf pertama.

Ini paragraf kedua.

3.2 Penekanan Teks

Quarto
**Tebal** atau __Tebal__  
*Miring* atau _Miring_  
~~Coret~~

Hasilnya seperti berikut.

Tebal atau Tebal
Miring atau Miring
Coret

3.3 Daftar

  • Daftar tak bernomor:

    Quarto
    - Item A
  - Sub-item A1
- Item B

  1. Daftar bernomor:

    Quarto
    1. Langkah 1
2. Langkah 2
   1. Sub-langkah

3.4 Tautan dan Gambar

Quarto
[Tautan ke Posit](https://posit.co)

![Alt Text](images/diagram.png){width=300px}

3.5 Kode dan Blok Kode

  • Inline code:
Quarto
``Gunakan `print()` untuk skrip sederhana.``

Hasilnya sebagai berikut. Gunakan `print()` untuk skrip sederhana.

  • Blok kode:
Python
def hello():
   print("Hello, Quarto!")

3.6 Kutipan & Garis Horizontal

Quarto
> Ini adalah kutipan.

---

3.7 Tabel Sederhana

Quarto
| Nama   | Nilai |
|--------|-------|
| Alice  | 85    |
| Bob    | 90    |
Tips buat table di markdown & Quarto

Gunakan tablesgenerator.com bagian markdown tabel agar membantu buat tabel lebih cepat

4 Markdown Lanjutan

4.1 Footnotes

Quarto
Teks utama[^1]

[^1]: Ini catatan kaki.

Tampilan:

Teks utama1

4.2 Daftar Definisi

Quarto
Term 1
:   Definisi untuk term 1.

Term 2
:   Definisi untuk term 2.

Tampilan

Term 1
Definisi untuk term 1.
Term 2
Definisi untuk term 2.

4.3 Checklist

Quarto
- [x] Selesai
- [ ] Belum selesai

Tampilan:

4.4 Emoji & Unicode

Quarto
Gunakan emoji untuk memperjelas 📚✨

4.5 Raw HTML

Quarto
```{=html}
<div style="background:#f0f0f0; padding:10px;">
  <strong>Catatan:</strong> Ini HTML mentah.
</div>

Tampilannya akan seperti ini2:

Catatan: Ini HTML mentah.

4.5.1 Coloring text

Dari fitur HTML, kita bisa mewarnai text sesuai kebutuhan. Sebab, fitur di html dan css dapat diterapkan pada quarto markdown juga. Seperti

Quarto
```{=html}
ini warna <text style="color : red">merah</text>.

Tampilannya ini warna merah.

4.6 Math & Persamaan

Quarto
Inline: $E = mc^2$

Block:
$$
\int_0^1 x^2 dx = \frac{1}{3}
$$

Tampilannya sebagai berikut:

Inline: \(E = mc^2\)

Block: \[ \int_0^1 x^2 dx = \frac{1}{3} \]

5 Fitur Quarto Khusus Markdown

  • Admonitions / Callouts:

    Quarto
    ::: {.callout-note}
Ini catatan penting.
:::

    Tampilannya sebagai berikut:

    Note

    Ini catatan penting.

    Ada banyak jenis tampilan:

    • Note
    {.callout-note}
    • Warning
    {.callout-warning}
    • Important
    {.callout-important}
    • Tips
    {.callout-tip}
    • Caution
    {.callout-caution}

    Lalu, bisa diberi atribut, seperti:

    • title=""
    • collapse="true"
Quarto
# contoh

::: {.callout-tip title="Ini tips lah" collapse="true"}
betul-betul-betul
:::

Hasilnya akan seperti ini.

betul-betul-betul

  • Cross-reference:

    Lihat Tabel <a href="#tabel-contoh">Tabel Contoh</a>.

  • Citation & Bibliografi: Tambahkan di YAML:

    bibliography: references.bib
csl: apa.csl

    Lalu di teks:

    Menurut studi [@doe2020], ...

  • Parameters & Parameterized Documents:

    params:
  tahun: 2025
    Tahun: `r params$tahun`

6 YAML Dasar

---
title: "Judul Dokumen"
author: "Nama Kamu"
date: "2025-05-11"
format: html
---
  • title, author, date: metadata utama.
  • format: format output (html, pdf, docx).

7 YAML Lanjutan & Quarto

7.1 Pengaturan Format HTML

format:
  html:
    toc: true
    toc-title: "Daftar Isi"
    toc-location: left
    toc-depth: 3
    theme: cosmo
    code-fold: true

7.2 PDF & Word

format:
  pdf:
    documentclass: article
  docx: default

7.3 Daftar Isi, Navigasi, & Sidebar

toc: true
toc-depth: 4
number-sections: true

7.4 Bibliografi & Citation Style

bibliography: references.bib
csl: apa.csl
link-citations: true

7.5 Project vs Dokumen

  • project.yaml: untuk pengaturan seluruh website/proyek.
  • YAML di tiap .qmd: untuk metadata dokumen tunggal.

8 Contoh Kasus: Dokumen Praktikum Interaktif

Kompleksitas sederhana menggabungkan semua fitur:

---
title: "Modul Praktikum Statistik"
author: "Asisten Lab"
date: "`r Sys.Date()`"
bibliography: references.bib
csl: chicago-author-date.csl
format:
  html:
    toc: true
    code-fold: true
    theme: cosmo
params:
  sigma: 1.5
---
::: callout-tip
**Parameter `sigma`**: nilai standar deviasi yang bisa kamu ubah di header YAML.
:::

# Pengantar
Nilai sigma: `r params$sigma`

## Simulasi
```python
import numpy as np
np.random.seed(123)
data = np.random.normal(0, params$sigma, size=100)

```{=html}
<iframe src="docs/hasil_simulasi.pdf" width="100%" height="400px"></iframe>
Simulasi Hasil
Mean r mean(data)
Std Dev r sd(data)

Footnotes

  1. Ini catatan kaki.↩ī¸Ž

  2. seperti biasa, untuk code yang tidak lengkap seperti di atas, diakhir berikan backtick 3 kali ```↩ī¸Ž