<code> vs <pre> vs <samp> untuk cuplikan kode inline dan blokir

335

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.

html semantic-markup Steve Bennett
sumber
3
Gunakan Google Chrome dan periksa blog Rick Strahl: weblog.west-wind.com/posts/2016/May/23/… lalu gunakan atribut stylesheet-nya. Cuplikan kodenya sangat bersih dan mudah disalin / dibaca.
JoshYates1980
1
<pre>dan perilakunya dapat diingat sebagai kata "pre cely"
snr

Jawaban:

351

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 " preelemen" :

Elemen pra mewakili blok teks yang telah diformat, di mana struktur diwakili oleh konvensi tipografi bukan oleh elemen.

Beberapa contoh kasus di mana elemen pra dapat digunakan:

  • Termasuk fragmen kode komputer, dengan struktur ditunjukkan sesuai dengan konvensi bahasa itu.

[...]

Untuk mewakili blok kode komputer, elemen pra dapat digunakan dengan elemen kode; untuk mewakili blok output komputer, elemen pra dapat digunakan dengan elemen samp. Demikian pula, elemen kbd dapat digunakan dalam elemen pra untuk menunjukkan teks yang akan dimasukkan pengguna.

Dalam cuplikan berikut, contoh kode komputer disajikan.

<p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>
Josh Lee
sumber
8
Ini mungkin cara yang tepat untuk pergi, tetapi saya masih berpikir itu bodoh. Para HTML-dev meramalkan perlunya sebuah <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.
mpen
11
Saya tidak setuju. Kebalikan dari teks yang diformat sebelumnya hanyalah teks lama biasa dalam dokumen Anda. Membuat <code>block-level dengan CSS itu tidak penting. Cara ini direkomendasikan dalam HTML5 .
Josh Lee
1
Masalah dengan <pre>itu memodifikasi pemrosesan spasi putih juga: semua ruang dipertahankan, dan pembungkus dimatikan. Kecuali ada cara untuk mematikan ini?
Steve Bennett
3
@Steve Bennett, dalam CSS 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.
srcspider
6
-1. Pertanyaan utama OP adalah tentang bagaimana menyelesaikan potongan blok yang membungkus. Anda telah membahas kode sebaris, juga kode blokir yang tidak boleh dibungkus, tetapi ini tidak menjawab pertanyaan utama OP.
Asad Saeeduddin
80

Sesuatu yang benar-benar saya lewatkan: perilaku non-pembungkus <pre>dapat dikontrol dengan CSS. Jadi ini memberikan hasil yang tepat yang saya cari:

code { 
    background: hsl(220, 80%, 90%); 
}

pre {
    white-space: pre-wrap;
    background: hsl(30,80%,90%);
}
Here's an example demonstrating the <code>&lt;code&gt;</code> tag.

<pre>
Here's a very long pre-formatted formatted using the &lt;pre&gt; tag. Notice how it wraps?  It goes on and on and on and on and on and on and on and on and on and on...
</pre>
Luaskan cuplikan

http://jsfiddle.net/9mCN7/

Steve Bennett
sumber
41

Secara pribadi saya akan menggunakan itu <code>karena itu semantik paling benar. Kemudian untuk membedakan antara kode sebaris dan blok, saya akan menambahkan kelas:

<code class="inlinecode"></code>

untuk kode sebaris atau:

<code class="codeblock"></code>

untuk blok kode. Tergantung mana yang kurang umum.

Slebetman
sumber
ya, aku juga mulai berpikir begitu. Saya memang meminta solusi tanpa kelas, tetapi sepertinya tidak ada yang bagus.
Steve Bennett
3
@Steve: Hal utama adalah mendefinisikan <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.
Slebetman
17

Untuk inline biasa <code>digunakan:

<code>...</code>

dan untuk masing-masing dan setiap tempat di mana diblokir <code>perlu digunakan

<code style="display:block; white-space:pre-wrap">...</code>

Atau, tentukan <codenza>tag untuk blok break lining <code> (tidak ada kelas)

<script>
</script>
<style>
  codenza, code {}     /*  noop mnemonic aide that codenza mimes code tag  */
  codenza {display:block;white-space:pre-wrap}
