Contoh Blok Kode - BlackNote

Di sini, kita akan membahas cara menggunakan Expressive Code untuk menampilkan blok kode. Contoh yang disajikan didasarkan pada dokumentasi resmi. Anda dapat merujuknya untuk informasi lebih lanjut.

Kode Ekspresif#

Penyorotan Sintaks#

Penyorotan Sintaks

Penyorotan Sintaks Umum#

1
console.log('Kode ini memiliki penyorotan sintaks!')

Merender Urutan Escape ANSI#

1
Warna ANSI standar:
2
- Warna redup:      Hitam  Merah  Hijau  Kuning  Biru  Magenta  Sian  Putih 
3
- Warna teks:       Hitam  Merah  Hijau  Kuning  Biru  Magenta  Sian  Putih 
4
- Warna latar:      Hitam  Merah  Hijau  Kuning  Biru  Magenta  Sian  Putih 
5
- Warna terbalik:   Hitam  Merah  Hijau  Kuning  Biru  Magenta  Sian  Putih 
6

7
Warna 8-bit (contoh warna 160–171):
8
- Warna redup:      160  161  162  163  164  165  166  167  168  169  170  171 
9
- Warna teks:       160  161  162  163  164  165  166  167  168  169  170  171 
10
- Warna latar:      160  161  162  163  164  165  166  167  168  169  170  171 
11
- Warna terbalik:   160  161  162  163  164  165  166  167  168  169  170  171 
12

13
Warna 24-bit (RGB penuh):
14
- Warna redup:      Hijau Hutan - RGB(34,139,34)  Ungu Rebecca - RGB(102,51,153) 
15
- Warna teks:       Hijau Hutan - RGB(34,139,34)  Ungu Rebecca - RGB(102,51,153) 
16
- Warna latar:      Hijau Hutan - RGB(34,139,34)  Ungu Rebecca - RGB(102,51,153) 
17
- Warna terbalik:   Hijau Hutan - RGB(34,139,34)  Ungu Rebecca - RGB(102,51,153) 
18

19
Gaya huruf:
20
- Biasa
21
- Tebal
22
- Redup
23
- Miring
24
- Garis bawah
25
- Warna terbalik
26
- Dicoret

Kerangka Kerja Editor dan Terminal#

Kerangka Kerja Editor dan Terminal

Kerangka Kerja Editor Kode#

1
console.log('Contoh atribut judul')

1
<div>Contoh komentar nama berkas</div>

Kerangka Kerja Terminal#

1
echo "Kerangka kerja terminal ini tidak memiliki judul"

1
Write-Output "Ini ada judulnya!"

Mengganti jenis bingkai#

1
echo "Lihat, tidak ada bingkai!"

1
# Jika tidak diganti, ini akan menjadi bingkai terminal
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

Penandaan Teks dan Baris#

Penandaan Teks dan Baris

Menandai Seluruh Baris dan Rentang Baris#

1
// Baris ke-1 - Penentuan posisi berdasarkan nomor baris
2
// Baris ke-2
3
// Baris ke-3
4
// Baris ke-4 - Penentuan posisi berdasarkan nomor baris
5
// Baris ke-5
6
// Baris ke-6
7
// Baris ke-7 - Penentuan posisi berdasarkan rentang "7-8"
8
// Baris ke-8 - Penentuan posisi berdasarkan rentang "7-8"

Memilih jenis penanda baris (mark, ins, del)#

1
function demo() {
2
  console.log('Baris ini ditandai sebagai telah dihapus')
3
  // Baris ini dan baris berikutnya ditandai sebagai telah disisipkan
4
  console.log('Ini adalah baris sisipan kedua')
5

6
  return 'Baris ini menggunakan jenis penanda default netral'
7
}

Menambahkan label ke penanda baris#

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === 'string' ? <span>{children}</span> : children)}
12
</button>

Menambahkan label panjang pada baris terpisah#

