Contoh Blok Kode Neko

Di sini, kita akan mengeksplorasi cara menggunakan Expressive Code untuk menampilkan blok kode. Contoh yang disediakan didasarkan pada dokumentasi resmi, Anda dapat merujuk ke sana untuk detail lebih lanjut.

Expressive Code#

Syntax Highlighting#

Syntax Highlighting

Syntax Highlighting Reguler#

1
console.log('Kode ini memiliki syntax highlighting!')

Render ANSI Escape Sequences#

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

Editor dan Terminal Frames#

Editor dan Terminal Frames

Frame Editor Kode#

1
console.log('Contoh atribut judul')

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

Frame Terminal#

1
echo "Frame terminal ini tidak memiliki judul"

1
Write-Output "Yang ini punya judul!"

Mengganti Tipe Frame (Override)#

1
echo "Lihat, tanpa frame!"

1
# Jika tidak di-override, ini akan menjadi frame 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 - Ditandai lewat nomor baris
2
// Baris 2
3
// Baris 3
4
// Baris 4 - Ditandai lewat nomor baris
5
// Baris 5
6
// Baris 6
7
// Baris 7 - Ditandai lewat rentang "7-8"
8
// Baris 8 - Ditandai lewat rentang "7-8"

Memilih Tipe 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 tipe penanda default netral'
7
}

Menambahkan Label pada 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 reguler

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 Syntax Highlighting dan Sintaks Mirip Diff#

1
function iniAdalahJavaScript() {
2
  // Seluruh blok akan di-highlight sebagai JavaScript,
3
  // dan kita masih bisa menambahkan penanda diff di dalamnya!
4
  console.log('Kode lama yang akan dihapus')
5
  console.log('Kode baru yang berkilau!')
6
}

Menandai Teks Tertentu dalam Baris#

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

Regular Expressions (Regex)#

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

Meng-escape Garis Miring (Slash)#

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

Memilih Tipe Penanda Inline (mark, ins, del)#

1
function demo() {
2
  console.log('Ini adalah tipe penanda disisipkan (inserted) dan dihapus (deleted)');
3
  // statement return menggunakan tipe penanda default
4
  return true;
5
}

Auto Wrap (Pembungkusan Kata)#

Auto Wrap

Mengonfigurasi Auto Wrap per Blok#

1
// Contoh mengaktifkan pembungkusan kata (wrap)
2
function getLongString() {
3
  return 'Ini adalah string yang sangat panjang yang kemungkinan besar tidak akan muat di ruang yang tersedia kecuali kontainernya sangat lebar'
4
}

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

Mengonfigurasi Indentasi pada Wrap#

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 kontainernya sangat lebar'
4
}

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

Bagian yang Dapat Dilipat (Collapsible Sections)#

Collapsible Sections


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 terlihat secara default
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // Anda dapat memiliki beberapa bagian yang 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 kembali
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'Akhir dari contoh kode boilerplate' })

Nomor Baris#

Nomor Baris

Menampilkan Nomor Baris per 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, apakah Anda tahu saya di baris mana?')

Mengubah Nomor Baris Awal#

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

안녕하세요!