Situs saya akan memiliki beberapa kode sebaris ("ketika menggunakan foo()
fungsi ...") dan beberapa cuplikan blok. Ini cenderung XML, dan memiliki garis yang sangat panjang yang saya pilih untuk dibungkus oleh peramban (yaitu, saya tidak ingin menggunakan <pre>
). Saya juga ingin meletakkan pemformatan CSS pada potongan blok.
Tampaknya saya tidak dapat menggunakan <code>
keduanya, karena jika saya menempatkan atribut blok CSS di atasnya (dengan display: block;
), itu akan merusak potongan inline.
Saya ingin tahu apa yang dilakukan orang. Gunakan <code>
untuk blok, dan <samp>
untuk inline? Gunakan <code><blockquote>
atau yang serupa?
Saya ingin menjaga HTML yang sebenarnya sesederhana mungkin, menghindari kelas, karena pengguna lain akan memeliharanya.
sumber
<pre>
dan perilakunya dapat diingat sebagai kata "pre cely"Jawaban:
Gunakan
<code>
untuk kode sebaris yang dapat membungkus dan<pre><code>
untuk kode blok yang tidak boleh dibungkus.<samp>
adalah untuk output sampel , jadi saya akan menghindari menggunakannya untuk mewakili kode sampel (yang pembaca input ) Inilah yang dilakukan oleh Stack Overflow.(Lebih baik lagi, jika Anda ingin mudah dirawat, biarkan pengguna mengedit artikel sebagai penurunan harga, maka mereka tidak harus ingat untuk menggunakannya
<pre><code>
.)HTML5 setuju dengan ini di "
pre
elemen" :sumber
<code>
tag, tetapi memutuskan kami hanya akan menulis satu baris? Atau saya kira, karena mereka tidak ingin memiliki dua tag, satu blok dan satu inline? Namun ... apa yang salah dengan membuat<code>
level blok dengan CSS? Saya pikir kami seharusnya menulis HTML "semantik".<code>
baik dan semantik, tetapi<pre>
tidak terlalu banyak.<code>
block-level dengan CSS itu tidak penting. Cara ini direkomendasikan dalam HTML5 .<pre>
itu memodifikasi pemrosesan spasi putih juga: semua ruang dipertahankan, dan pembungkus dimatikan. Kecuali ada cara untuk mematikan ini?white-space: normal;
Meskipun saya gagal melihat mengapa Anda melakukan ini untuk kode. Juga<pre><code>
hal ini bodoh,<pre>
tag didefinisikan dengan sangat jelas dalam standar sebagai "kode komputer" (dan hal-hal lain) seperti yang disebutkan oleh @jleedev. Apakah itu karena menurut Anda<code>
nama yang lebih baik? maaf itu tidak membuatnya lebih semantik. Ada kasus serupa dengan tag<address>
, itu tidak benar-benar terdengar seperti "penulis", tetapi standar mengatakan itu untuk apa, jadi-ini.Sesuatu yang benar-benar saya lewatkan: perilaku non-pembungkus
<pre>
dapat dikontrol dengan CSS. Jadi ini memberikan hasil yang tepat yang saya cari:http://jsfiddle.net/9mCN7/
sumber
Secara pribadi saya akan menggunakan itu
<code>
karena itu semantik paling benar. Kemudian untuk membedakan antara kode sebaris dan blok, saya akan menambahkan kelas:untuk kode sebaris atau:
untuk blok kode. Tergantung mana yang kurang umum.
sumber
<code>
blok default tanpa kelas untuk kasus penggunaan yang paling umum. Maka siapa pun yang ingin melakukan hal yang tidak biasa hanya perlu menambahkan kelas. Melakukannya dengan cara lain masih akan meminta pengguna untuk mengetik ekstra. Dengan cara ini pengguna dapat menganggapnya sebagai menambahkan tag khusus daripada menggunakan struktur yang sama sekali berbeda.Untuk inline biasa
<code>
digunakan:dan untuk masing-masing dan setiap tempat di mana diblokir
<code>
perlu digunakanAtau, tentukan
<codenza>
tag untuk blok break lining<code>
(tidak ada kelas)Pengujian: (NB: berikut ini adalah scURIple yang menggunakan
data:
protokol / skema URI, oleh karena itu%0A
kode format nl sangat penting untuk menjaga seperti ketika dipotong dan disisipkan ke dalam bilah URL untuk pengujian - jadiview-source:
( ctrl- U) terlihat bagus sebelum setiap baris di bawah ini dengan%0A
)sumber
Tampilkan kode HTML, apa adanya , menggunakan
<xmp>
tag (usang) :Sangat menyedihkan bahwa tag ini sudah tidak digunakan lagi, tetapi masih berfungsi pada browser, ini adalah tag yang buruk. tidak perlu melarikan diri apa pun di dalamnya. Betapa sukacitanya!
Tampilkan kode HTML, apa adanya , menggunakan
<textarea>
tag:sumber
<textarea readonly>
yang melakukan hal yang sama, adalah saat ini, dan memiliki kontrol lebih banyak jika Anda mau.<xmp>
halnya, ataublock
elemen lain tidak .. saya tidak akan merekomendasikan ini sebagai solusi nyata, hanya sebagai yang teoretis.<blink>
adalah salah satu contoh - saya akan cemas menggunakan ini untuk apa pun yang perlu bukti di masa depan.Pertimbangkan TextArea
Orang-orang menemukan ini melalui Google dan mencari cara yang lebih baik untuk mengelola tampilan snippet mereka juga harus mempertimbangkan
<textarea>
yang memberikan banyak kontrol atas lebar / tinggi, menggulir dll. Memperhatikan bahwa @vsync menyebutkan tag yang sudah usang<xmp>
, saya menemukan<textarea readonly>
ini adalah pengganti yang sangat baik untuk menampilkan HTML tanpa perlu melepaskan diri dari apa pun di dalamnya (kecuali di mana</textarea>
mungkin muncul di dalamnya).Misalnya, untuk menampilkan satu baris dengan pembungkus garis yang dikontrol, pertimbangkan
<textarea rows=1 cols=100 readonly>
html Anda atau lainnya dengan karakter apa pun termasuk tab dan CrLf's</textarea>
.Untuk membandingkan semua ...
sumber
Pertimbangkan Prism.js: https://prismjs.com/#examples
Itu membuat
<pre><code>
pekerjaan dan menarik.sumber