1
<button
2
  role="button"
3
  {...props}
4

5
  value={value}
6
  className={buttonClassName}
7

8
  disabled={disabled}
9
  active={active}
10
>
11

12
  {children &&
13
    !active &&
14
    (typeof children === 'string' ? <span>{children}</span> : children)}
15
</button>

Menggunakan sintaks mirip diff#

1
Baris ini akan ditandai sebagai baris yang ditambahkan
2
Baris ini akan ditandai sebagai baris yang dihapus
3
Ini adalah baris biasa

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+ini adalah berkas diff yang sebenarnya
5
-semua isi akan tetap tidak diubah
6
 spasi kosong juga tidak akan dihapus

Menggabungkan penyorotan sintaks dan sintaks mirip diff#

1
function thisIsJavaScript() {
2
  // Seluruh blok ini akan disorot sebagai JavaScript,
3
  // dan kita masih bisa menambahkan tag diff ke dalamnya!
4
  console.log('Kode lama yang akan dihapus')
5
  console.log('Kode baru yang keren!')
6
}

Menandai teks tertentu dalam baris#

1
function demo() {
2
  // Menandai teks apa pun yang diberikan di dalam baris
3
  return 'Mendukung beberapa kecocokan untuk teks yang diberikan';
4
}

Ekspresi reguler#

1
console.log('Kata yes dan yep akan ditandai.')

Meng-escape tanda garis miring#

1
echo "Test" > /home/test.txt

Memilih jenis penanda inline (mark, ins, del)#

1
function demo() {
2
  console.log('Ini adalah jenis penanda penyisipan dan penghapusan');
3
  // Pernyataan return menggunakan jenis penanda default
4
  return true;
5
}

Pemisahan Baris Otomatis#

Pemisahan Baris Otomatis

Mengonfigurasi pemisahan baris otomatis untuk setiap blok#

1
// Contoh pengaktifan pemotongan baris
2
function getLongString() {
3
  return 'Ini adalah string yang sangat panjang; kecuali wadahnya sangat lebar, kemungkinan besar string ini tidak akan muat di ruang yang tersedia'
4
}

1
// Contoh dengan wrap=false
2
function getLongString() {
3
  return 'Ini adalah string yang sangat panjang; kecuali wadahnya sangat lebar, kemungkinan besar tidak akan muat di ruang yang tersedia'
4
}

Konfigurasi indentasi saat pemotongan baris#

1
// Contoh preserveIndent (diaktifkan secara default)
2
function getLongString() {
3
  return 'Ini adalah string yang sangat panjang; kecuali wadahnya sangat lebar, kemungkinan besar string ini tidak akan muat di ruang yang tersedia'
4
}

1
// Contoh preserveIndent=false
2
function getLongString() {
3
  return 'Ini adalah string yang sangat panjang; kecuali wadahnya sangat lebar, kemungkinan besar string ini tidak akan muat di ruang yang tersedia'
4
}

Bagian yang Dapat Dilipat#

Bagian yang Dapat Dilipat


