Satır içi ve blok kod parçacıkları için <code> vs <pre> vs <samp>

335

Sitem bazı satır içi kodlara (" foo()işlevi kullanılırken ...") ve bazı blok snippet'lere sahip olacak. Bunlar XML olma eğilimindedir ve tarayıcının sarmasını tercih ettiğim çok uzun satırlara sahiptir (yani, kullanmak istemiyorum <pre>). Ayrıca blok snippet'lerine CSS biçimlendirmesi koymak istiyorum.

Her <code>ikisi için de kullanamıyorum , çünkü eğer CSS blok niteliklerini (ile display: block;) koyarsam , satır içi snippet'leri kıracaktır.

İnsanların ne yaptığını merak ediyorum. <code>Bloklar ve <samp>satır içi için kullanın ? Kullan <code><blockquote>ya da benzer bir şey?

Gerçek HTML'yi olabildiğince basit tutmak, sınıflardan kaçınmak gibi, diğer kullanıcılar bunu koruyacaktır.

html  semantic-markup 
— Steve Bennett
kaynak
3
Google Chrome'u kullanın ve Rick Strahl'in blogunu inceleyin: weblog.west-wind.com/posts/2016/May/23/… daha sonra stil sayfası özelliklerini kullanın. Kod parçacıkları çok temiz ve kopyalanması / okunması kolaydır.
— JoshYates1980
1
<pre>ve davranışı, "önceden cisely"
— snr

Yanıtlar:

351

<code>Sarılabilen satır içi kod ve <pre><code>sarılmaması gereken blok kodu için kullanın . <samp>örnek için çıkış I (okuyucu olan örnek kodunu temsil etmek kullanmaktan kaçınmak bu yüzden, giriş ). Yığın Taşması bunu yapar.

(Daha da iyisi, bakımını yapmak istiyorsanız, kullanıcıların makaleleri Markdown olarak düzenlemesine izin verin, o zaman kullanmayı hatırlamaları gerekmez <pre><code>.)

HTML5 bunu “ preöğe” de kabul eder :

Ön eleman, yapının elemanlar yerine tipografik kurallarla temsil edildiği, önceden biçimlendirilmiş bir metin bloğunu temsil eder.

Ön elemanın kullanılabileceği durumlara bazı örnekler:

  • Bilgisayar kodunun parçaları dahil, bu dilin kurallarına göre gösterilen yapı.

[...]

Bir bilgisayar kodu bloğunu temsil etmek için, ön eleman bir kod elemanıyla kullanılabilir; bir bilgisayar çıkış bloğunu temsil etmek için ön eleman, bir numune eleman ile kullanılabilir. Benzer şekilde, kbd elemanı, kullanıcının gireceği metni belirtmek için bir ön eleman içinde kullanılabilir.

Aşağıdaki snippet'te bir bilgisayar kodu örneği sunulmuştur.

<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
kaynak
8
Bu doğru bir yol olabilir, ama hala aptal olduğunu düşünüyorum. HTML geliştiricileri bir <code>etiket ihtiyacını öngördü , ancak yalnızca bir satır yazmaya karar verdik mi? Ya da sanırım, çünkü bir blok ve bir satır içi olmak üzere iki etiket istemiyorlardı? Yine de ... <code>CSS ile blok düzeyinde olmanın nesi yanlış ? "Semantik" HTML yazmamız gerektiğini düşündüm. <code>iyi ve anlamsal, ama <pre>çok fazla değil.
— 43'te mpen
11
Katılmıyorum. Önceden biçimlendirilmiş metnin tersi, belgenizdeki düz eski metindir. Yapımı <code>CSS ile blok düzeyinde unsemantic olduğunu. Bu yol HTML5'te önerilir .
— Josh Lee
1
Sorun, <pre>boşluk işleme işlemini de değiştirmesidir: tüm boşluklar korunur ve sarma kapatılır. Bunu kapatmanın bir yolu yoksa?
— Steve Bennett
3
@Steve Bennett, CSS'de white-space: normal;Neden kod için bunu yapacağınızı göremiyorum. Ayrıca bu <pre><code>şey aptalca, <pre>etiket @jleedev tarafından belirtildiği gibi standartlarda "bilgisayar kodu" (ve diğer şeyler) olarak çok açık bir şekilde tanımlanmıştır. <code>Daha iyi bir isim olduğunu düşündüğünüz için mi? Üzgünüm, bu daha anlamsal değil. Etiketi ile benzer bir durum var, <address>gerçekten "yazar" gibi görünmüyor, ancak standart bunun için olduğunu söylüyor, bu yüzden öyle.
— srcspider
6
-1. OP'nin asıl sorusu, saran blok parçacıklarının nasıl gerçekleştirileceği ile ilgiliydi. Sen gerekir satır içi kod yanı sıra blok kodunu giderebildiysek değil sarın, ama bu OP'ın birincil sorusunu sormaz.
— Asad Saeeduddin
80

Tamamen özlediğim bir şey: sarma olmayan davranış <pre>CSS ile kontrol edilebilir. Bu, aradığım tam sonucu verir:

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>
Snippet'i genişlet

