Showcase Elemen Penulisan

Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraf & Teks Dasar

Ini adalah paragraf biasa. Teks mengalir secara normal mengikuti lebar kontainer. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragraf kedua dipisahkan oleh baris kosong. Spasi tunggal antar baris dalam blok yang sama tidak membuat paragraf baru — hanya baris kosong yang memisahkan paragraf.

Teks tebal menggunakan dua asterisk.
Teks miring menggunakan satu asterisk.
Teks tebal sekaligus miring menggunakan tiga asterisk.
~~Teks dicoret~~ menggunakan dua tilde.
Kode inline menggunakan backtick.

Kombinasi: teks tebal dengan kode di dalamnya dan miring dengan ~~coret~~ di dalamnya.

Tautan

Tautan internal ke halaman lain

Tautan eksternal ke Astro

Tautan dengan title

URL langsung: https://astro.build

Email: hello@example.com

Blockquote

Ini adalah blockquote satu baris.

Blockquote bisa juga panjang dan terdiri dari beberapa kalimat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ini tetap dalam satu blok kutipan yang sama.

Paragraf kedua dalam blockquote yang sama, dipisahkan baris kosong.

Blockquote bersarang:

Ini adalah blockquote di dalam blockquote.

Dan ini satu level lebih dalam lagi.

Blockquote dengan formatting di dalamnya:

Item list di dalam blockquote

Item kedua

kode inline juga bisa di sini.

List

Unordered List

Item pertama
Item kedua
Item ketiga

List dengan sub-item:

Item utama
- Sub-item satu
- Sub-item dua
  - Sub-sub-item
  - Sub-sub-item lagi
- Sub-item tiga
Item utama lainnya

Ordered List

Langkah pertama
Langkah kedua
Langkah ketiga

List terurut dengan sub-item:

Item satu
1. Sub-item 1.1
2. Sub-item 1.2
Item dua
1. Sub-item 2.1
Item tiga

Task List

Tugas sudah selesai
Tugas ini juga selesai
Tugas ini belum dikerjakan
Tugas lain yang tertunda

List dengan Paragraf

Item dengan paragraf panjang di dalamnya.

Paragraf kedua untuk item yang sama. Perlu indentasi 4 spasi agar tetap menjadi bagian dari list item ini.
Item berikutnya.

Blockquote di dalam list item.
Item terakhir dengan kode inline di dalamnya.

Kode

Inline Code

Gunakan perintah npm run dev untuk menjalankan server lokal. Variabel NODE_ENV harus diset ke production saat build.

Code Block — Tanpa Bahasa

Ini adalah blok kode polos
tanpa syntax highlighting
baris ketiga

Code Block — Dengan Bahasa

npm create astro@latest
cd my-project
npm install
npm run dev

function greet(name) {
  return `Halo, ${name}!`;
}

console.log(greet("Dunia"));

interface Config {
  title: string;
  description?: string;
  lang: string;
}

const config: Config = {
  title: "Situs Saya",
  lang: "id",
};

:root {
  --color-primary: #7c3aed;
  --color-text: #1e1e2e;
  --font-body: "Inter", sans-serif;
}

.container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

<!doctype html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Halaman Saya</title>
  </head>
  <body>
    <h1>Halo Dunia</h1>
  </body>
</html>

{
  "name": "my-docs",
  "version": "1.0.0",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build"
  }
}

Code Block dengan Title

export function formatDate(date) {
  return new Intl.DateTimeFormat("id-ID", {
    dateStyle: "long",
  }).format(date);
}

---
const title = "Beranda";
---

<h1>{title}</h1>

Tabel

Tabel sederhana:

Kolom Satu	Kolom Dua	Kolom Tiga
Data A	Data B	Data C
Data D	Data E	Data F

Tabel dengan alignment:

Nama	Tipe	Default
`title`	`string`	—
`description`	`string`	`""`
`draft`	`boolean`	`false`
`pubDate`	`Date`	hari ini

Gambar

Gambar placeholder showcase

Gambar dengan title (tooltip saat hover):

Diagram arsitektur

Garis Horizontal

Tiga cara menulis garis pemisah — hasilnya identik:

Footnote

Ini kalimat dengan footnote.¹

Footnote bisa juga panjang dan multi-paragraf.²

Karakter Escape

Karakter yang perlu di-escape dengan backslash agar tidak diproses Markdown:

* asterisk * | _ underscore _ | ` backtick ` | \ backslash \

# hash | [ bracket ] | ( paren ) | { curly } | . titik |

HTML Native

Elemen HTML yang valid di dalam Markdown:

Superscript: E = mc², xⁿ + yⁿ = zⁿ

Subscript: H₂O, CO₂

Keyboard: tekan Ctrl + K untuk pencarian, Ctrl + Shift + I untuk DevTools.

Highlight: teks dengan bagian yang di-highlight menggunakan tag mark.

Klik untuk membuka detail

Konten tersembunyi secara default. Bisa berisi Markdown biasa di dalamnya:

Item satu
Item dua

console.log("kode di dalam details");

Detail yang terbuka secara default

Atribut open membuat konten langsung terlihat tanpa diklik.

Kombinasi Elemen

Blockquote dengan berbagai konten di dalamnya:

Catatan penting:

Blockquote bisa berisi hampir semua elemen lain:

List terurut di dalamnya

Dengan formatting di setiap item
Terminal window
echo "kode di dalam blockquote"
A B

1 2

A	B
1	2

List dengan konten campuran:

Item dengan teks tebal — dan penjelasan biasa setelahnya.
Item dengan kode inline dan teks miring dalam satu baris.
Item dengan tautan: lihat dokumentasi resmi.
- Sub-item dengan blockquote:
  
  Kutipan pendek di dalam sub-item list.

Isi catatan kaki pertama. Bisa berisi formatting dan kode. ↩
Isi catatan kaki kedua yang lebih panjang.

Paragraf kedua dalam footnote yang sama, dengan indentasi 4 spasi. ↩