5 collapsed lines
1
// Semua kode pengaturan boilerplate ini akan dilipat
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// Bagian kode ini secara default tetap terlihat
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // Anda dapat memiliki beberapa bagian yang dapat dilipat
3 collapsed lines
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // Bagian ini akan tetap terlihat
17
  console.log(`Hasil perhitungan: ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 collapsed lines
21
// Semua kode hingga akhir blok akan dilipat kembali
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'Contoh kode templat berakhir' })

Nomor Baris#

Nomor baris

Menampilkan nomor baris untuk setiap blok#

1
// Blok kode ini akan menampilkan nomor baris
2
console.log('Salam dari baris ke-2!')
3
console.log('Saya ada di baris ke-3')

// Blok ini menonaktifkan nomor baris
console.log('Halo?')
console.log('Maaf, tahukah kamu di baris keberapa aku berada?')

Mengubah nomor baris awal#

5
console.log('Salam dari baris ke-5!')
6
console.log('Aku ada di baris ke-6')

Blok Kode Tab#

Disediakan oleh rehype-code-group, sintaksnya sama dengan VitePress code group: gunakan ::: code-group labels=[...] untuk menggabungkan beberapa blok kode menjadi satu grup tab.

[!CATATAN] Label dalam labels=[...] sesuai urutan dengan blok kode dalam grup tersebut, dipisahkan dengan koma; spasi antara ::: dan code-group tidak boleh dihilangkan.

Penggunaan Dasar#

1
::: kelompok-kode label=[code.js, code.py, code.html]
2

3
```js
4
export function greet(name) {
5
  return `Hello, ${name}!`;
6
}
7
```
8

9
```py
10
def greet(name):
11
    return f"Hello, {name}!"
12
```
13

14
```html
15
<p>Hello, world!</p>
16
```
17

18
:::

Efek rendering:

1
export function greet(name) {
2
  return `Hello, ${name}!`;
3
}

1
def greet(name):
2
    return f"Hello, {name}!"

1
<p>Hello, world!</p>

Penggunaan Emoji dalam Label#

Label mendukung kode pendek emoji, yang akan secara otomatis diubah menjadi emoji saat proses kompilasi:

1
::: code-group labels=[:package: npm, :package: pnpm, :yarn: yarn]

1
npm create astro@latest

1
pnpm create astro@latest

1
yarn create astro

Kombinasi dengan Fitur Blok Kode Lainnya#

Di dalam grup ini, blok kode Expressive Code tetap berfungsi seperti biasa; fitur-fitur seperti judul, nomor baris, penanda baris, penyembunyian, dan bingkai terminal dapat digunakan seperti biasa.

1
export default {
2
  theme: "firefly",
3
  codeGroup: true,
4
};

1
pnpm build && pnpm preview


3 collapsed lines
1
// Tiga baris ini terlipat secara default
2
import { a } from "a";
3
import { b } from "b";
4

5
console.log(a, b);

Lebih dari sekadar blok kode#

Tab dapat berisi konten apa pun, seperti teks, daftar, atau gambar:

Ini adalah isi paragraf biasa.

Tip

Tab dibuat pada tahap pembangunan, dan secara default item pertama akan terbuka; mendukung navigasi dengan klik mouse dan tombol keyboard ← / → / Home / End.

Penggunaan dalam kotak pemberitahuan (komponen MDX)#

Kotak petunjuk bergaya Docusaurus seperti ::: code-group dan ::: tip semuanya menggunakan sintaks kontainer :::, sedangkan micromark-directive menetapkan bahwa jumlah tanda titik dua pada kontainer induk dan anak harus berbeda. Oleh karena itu, ::: code-group tidak dapat disematkan di dalam kotak petunjuk seperti ::: tip (seluruh blok akan menjadi tidak berfungsi).

Dalam situasi ini, gunakan komponen MDX TabGroup: Komponen MDX tidak diproses melalui direktif :::, sehingga dapat digunakan dengan normal baik di dalam maupun di luar kotak petunjuk, serta memudahkan pengembangan komponen UI tambahan di masa mendatang. Ubah ekstensi artikel menjadi .mdx, lalu impor dari titik masuk terpusat @/components/firefly-mdx (Anda dapat mengimpor beberapa komponen sekaligus):

1
import { TabGroup } from "@/components/firefly-mdx";
2

3
:::tip
4

5
<TabGroup labels={["test.js", "test.py"]} client:load>
6
  ```js
7
  console.log(1)
8
  ```
9

10
  ```py
11
  print("hello world")
12
  ```
13
</TabGroup>
14

15
:::

Tip

Array labels mendeklarasikan label untuk setiap blok kode, dengan urutan yang sesuai satu per satu
Komponen menggunakan client:load untuk mengaktifkan peralihan label

Music