Contoh Blok Kode Firefly

Bagaimana tampilan blok kode di Markdown menggunakan Expressive Code di Firefly.

Di sini, kita akan menjelajahi cara menampilkan blok kode menggunakan Expressive Code. Contoh yang diberikan didasarkan pada dokumentasi resmi, yang dapat Anda rujuk untuk detail lebih lanjut.

Expressive Code#

Penyorotan Sintaks#

Penyorotan Sintaks

Penyorotan Sintaks Biasa#

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

Merender Urutan Escape ANSI#

1
ANSI colors:
2
- Regular: Red Green Yellow Blue Magenta Cyan
3
- Bold:    Red Green Yellow Blue Magenta Cyan
4
- Dimmed:  Red Green Yellow Blue Magenta Cyan
5

6
256 colors (showing colors 160-177):
7
160 161 162 163 164 165
8
166 167 168 169 170 171
9
172 173 174 175 176 177
10

11
Full RGB colors:
12
ForestGreen - RGB(34, 139, 34)
13

14
Text formatting: Bold Dimmed Italic Underline

Kerangka Editor dan Terminal#

Kerangka Editor dan Terminal

Kerangka Editor Kode#

1
console.log('Contoh atribut judul')

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

Kerangka Terminal#

1
echo "Kerangka terminal ini tidak memiliki judul"

1
Write-Output "Yang ini punya judul!"

Mengganti Jenis Kerangka#

1
echo "Lihat, tidak ada kerangka!"

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

Penanda Teks dan Baris#

Penanda Teks dan Baris

Menandai Seluruh Baris dan Rentang Baris#

1
// Baris 1 - ditargetkan oleh nomor baris
2
// Baris 2
3
// Baris 3
4
// Baris 4 - ditargetkan oleh nomor baris
5
// Baris 5
6
// Baris 6
7
// Baris 7 - ditargetkan oleh rentang "7-8"
8
// Baris 8 - ditargetkan oleh rentang "7-8"

Memilih Jenis Penanda Baris (mark, ins, del)#

1
function demo() {
2
  console.log('Baris ini ditandai sebagai dihapus')
3
  // Baris ini dan baris berikutnya ditandai sebagai 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 disisipkan
2
Baris ini akan ditandai sebagai dihapus
3
Ini adalah baris biasa

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+ini adalah file diff yang sebenarnya
5
-semua konten akan tetap tidak dimodifikasi
6
 tidak ada spasi putih yang akan dihapus juga

Menggabungkan Penyorotan Sintaks dan Sintaks Mirip Diff#

1
function iniAdalahJavaScript() {
2
  // Seluruh blok akan disorot sebagai JavaScript,
3
  // dan kita masih bisa menambahkan penanda diff ke dalamnya!
4
  console.log('kode lama untuk dihapus')
5
  console.log('kode baru yang mengkilap!')
6
}

Menandai Teks Terpisah di Dalam Baris#

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

Ekspresi Reguler#

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

Melepaskan 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 sisipan dan hapus');
3
  // Pernyataan return menggunakan jenis penanda default
4
  return true;
5
}

Bungkus Kata Otomatis#

Bungkus Kata Otomatis

Mengkonfigurasi Bungkus Kata untuk Setiap Blok#

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

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

Mengkonfigurasi Indentasi Bungkus Kata#

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

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

Bagian yang Dapat Dilipat#

Bagian yang Dapat Dilipat


5 collapsed lines
1
// Semua kode 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 terlihat secara default
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
  // 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 lagi
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'Kode boilerplate contoh 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 2!')
3
console.log('Saya di baris 3')

// Blok ini menonaktifkan nomor baris
console.log('Halo?')
console.log('Maaf, Anda tahu di baris mana saya?')

Mengubah Nomor Baris Awal#

5
console.log('Salam dari baris 5!')
6
console.log('Saya di baris 6')