http://jsfiddle.net/9mCN7/

— Steve Bennett
kaynak
41

Şahsen kullanırım <code>çünkü bu en anlamsal olarak doğrudur. Sonra satır içi ve blok kodu arasında ayrım yapmak için ben de bir sınıf eklemek istiyorum:

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

satır içi kod veya:

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

kod bloğu için. Hangisine bağlı olarak daha az yaygındır.

— slebetman
kaynak
Evet, ben de öyle düşünmeye başlıyorum. Sınıfsız bir çözüm istedim, ama iyi bir çözüm yok gibi görünüyor.
— Steve Bennett
3
@Steve: Ana şey, <code>en yaygın kullanım durumu için sınıfsız bir varsayılan blok tanımlamaktır . O zaman nadir bir şey yapmak isteyen herkes sadece sınıfı eklemelidir. Başka bir şekilde yapmak yine de kullanıcıdan fazladan yazmasını ister. Bu şekilde kullanıcı bunu tamamen farklı bir yapı kullanmak yerine özel bir etiket eklemek olarak düşünebilir.
— slebetman
17

Normal sıralı <code>kullanım için:

<code>...</code>

ve engellenen her yer <code>için

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

Alternatif olarak, <codenza>astar astar bloğu için bir etiket tanımlayın <code> (sınıf yok)

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

Test: (Not: aşağıdaki, bir data:URI protokolü / şeması kullanan bir scurIple'dir , bu nedenle %0Anl format kodları, test edilmek üzere URL çubuğuna kesilip yapıştırıldığında bu şekilde korunmada önemlidir - bu nedenle view-source:( ctrl- U) aşağıdaki her satırda iyi görünür %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
kaynak
14

HTML kodunu olduğu gibi (eski) <xmp>etiketini kullanarak göster :

<xmp>
<div>
  <input placeholder='write something' value='test'>
</div>
</xmp>
Snippet'i genişlet

Bu etiketin kullanımdan kaldırılması çok üzücü, ancak yine de tarayıcılarda çalışıyor, kötü bir etiket. içinde hiçbir şeyden kaçmaya gerek yok. Ne büyük sevinç!

HTML kodunu olduğu gibi şu<textarea> etiketi kullanarak gösterin :

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

— vsync
kaynak
Kesinlikle bir şey eksik, ama görünüşe göre, bu sadece WordPress / PHP şablonları ham HTML kodu (hata ayıklama amacıyla) göstermenin yolu bulundu ...
— sphakka
@sphakka (& vsync), <textarea readonly>Aynı şeyi yapan, güncel olan ve isterseniz daha fazla kontrole sahip olduğunu öneren cevabımı burada görebilirsiniz .
— www-0av-Com
@ user1863152 - kod örneğin Prism gibi harici komut dosyası tarafından vurgulanamadığından, bir textarea IMHO'sunun çok kötü kullanımı . ve aynı zamanda, içeriğin yüksekliğine ve genişliğine <xmp>uymuyor, ya da başka bir blockelemanın yaptığı gibi .. bunu gerçek bir çözüm olarak tavsiye etmem, sadece teorik olarak.
— vsync
@vsync, evet kurslar için atlar (& ben size bir upvote btw verdi). İhtiyaçlarım için textarea kullanıyorum. Ben xmp denedim ve neden xmp benim ihtiyaçları için tatmin edici buldum hatırlamıyorum. Elbette, kullanımdan kaldırılmış statüsü kesinlikle cesaretini kırıyor. Satır içi kullanım için Vurgulama ve KODLAMA gerektiğinde PRE kullanıyorum. Prism'in bir XMP - bazı CSS sihirbazlığında nasıl vurgulandığını hayal edemiyorum?
— www-0av-Com
Bundan pek emin değilim. Evet, çalışıyor, ancak 3.2'den beri kullanımdan kaldırıldı ve 5'te tamamen kaldırıldı mı? Tarayıcılardan çok sayıda etiket tamamen kaldırılmamış olsa da - <blink>bir örnek - bunu geleceğe dönük olması gereken herhangi bir şey için kullanma konusunda endişeli olurum.
— spacer GIF
9

TextArea'yı düşünün

Google üzerinden bu bulgu ve ayrıca düşünmelisiniz kendi snippet'lerinin görüntüsünü yönetmek için daha iyi bir yol arıyoruz İnsanlar <textarea>vb kaydırma o @vsync kaldırılan etiketi söz kaydeden genişlik / yükseklik boyunca geniş bir denetim veren <xmp>, ben bulmak <textarea readonly>mükemmel bir alternatiftir içindeki herhangi bir şeyden kaçmaya gerek kalmadan HTML görüntülemek için (nerede hariç)</textarea> içinde görünebilecek ).

Örneğin, kontrollü satır kaydırmalı tek bir satır görüntülemek için, <textarea rows=1 cols=100 readonly> sekmeler ve CrLf'ler de dahil olmak üzere herhangi bir karakterle html veya vb </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>
Snippet'i genişlet

Tümünü karşılaştırmak için ...

<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>
Snippet'i genişlet

— www-0av-Com
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.