Untuk $ atau Tidak ke $: Menampilkan Cuplikan Kode Terminal

Sangat populer untuk meletakkan $ pada baris yang dimaksudkan sebagai perintah dalam dokumentasi kode yang melibatkan terminal (yaitu baris perintah).

Seperti ini:

 $ brew install somepackage

Intinya adalah bahwa itu meniru Prompt yang Anda (mungkin) lihat di baris perintah Anda. Ini milik saya:

Jadi tanda dolar ( $ ) adalah teknik kecil yang digunakan orang untuk menunjukkan baris kode ini seharusnya dijalankan pada baris perintah .

Masalah kecil

Masalahnya adalah saya (dan saya akan bertaruh sebagian besar orang lain juga) akan menyalin dan menempelkan perintah seperti itu dari dokumentasi itu.

Jika saya menjalankan perintah di atas di terminal saya persis seperti yang tertulis …

tidak berhasil . $ bukan perintah. Bagaimana Anda menangani ini? Anda hanya perlu tahu. Anda hanya perlu memiliki masalah ini sebelumnya dan entah bagaimana mengetahui bahwa apa yang sebenarnya dikatakan oleh dokumentasi kepada Anda adalah menjalankan perintah brew install somepackage (tanpa tanda dolar) di baris perintah.

Saya katakan masalah kecil karena ada banyak hal seperti ini di setiap pekerjaan di dunia. Ketika saya meletakkan sesuatu seperti font-size: 2.2rem di sebuah posting blog, saya juga tidak mengatakan, “Letakkan deklarasi itu dalam sebuah aturan dalam file CSS yang ditautkan oleh file HTML Anda.” Anda hanya perlu mengetahui hal-hal itu.

Memperbaikinya dengan CSS

Fakta bahwa ini hanya masalah kecil dan teknologi sarat dengan hal-hal yang hanya perlu Anda ketahui tidak berarti bahwa kami tidak dapat mencoba memperbaikinya dan melakukan sedikit lebih baik.

Ide untuk posting ini datang dari tweet ini yang mendapat lebih banyak suka daripada yang saya kira:

Untuk memperluasnya, saya berharap Anda mungkin menandai dokumen Anda seperti:

 <p>Install package like:</p> <pre><code class="command">brew install package</code></pre>

Sekarang Anda dapat memasukkan $ sebagai elemen semu daripada sebagai teks sebenarnya:

 code.command::before { content: "$ "; }

Sekarang Anda tidak hanya menyimpan sendiri karakter dalam HTML, $ tidak dapat dipilih, karena begitulah cara kerja elemen semu . Jadi sekarang Anda sekarang sedikit lebih baik di departemen UX. Bahkan jika pengguna mengklik dua kali baris atau mencoba untuk memilih semua itu, mereka tidak akan mendapatkan $ mengacaukan copy-paste.

Semoga mereka tidak sama frustrasinya karena tidak dapat menyalin $ . 😬

Jadi, bagaimanapun, sesuatu seperti desain luar biasa ini oleh saya:

Memperbaikinya dengan teks

Banyak dokumentasi untuk hal-hal kode ada di tempat repo git publik seperti GitHub. Anda tidak memiliki akses ke CSS untuk menata tampilan GitHub, jadi meskipun ada tipu daya yang tersedia , Anda tidak bisa begitu saja memasukkan sebaris CSS di sana untuk menata sesuatu.

Kita mungkin harus ( terkesiap ) menggunakan kata-kata kita:

 <p> Install the package by entering this command at your terminal: </p> <kbd class="command">brew install package</kbd>

Pikiran lain

  • Anda mungkin tidak akan repot-repot menyorot sintaks sama sekali. Saya rasa saya belum pernah melihat terminal yang sintaksnya menyoroti perintah saat Anda memasukkannya.
  • Eric Meyer menyarankan elemen <kbd> yang merupakan elemen Input Keyboard. Aku suka itu. Saya sudah lama menggunakan <code> tapi saya pikir <kbd> lebih tepat di sini.
  • Tim Chase menyarankan untuk menggunakan <span> dan menyertakan prompt dalam HTML sehingga Anda dapat menatanya secara unik jika Anda mau, termasuk membuatnya tidak dapat dipilih dengan user-select: none; .
  • Justin Searls memiliki trik dotfiles di mana jika Anda tidak sengaja menyalin/menempel $ , itu hanya mengabaikannya dan menjalankan semuanya setelahnya.
  • Jackson Bates menyarankan untuk sangat berhati -hati dengan apa yang Anda salin dan tempel ke terminal.
  • Saya mengetahui bahwa $ juga merupakan cara untuk menunjukkan perintah "tidak memiliki hak istimewa" sementara # adalah untuk perintah root . Sebagian dari alasan itu adalah jika Anda menyalin-menempelkan perintah root, perintah itu tidak akan berjalan karena akan dikenali sebagai komentar.

Posting To $ or Not to $: Menampilkan Cuplikan Kode Terminal muncul pertama kali di CSS-Tricks .

Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP .

May 28, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *