Untuk menampilkan baris kode Markdown yang panjang secara utuh, pertahankan kode dan sesuaikan tampilannya. Panduan ini membantu pengguna Mac mendiagnosis contoh yang terpotong, mengaktifkan pembungkusan teks di Reading view Obsidian, dan memahami apa yang berlaku di GitHub.

Apa yang menentukan apakah baris kode dibungkus?

Blok kode berpagar mempertahankan kode sebagai konten literal. CommonMark menetapkan pagar pembuka dan penutup serta cara konten diuraikan; spesifikasi ini tidak menyediakan opsi portabel untuk membungkus baris panjang. Spesifikasi terkininya merujuk pada versi 0.31.2. Spesifikasi CommonMark, blok kode berpagar.

GitHub Flavored Markdown mengikuti aturan dasar blok berpagar yang sama. Spesifikasinya juga tidak mewajibkan instruksi pembungkusan dalam string info pagar. Karena itu, menambahkan wrap setelah nama bahasa tidak menetapkan perilaku pembungkusan yang portabel. Spesifikasi GFM yang diterbitkan menyebut dirinya sebagai versi 0.29-gfm; nomor versinya tidak boleh disamakan dengan versi CommonMark terkini. Spesifikasi GitHub Flavored Markdown.

Untuk tugas ini, bedakan tiga hasil berikut:

Hasil Tampilan bagi pembaca Apakah perlu mengubah sumber contoh?
Pembungkusan visual Satu baris sumber menempati beberapa baris tampilan Tidak
Pengguliran horizontal Baris memanjang melewati area yang terlihat, tetapi tetap dapat dijangkau Tidak
Pemisah baris manual Contoh berisi baris sumber tambahan Ya

Pilihan praktisnya adalah pembungkusan jika Anda ingin seluruh baris terlihat dalam panel, atau pengguliran jika mempertahankan perataan visual itu penting. Pemisah manual memerlukan pemeriksaan terpisah untuk memastikan contoh tetap bermakna sama.

Perbedaan antara sumber dan penyajian dinyatakan secara eksplisit dalam CSS: pemrosesan spasi memengaruhi perenderan tanpa mengubah data dokumen yang mendasarinya. Karena itu, pembungkusan visual merupakan titik awal yang berguna ketika contoh harus tetap dapat disalin sebagai satu baris. CSS Text Module Level 3.

Periksa dulu apakah contoh hilang atau hanya tidak terlihat

Sebelum mengedit perintah atau ekspresi yang panjang, periksa sumbernya. Di Obsidian, pilih Source mode menggunakan kontrol mode pengeditan. Untuk membandingkan dengan hasil render di Mac, gunakan Cmd+E untuk beralih antara mode pengeditan dan Reading view. Obsidian membedakan tampilan ini dari Live Preview, yang merupakan mode pengeditan. Tampilan dan mode pengeditan.

Gunakan pengujian sintetis ini di catatan terpisah. Salin Markdown bagian dalam, termasuk baris tiga backtick pembuka dan penutupnya. Kontennya sengaja berupa teks biasa, bukan perintah untuk dijalankan.

```text
BEGIN sample=amber notebook=desktop layout=wide description=This synthetic example contains a deliberately long line so you can check whether the final marker remains visible when the note pane becomes narrow END
```

Persempit panel catatan dan cari END. Jika muncul di baris lanjutan, pembungkusan berfungsi. Jika menggeser secara horizontal di dalam blok menampilkannya, konten dapat diakses melalui pengguliran. Jika tetap tidak dapat dijangkau, bandingkan blok hasil render dengan sumbernya sebelum menyimpulkan bahwa teks telah dihapus.

Pengujian ini memisahkan dua masalah yang memerlukan perbaikan berbeda: konten sumber yang tidak ada perlu dipulihkan, sedangkan konten yang ada tetapi tidak dapat dijangkau memerlukan penyesuaian tampilan. Biarkan pengujian tetap sama saat mencoba pengaturan agar Anda dapat mengetahui pengaturan mana yang menghasilkan perbaikan.

