Tab & Block Code

•
...

Blok Kode & Snippet Dokumentasi

Berikut adalah beberapa model tampilan blok kode modern dengan header bahasa dan tombol salin:

A. Blok Kode Mandiri (cURL / Bash)

Format blok kode mandiri dengan header gelap dan tombol Salin fungsional:

BASH 
curl -X POST "https://api.domainanda.com/api/send-message" \
  -H "Authorization: Bearer TOKEN_RAHASIA_ANDA" \
  -H "Content-Type: application/json" \
  -d '{
    "receiver": "628123456789",
    "message": "Halo! Pesan ini dikirim otomatis via API WhatsApp Gateway."
  }'

B. Kode HTML di Dalam <pre>

Untuk menampilkan sintaks kode HTML agar tidak dieksekusi oleh browser, ubah simbol < menjadi &lt; dan > menjadi &gt;

HTML 
<!-- Contoh Komponen Notifikasi Alert -->
<div class="callout callout-info">
  <div class="callout-icon">
    <iconify-icon icon="lucide:info"></iconify-icon>
  </div>
  <div class="callout-content">
    <strong>Informasi:</strong> Webhook berhasil terhubung.
  </div>
</div>

C. Tab Interaktif (Code Tabs)

Tampilkan contoh kode dalam beberapa bahasa pemrograman sekaligus dengan tab yang dapat diklik:

curl -X POST "https://api.domainanda.com/api/send-message" \
  -H "Authorization: Bearer TOKEN_RAHASIA_ANDA" \
  -H "Content-Type: application/json" \
  -d '{
    "receiver": "628123456789",
    "message": "Halo! Pesan ini dikirim otomatis via API WhatsApp Gateway."
  }'
const axios = require('axios');

async function kirimPesan() {
  try {
    const response = await axios.post('https://api.domainanda.com/api/send-message', {
      receiver: '628123456789',
      message: 'Halo! Pesan otomatis via Node.js'
    }, {
      headers: {
        'Authorization': 'Bearer TOKEN_RAHASIA_ANDA',
        'Content-Type': 'application/json'
      }
    });
    console.log('Status Pengiriman:', response.data);
  } catch (error) {
    console.error('Gagal mengirim:', error.response ? error.response.data : error.message);
  }
}

kirimPesan();
import requests

url = "https://api.domainanda.com/api/send-message"
headers = {
    "Authorization": "Bearer TOKEN_RAHASIA_ANDA",
    "Content-Type": "application/json"
}
payload = {
    "receiver": "628123456789",
    "message": "Halo! Pesan otomatis via Python."
}

response = requests.post(url, json=payload, headers=headers)
print("Response:", response.json())
<?php
$curl = curl_init();

$payload = json_encode([
  "receiver" => "628123456789",
  "message" => "Halo! Pesan otomatis via PHP cURL."
]);

curl_setopt_array($curl, [
  CURLOPT_URL => "https://api.domainanda.com/api/send-message",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_POST => true,
  CURLOPT_POSTFIELDS => $payload,
  CURLOPT_HTTPHEADER => [
    "Authorization: Bearer TOKEN_RAHASIA_ANDA",
    "Content-Type: application/json"
  ],
]);

$response = curl_exec($curl);
curl_close($curl);
echo $response;
HTML 
<div class="docs-tabs">
  <div class="docs-tabs-nav">
    <button type="button" class="docs-tab-btn active">cURL</button>
    <button type="button" class="docs-tab-btn">Node.js</button>
    <button type="button" class="docs-tab-btn">Python</button>
    <button type="button" class="docs-tab-btn">PHP</button>
  </div>

  <!-- Panel cURL -->
  <div class="docs-tab-panel active">
    <pre><code class="language-bash">curl -X POST "https://api.domainanda.com/api/send-message" \
  -H "Authorization: Bearer TOKEN_RAHASIA_ANDA" \
  -H "Content-Type: application/json" \
  -d '{
    "receiver": "628123456789",
    "message": "Halo! Pesan ini dikirim otomatis via API WhatsApp Gateway."
  }'</code></pre>
  </div>

  <!-- Panel Node.js -->
  <div class="docs-tab-panel">
    <pre><code class="language-javascript">const axios = require('axios');

async function kirimPesan() {
  try {
    const response = await axios.post('https://api.domainanda.com/api/send-message', {
      receiver: '628123456789',
      message: 'Halo! Pesan otomatis via Node.js'
    }, {
      headers: {
        'Authorization': 'Bearer TOKEN_RAHASIA_ANDA',
        'Content-Type': 'application/json'
      }
    });
    console.log('Status Pengiriman:', response.data);
  } catch (error) {
    console.error('Gagal mengirim:', error.response ? error.response.data : error.message);
  }
}

kirimPesan();</code></pre>
  </div>

  <!-- Panel Python -->
  <div class="docs-tab-panel">
    <pre><code class="language-python">import requests

url = "https://api.domainanda.com/api/send-message"
headers = {
    "Authorization": "Bearer TOKEN_RAHASIA_ANDA",
    "Content-Type": "application/json"
}
payload = {
    "receiver": "628123456789",
    "message": "Halo! Pesan otomatis via Python."
}

response = requests.post(url, json=payload, headers=headers)
print("Response:", response.json())</code></pre>
  </div>

  <!-- Panel PHP -->
  <div class="docs-tab-panel">
    <pre><code class="language-php"><?php
$curl = curl_init();

$payload = json_encode([
  "receiver" => "628123456789",
  "message" => "Halo! Pesan otomatis via PHP cURL."
]);

curl_setopt_array($curl, [
  CURLOPT_URL => "https://api.domainanda.com/api/send-message",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_POST => true,
  CURLOPT_POSTFIELDS => $payload,
  CURLOPT_HTTPHEADER => [
    "Authorization: Bearer TOKEN_RAHASIA_ANDA",
    "Content-Type: application/json"
  ],
]);

$response = curl_exec($curl);
curl_close($curl);
echo $response;</code></pre>
  </div>
</div>

Apakah panduan ini membantu?

Bantu kami meningkatkan dokumentasi dengan memberikan respon Anda.

Bagikan: