CodeBlock

Blok kode dengan pewarnaan sintaks dan tombol salin. Untuk halaman dokumentasi API, panduan integrasi, atau menampilkan konfigurasi.

Dasar

Isi code dan lang. Pewarnaan dikerjakan di server dengan Shiki, mesin yang sama dengan VS Code. Halaman yang dirender server tidak perlu mengunduh apa pun untuk mewarnai kode.

const pickup = await $fetch('/api/pickups', {
  method: 'POST',
  body: { address: 'Jl. Raya Bekasi No. 12', weightKg: 12.5 },
})

Nama file

filename menjelaskan dari mana kode itu berasal.

nuxt.config.ts

export default defineNuxtConfig({
  extends: ['@waste4change/ui'],
  css: ['~/assets/css/main.css'],
})

Bahasa

Tersedia vue, ts, js, json, css, html, dan bash. Hanya bahasa ini yang dimuat, supaya ukurannya tetap kecil.

vue

<W4cButton icon="lucide:save" :loading="saving" @click="save">
  Simpan
</W4cButton>

css

.card {
  background: var(--color-surface-raised);
  border-radius: var(--radius-control);
}

bash

bun add @waste4change/ui # pasang package

json

{ "id": 42, "status": "picked_up", "weight_kg": 12.5 }

Tanpa tombol salin

Untuk teks yang hanya untuk dibaca, misalnya log. Tanpa lang, teks tampil tanpa warna.

log-pickup.txt

[08:02] Armada B 1234 XYZ berangkat dari depo
[08:31] Tiba di lokasi pickup
[08:40] Timbang: 12,5 kg

Kode panjang

Tinggi maksimal 448 px. Kode yang lebih panjang atau lebih lebar bisa di-scroll, termasuk dengan keyboard.

GET /api/pickups

{
  "data": [
    {
      "id": 1040,
      "customer": "PT Contoh Pelanggan 1",
      "address": "Jl. Raya Bekasi Km. 25, Cakung, Jakarta Timur, DKI Jakarta 13910",
      "status": "scheduled"
    },
    {
      "id": 1041,
      "customer": "PT Contoh Pelanggan 2",
      "address": "Jl. Raya Bekasi Km. 25, Cakung, Jakarta Timur, DKI Jakarta 13910",
      "status": "picked_up"
    },
    {
      "id": 1042,
      "customer": "PT Contoh Pelanggan 3",
      "address": "Jl. Raya Bekasi Km. 25, Cakung, Jakarta Timur, DKI Jakarta 13910",
      "status": "picked_up"
    },
    {
      "id": 1043,
      "customer": "PT Contoh Pelanggan 4",
      "address": "Jl. Raya Bekasi Km. 25, Cakung, Jakarta Timur, DKI Jakarta 13910",
      "status": "scheduled"
    },
    {
      "id": 1044,
      "customer": "PT Contoh Pelanggan 5",
      "address": "Jl. Raya Bekasi Km. 25, Cakung, Jakarta Timur, DKI Jakarta 13910",
      "status": "picked_up"
    },
    {
      "id": 1045,
      "customer": "PT Contoh Pelanggan 6",
      "address": "Jl. Raya Bekasi Km. 25, Cakung, Jakarta Timur, DKI Jakarta 13910",
      "status": "picked_up"
    },
    {
      "id": 1046,
      "customer": "PT Contoh Pelanggan 7",
      "address": "Jl. Raya Bekasi Km. 25, Cakung, Jakarta Timur, DKI Jakarta 13910",
      "status": "scheduled"
    },
    {
      "id": 1047,
      "customer": "PT Contoh Pelanggan 8",
      "address": "Jl. Raya Bekasi Km. 25, Cakung, Jakarta Timur, DKI Jakarta 13910",
      "status": "picked_up"
    }
  ],
  "meta": {
    "page": 1,
    "per_page": 8,
    "total": 132
  }
}

API

Props

Prop	Tipe	Default	Keterangan
code	string	—	Kode yang ditampilkan. Baris kosong di awal dan akhir dibuang.
lang	'vue' \| 'ts' \| 'js' \| 'json' \| 'css' \| 'html' \| 'bash' \| 'text'	'text'	Bahasa untuk pewarnaan. text menampilkan kode tanpa warna.
filename	string	—	Label di bar atas, misalnya path file. Tanpa ini, bar menampilkan nama bahasa.
copyable	boolean	true	Menampilkan tombol salin.
copy-label	string	'Salin'	Teks tombol salin.
copied-label	string	'Tersalin'	Teks setelah berhasil menyalin. Juga diumumkan ke pembaca layar.
flush	boolean	false	Mengisi panel di sekelilingnya dari tepi ke tepi: tanpa border dan tanpa sudut membulat sendiri. Untuk blok kode di dalam panel yang sudah menggambar keduanya.