Periksa juga pagarnya. Pagar penutup harus menggunakan karakter yang sama dengan pagar pembuka dan memiliki jumlah karakter pagar setidaknya sebanyak pagar pembuka. Pagar yang cocok di dalam contoh dapat menutup blok terlalu dini. Spesifikasi CommonMark, blok kode berpagar. Saat mengajarkan sintaks Markdown, pagar luar yang terdiri dari empat backtick dapat menampilkan blok tiga backtick di dalamnya, seperti di atas. Membuat dan menyorot blok kode.

Beri catatan Obsidian lebih banyak ruang sebelum menambahkan CSS

Buka Settings → Editor, lalu cari Readable line length. Obsidian mendokumentasikan pengaturan ini sebagai pembatas panjang baris maksimum. Nonaktifkan sementara, lalu bandingkan catatan pengujian yang sama pada ukuran jendela yang sama. Ini adalah penyesuaian lebar; dokumentasi tidak menjelaskannya sebagai pengalih pembungkusan blok kode. Pengaturan.

Jika seluruh contoh kini muat, penyesuaian lebar mungkin sudah cukup untuk tata letak desktop Anda. Uji panel yang lebih sempit sebelum menetapkannya: ruang tambahan dalam satu susunan jendela tidak menjawab apakah baris tetap mudah dibaca dalam susunan lain.

Jangan mengubah Strict line breaks untuk mengatasi kode yang meluap. Obsidian mendokumentasikannya dalam kaitannya dengan pemisah baris Markdown, sedangkan kode berpagar diperlakukan sebagai konten literal. Pengaturan itu menangani masalah pemformatan yang berbeda. Pengaturan, Spesifikasi CommonMark, blok kode berpagar.

Bungkus baris kode panjang di Obsidian Reading view

Untuk catatan tertentu, gunakan mekanisme cuplikan CSS Obsidian yang terdokumentasi dan properti cssclasses. Berikut ini adalah kustomisasi orisinal yang dibuat berdasarkan mekanisme tersebut dan perilaku CSS standar. Kustomisasi ini ditujukan untuk blok berpagar biasa yang dirender dalam Reading view; ini bukan preset pembungkusan dari Obsidian atau konfigurasi mode editor. Cuplikan CSS.

Buat dan aktifkan cuplikan

  1. Buka Settings → Appearance → CSS snippets.
  2. Pilih Open snippets folder.
  3. Di editor teks biasa, buat wrap-code.css di folder tersebut dan simpan CSS di bawah ini.
  4. Kembali ke CSS snippets, pilih Reload snippets, lalu aktifkan wrap-code.

Ini adalah langkah pemasangan desktop yang didokumentasikan Obsidian. Setelah diaktifkan, perubahan cuplikan yang disimpan biasanya diterapkan secara otomatis. Cuplikan CSS.

.wrap-code pre,
.wrap-code pre code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

Tambahkan blok properti ini di awal catatan pengujian. Jika catatan sudah memiliki properti, tambahkan wrap-code ke nilai cssclasses yang sudah ada, alih-alih menyisipkan blok properti kedua.

---
cssclasses:
  - wrap-code
---

Obsidian mendokumentasikan cssclasses sebagai cara untuk menerapkan CSS khusus pada catatan tertentu. Di sini, .wrap-code membatasi aturan hanya untuk catatan tersebut; selektor lainnya menargetkan blok preformat yang dirender dan konten kodenya. Aturan ini tidak mengonfigurasi area pengeditan. Cuplikan CSS.

Pahami perubahan yang dibuat CSS

Deklarasi white-space: pre-wrap mempertahankan spasi dan pemisah baris sumber, sekaligus mengizinkan pembungkusan visual. Deklarasi overflow-wrap: anywhere juga mengizinkan string yang tidak dapat dipisahkan untuk dibungkus bila perlu, tanpa menyisipkan tanda hubung. Keduanya menangani baris panjang yang memiliki spasi maupun token panjang tanpa jeda. CSS Text Module Level 3, Properti CSS overflow-wrap.

Hindari mengganti dengan white-space: normal: nilai itu merapatkan spasi, yang dapat mengubah tampilan indentasi yang ingin Anda pertahankan. Selain itu, overflow-wrap saja tidak dapat mengatasi aturan spasi yang melarang pembungkusan. Properti CSS white-space, CSS Text Module Level 3.