</style>`

Pengujian: (NB: berikut ini adalah scURIple yang menggunakan data:protokol / skema URI, oleh karena itu %0Akode format nl sangat penting untuk menjaga seperti ketika dipotong dan disisipkan ke dalam bilah URL untuk pengujian - jadi view-source:( ctrl- U) terlihat bagus sebelum setiap baris di bawah ini dengan %0A)

data:text/html;charset=utf-8,<html >
<script>document.write(window.navigator.userAgent)</script>
<script></script>
<style>
  codenza, code {}     /*  noop mnemonic aide that codenza mimes code tag  */
  codenza {display:block;white-space:pre-wrap}
</style>
<p>First using the usual &lt;code> tag
<code>
  %0A     function x(arghhh){ 
  %0A          return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
  %0A     }
</code>
and then 
<p>with the tag blocked using pre-wrapped lines
<code style=display:block;white-space:pre-wrap> 
  %0A     function x(arghhh){ 
  %0A          return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
  %0A     }
</code>
<br>using an ersatz tag
<codenza>
  %0A     function x(arghhh){ 
  %0A          return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
 %0A     }
</codenza>
</html>
ekim
sumber
14

Tampilkan kode HTML, apa adanya , menggunakan <xmp>tag (usang) :

<xmp>
<div>
  <input placeholder='write something' value='test'>
</div>
</xmp>
Luaskan cuplikan

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:

<textarea readonly rows="4" style="background:none; border:none; resize:none; outline:none; width:100%;">
<div>
  <input placeholder='write something' value='test'>
</div>
</textarea>
Luaskan cuplikan

vsync
sumber
Saya pasti kehilangan sesuatu, tetapi ternyata, ini adalah satu-satunya cara saya menemukan untuk menunjukkan kode HTML mentah (untuk tujuan debugging) di template WordPress / PHP ...
sphakka
@ sphakka (& vsync), Lihat jawaban saya di sini menyarankan penggunaan <textarea readonly>yang melakukan hal yang sama, adalah saat ini, dan memiliki kontrol lebih banyak jika Anda mau.
www-0av-Com
@ user1863152 - ini adalah penggunaan yang sangat buruk dari textarea IMHO karena kode tidak dapat disorot oleh skrip eksternal, seperti Prism misalnya. dan juga, itu tidak sesuai dengan tinggi dan lebar konten, seperti <xmp>halnya, atau blockelemen lain tidak .. saya tidak akan merekomendasikan ini sebagai solusi nyata, hanya sebagai yang teoretis.
vsync
@ vsync, ya itu kuda untuk kursus (& saya memberi Anda btw suara positif). Saya menggunakan textarea untuk kebutuhan saya. Saya mencoba xmp dan tidak dapat mengingat mengapa saya menemukan xmp tidak memuaskan untuk kebutuhan saya. Tentu saja statusnya yang sudah ketinggalan zaman tentu tidak mendukung. Saya menggunakan PRE ketika saya perlu menyorot dan CODE untuk penggunaan inline. Saya tidak bisa membayangkan bagaimana Prism menyoroti dalam XMP - beberapa sihir CSS?
www-0av-Com
Saya tidak terlalu yakin tentang ini. Ya, itu berfungsi, tetapi tidak digunakan lagi sejak 3.2 dan dihapus sepenuhnya dalam 5? Meskipun tidak banyak tag telah sepenuhnya dihapus dari browser -<blink> adalah salah satu contoh - saya akan cemas menggunakan ini untuk apa pun yang perlu bukti di masa depan.
spacer GIF
9

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> .

<textarea rows=5 cols=100 readonly>Example text with Newlines,
tabs & space,
  html tags etc <b>displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</textarea>
Luaskan cuplikan

Untuk membandingkan semua ...

<h2>Compared: TEXTAREA, XMP, PRE, SAMP, CODE</h2>
<p>Note that CSS can be used to override default fixed space fonts in each or all these.</p>
    
    
<textarea rows=5 cols=100 readonly>TEXTAREA: Example text with Newlines,
tabs & space,
  html tags etc <b>displayed natively</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;</textarea>

<xmp>XMP: Example text with Newlines,
tabs & space,
  html tags etc <b>displayed natively</b>.
    However, note that &amp; (&) will not act as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</xmp>

<pre>PRE: Example text with Newlines,
tabs & space,
  html tags etc <b>are interpreted, not displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</pre>

<samp>SAMP: Example text with Newlines,
tabs & space,
  html tags etc <b>are interpreted, not displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</samp>

<code>CODE: Example text with Newlines,
tabs & space,
  html tags etc <b>are interpreted, not displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</code>
Luaskan cuplikan

www-0av-Com
sumber