Kembali ke Reading view, persempit panel, lalu periksa lagi END. Kemudian salin konten pengujian ke editor teks biasa dan bandingkan dengan aslinya. Hasil yang diharapkan adalah beberapa baris tampilan yang memuat satu baris sumber yang sama. Pemeriksaan salinan ini memverifikasi perilaku renderer dan tema yang terpasang pada Anda.

Perhatikan perbedaan antar-renderer

Kustomisasi tampilan Obsidian tidak menjadi bagian dari sintaks Markdown blok berpagar yang portabel. Saat memindahkan contoh ke tempat lain, uji tujuan tersebut secara terpisah. Gunakan perbandingan ini untuk menentukan apa yang perlu diperiksa:

Tujuan Yang dapat diandalkan Yang harus diverifikasi secara terpisah
Implementasi CommonMark Penguraian blok berpagar yang terdokumentasi Pembungkusan, pengguliran, dan lebar tampilan yang tersedia
Markdown yang dirender GitHub Pagar dan pengenal bahasa yang didokumentasikan GitHub Penyajian blok kode di tujuan sebenarnya
Obsidian Reading view Catatan yang dirender ditambah gaya lokal yang diaktifkan Apakah cuplikan berfungsi dengan tema saat ini
Obsidian Live Preview atau Source mode Mode pengeditan yang dipilih Penyajian editor; cuplikan di atas tidak mengonfigurasinya

Batas sintaks tersebut bersumber dari spesifikasi CommonMark, dokumentasi blok kode GitHub, dan dokumentasi tampilan Obsidian.

GitHub mendokumentasikan pengenal bahasa setelah pagar pembuka sebagai cara untuk mengaktifkan penyorotan sintaks. Karena itu, mengubah text ke pengenal bahasa lain bukanlah cara terdokumentasi untuk meminta pembungkusan. Pertahankan pengenal yang tepat untuk contoh tersebut dan atur perilaku tampilannya di renderer yang mengelolanya. Membuat dan menyorot blok kode.

Jika Anda tidak dapat mengendalikan penyajian di tujuan, pilih antara mempertahankan baris utuh dengan navigasi apa pun yang disediakan tujuan tersebut atau menulis ulang contoh menjadi baris sumber yang lebih pendek dan valid. Penulisan ulang itu harus mengikuti bahasa atau format contoh; pagar Markdown tidak dapat membuat baris baru sembarang menjadi valid.

Atasi masalah tanpa memangkas konten yang diperlukan

Jika aturan Obsidian tampaknya tidak berpengaruh, ikuti urutan ini:

  1. Pastikan Anda menguji di Reading view.
  2. Pastikan wrap-code.css muncul di CSS snippets dan diaktifkan.
  3. Pastikan cssclasses pada catatan memuat tepat wrap-code.
  4. Nonaktifkan lalu aktifkan kembali cuplikan sambil melihat catatan pengujian yang tidak diubah.
  5. Jika perlu, nonaktifkan sementara cuplikan lain dan bandingkan dengan tema default Obsidian untuk mengisolasi konflik gaya.
  6. Ulangi pengujian dengan contoh sebenarnya sebelum menganggap tugas selesai.

Anggap aturan selektor sebagai kustomisasi yang perlu diverifikasi pada instalasi Anda. Tema atau renderer blok khusus mungkin menggunakan gaya atau struktur yang berbeda. Jika pengujian pagar biasa berfungsi tetapi blok sebenarnya tidak, perbedaan itu merupakan bukti yang berguna: telusuri renderer blok sebenarnya alih-alih menambahkan pemisah baris secara membabi buta.

Untuk pemeriksaan akhir, pastikan karakter terakhir dapat dijangkau, indentasi tetap mudah dipahami, teks yang disalin sesuai dengan sumber yang dimaksud, dan contoh berfungsi dalam tampilan tempat contoh akan dibaca. Pertahankan sumber lengkap, pilih pembungkusan atau pengguliran dengan sengaja, dan uji setiap tujuan yang penting.

Sumber