<code> vs <pre> vs <samp> สำหรับตัวอย่างข้อมูลอินไลน์และบล็อกรหัส

335

ไซต์ของฉันกำลังจะมีโค้ดอินไลน์ ("เมื่อใช้foo()ฟังก์ชัน ... ") และตัวอย่างโค้ดบางบล็อก สิ่งเหล่านี้มักจะเป็น XML และมีบรรทัดที่ยาวมากซึ่งฉันต้องการให้เบราว์เซอร์ตัดคำ (กล่าวคือฉันไม่ต้องการใช้<pre>) ฉันต้องการใส่การจัดรูปแบบ CSS ในตัวอย่างบล็อก

ดูเหมือนว่าฉันไม่สามารถใช้<code>กับทั้งคู่ได้เพราะถ้าฉันใส่ CSS block attribute ลงไป (ด้วยdisplay: block;) มันจะทำให้ตัวอย่างของ inline แตก

ฉันอยากรู้ว่าคนทำอะไร ใช้<code>สำหรับบล็อกและ<samp>สำหรับ inline? ใช้<code><blockquote>หรืออะไรที่คล้ายกัน?

ฉันต้องการทำให้ HTML ที่แท้จริงนั้นเรียบง่ายที่สุดเท่าที่จะเป็นไปได้หลีกเลี่ยงคลาสเนื่องจากผู้ใช้รายอื่นจะดูแลมัน

html  semantic-markup 
— สตีฟเบนเน็ตต์
แหล่งที่มา
3
ใช้ Google Chrome และตรวจสอบบล็อกของ Rick Strahl: weblog.west-wind.com/posts/2016/May/23/… จากนั้นใช้สไตล์ชีทของเขา ตัวอย่างโค้ดของเขานั้นสะอาดและง่ายต่อการคัดลอก / อ่าน
— JoshYates1980
1
<pre>และพฤติกรรมของมันจะถูกเก็บไว้ในใจเป็นคำว่า"pre cise"
— snr

คำตอบ:

351

ใช้<code>สำหรับรหัสแบบอินไลน์ที่สามารถตัดและ<pre><code>สำหรับรหัสบล็อกที่ต้องไม่ห่อ <samp>สำหรับเอาท์พุทตัวอย่างดังนั้นฉันจะหลีกเลี่ยงการใช้มันเพื่อเป็นตัวอย่างรหัส (ซึ่งผู้อ่านคือการป้อนข้อมูล ) นี่คือสิ่งที่ Stack Overflow ทำ

(ยังดีกว่าถ้าคุณต้องการบำรุงรักษาง่ายให้ผู้ใช้แก้ไขบทความเป็น Markdown แล้วพวกเขาไม่จำเป็นต้องใช้<pre><code>)

HTML5 เห็นด้วยกับสิ่งนี้ใน“ preองค์ประกอบ” :

องค์ประกอบก่อนหน้านี้แสดงถึงบล็อกของข้อความที่จัดรูปแบบไว้ล่วงหน้าซึ่งโครงสร้างจะถูกแสดงด้วยแบบแผนการพิมพ์มากกว่าที่จะเป็นองค์ประกอบ

ตัวอย่างบางกรณีที่สามารถใช้องค์ประกอบก่อนหน้าได้:

  • รวมถึงส่วนของรหัสคอมพิวเตอร์ด้วยโครงสร้างที่ระบุไว้ตามอนุสัญญาของภาษานั้น ๆ

[ ... ]

เพื่อเป็นตัวแทนบล็อกรหัสคอมพิวเตอร์องค์ประกอบก่อนสามารถใช้กับองค์ประกอบรหัส; เพื่อแสดงบล็อกของเอาต์พุตคอมพิวเตอร์องค์ประกอบก่อนสามารถใช้กับองค์ประกอบ samp ในทำนองเดียวกันองค์ประกอบ kbd สามารถใช้ภายในองค์ประกอบก่อนเพื่อระบุข้อความที่ผู้ใช้จะต้องป้อน

ในตัวอย่างต่อไปนี้จะแสดงตัวอย่างของรหัสคอมพิวเตอร์

<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
แหล่งที่มา
8
นี่อาจเป็นวิธีที่ถูกต้อง แต่ฉันก็ยังคิดว่ามันโง่ HTML-devs เล็งเห็นถึงความต้องการ<code>แท็ก แต่เราตัดสินใจว่าจะเขียนเพียงบรรทัดเดียวหรือไม่ หรือฉันเดาเพราะพวกเขาไม่ต้องการมีสองแท็กหนึ่งบล็อกและหนึ่งอินไลน์? ยัง ... มีอะไรผิดปกติกับการสร้าง<code>ระดับบล็อกด้วย CSS? ฉันคิดว่าเราควรจะเขียน "semantic" HTML <code>เป็นสิ่งที่ดีและมีความหมาย แต่<pre>ไม่มาก
— mpen
11
ฉันไม่เห็นด้วย. ตรงกันข้ามกับข้อความที่ฟอร์แมตแล้วเป็นเพียงข้อความเก่าในเอกสารของคุณ การสร้าง<code>ระดับบล็อกด้วย CSS นั้นไม่น่าตื่นเต้น วิธีนี้จะแนะนำใน HTML5
— Josh Lee
1
ปัญหา<pre>คือมันปรับเปลี่ยนการประมวลผลช่องว่างเช่นกัน: ช่องว่างทั้งหมดจะถูกเก็บไว้และปิดการห่อ หากไม่มีวิธีปิดการใช้งานนี้
— Steve Bennett
3
@Steve Bennett ใน CSS white-space: normal;แม้ว่าฉันจะไม่เห็นสาเหตุที่คุณจะทำเช่นนี้สำหรับรหัส <pre><code>สิ่งนี้เป็นสิ่งที่โง่<pre>แท็กถูกกำหนดไว้อย่างชัดเจนในมาตรฐานว่าเป็น "รหัสคอมพิวเตอร์" (และสิ่งอื่น ๆ ) ตามที่ระบุไว้โดย @jleedev เป็นเพราะคุณคิดว่า<code>เป็นชื่อที่ดีกว่า ขอโทษที่ไม่ได้ทำให้ความหมายมากขึ้น มีกรณีที่คล้ายกันกับแท็ก<address>มันไม่ได้ดูเหมือน "ผู้เขียน" แต่มาตรฐานบอกว่าเป็นสิ่งที่มันเป็นดังนั้นจึงเป็น
— srcspider
6
-1 คำถามหลักของ OP เกี่ยวกับวิธีการบล็อกตัวอย่างข้อมูลที่ห่อหุ้ม คุณได้ระบุรหัสแบบอินไลน์รวมถึงรหัสบล็อกที่ต้องไม่ล้อมรอบ แต่สิ่งนี้ไม่ได้ตอบคำถามหลักของ OP
— ซาด Saeeduddin
80

สิ่งที่ฉันพลาดไปอย่างสิ้นเชิง: พฤติกรรมที่ไม่ห่อของ<pre>สามารถควบคุมได้ด้วย CSS ดังนั้นนี่คือผลลัพธ์ที่แน่นอนที่ฉันต้องการ:

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>
ขยายตัวอย่างข้อมูล

http://jsfiddle.net/9mCN7/

— สตีฟเบนเน็ตต์
แหล่งที่มา
41

โดยส่วนตัวแล้วฉันจะใช้<code>เพราะนั่นเป็นความหมายที่ถูกที่สุด จากนั้นเพื่อแยกความแตกต่างระหว่างโค้ดอินไลน์และบล็อคฉันต้องการเพิ่มคลาส:

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

สำหรับรหัสแบบอินไลน์หรือ:

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

สำหรับรหัสบล็อก ขึ้นอยู่กับว่าเป็นเรื่องธรรมดาน้อย

— slebetman
แหล่งที่มา
ใช่ฉันเริ่มคิดเช่นกัน ฉันขอวิธีแก้ปัญหาโดยไม่ต้องเรียน แต่ดูเหมือนว่าจะไม่มีวิธีที่ดี
— Steve Bennett
3
@ Steve: สิ่งสำคัญคือการกำหนด<code>บล็อกเริ่มต้นโดยไม่ต้องเรียนสำหรับกรณีที่ใช้กันมากที่สุด จากนั้นใครก็ตามที่ต้องการทำสิ่งที่ผิดปกติจะต้องเพิ่มชั้นเรียนเท่านั้น การทำวิธีอื่นใดจะยังคงขอให้ผู้ใช้พิมพ์พิเศษ วิธีนี้ผู้ใช้สามารถคิดได้ว่าเป็นการเพิ่มแท็กพิเศษแทนที่จะใช้โครงสร้างที่แตกต่างอย่างสิ้นเชิง
— slebetman
17

สำหรับการ<code>ใช้งานแบบอินไลน์ปกติ:

<code>...</code>

และสำหรับแต่ละสถานที่ที่<code>มีการใช้งานที่จำเป็นต้องมีการปิดกั้น

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

หรือกำหนด<codenza>แท็กสำหรับบล็อกการแบ่งซับ<code> (ไม่มีคลาส)

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

การทดสอบ: (NB: ต่อไปนี้เป็น scuriple ใช้data:โปรโตคอล / โครงการ URI ดังนั้น%0Aรหัสรูปแบบ nl มีความสำคัญในการรักษาเช่นเมื่อตัดและวางลงในแถบ URL สำหรับการทดสอบ - ดังนั้นview-source:( ctrl- U) ดูดีทุกบรรทัดด้านล่างด้วย%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
แหล่งที่มา
14

แสดงรหัส HTML ตามที่เป็นอยู่โดยใช้<xmp>แท็ก(ล้าสมัย) :

<xmp>
<div>
  <input placeholder='write something' value='test'>
</div>
</xmp>
ขยายตัวอย่างข้อมูล

มันเศร้ามากที่แท็กนี้เลิกใช้แล้วแต่มันยังคงใช้งานได้บนเบราว์เซอร์มันเป็นแท็กที่ไม่ดี ไม่จำเป็นต้องหลบหนีอะไรข้างในเลย ช่างน่ายินดีจริงๆ!

แสดงรหัส HTML ตามที่เป็นอยู่โดยใช้<textarea>แท็ก:

<textarea readonly rows="4" style="background:none; border:none; resize:none; outline:none; width:100%;">
<div>
  <input placeholder='write something' value='test'>
</div>
</textarea>
ขยายตัวอย่างข้อมูล

— vSync
แหล่งที่มา
ฉันขาดอะไรบางอย่าง แต่เห็นได้ชัดว่านี่เป็นเพียงวิธีเดียวที่ฉันค้นพบวิธีแสดงรหัส HTML แบบดิบ (เพื่อจุดประสงค์ในการดีบัก) ในแม่แบบ WordPress / PHP ...
— sphakka
@sphakka (& vsync), ดูคำตอบของฉันที่นี่แนะนำการใช้<textarea readonly>สิ่งที่เหมือนกันเป็นปัจจุบันและมีการควบคุมมากขึ้นถ้าคุณต้องการ
— www-0av-Com
@ user1863152 - เป็นการใช้งาน textarea IMHO ที่แย่มากเนื่องจากโค้ดภายนอกไม่สามารถถูกเน้นด้วยสคริปต์ภายนอกเช่นPrismตัวอย่างเช่น และมันไม่เหมาะกับความสูงและความกว้างของเนื้อหาเช่น<xmp>นั้นหรือblockองค์ประกอบอื่นใดที่ทำ .. ฉันไม่แนะนำให้ใช้เป็นวิธีแก้ปัญหาที่แท้จริง แต่เป็นเพียงทฤษฎีเท่านั้น
— vsync
@vsync ใช่มันเป็นม้าสำหรับหลักสูตร (& ฉันให้ upvote btw) ฉันใช้ textarea สำหรับความต้องการของฉัน ฉันลอง xmp และจำไม่ได้ว่าทำไมฉันถึงพบว่า xmp ไม่น่าพอใจสำหรับความต้องการของฉัน แน่นอนว่าสถานะที่ไม่แน่นอนของมันทำให้หมดกำลังใจอย่างแน่นอน ฉันใช้ PRE เมื่อฉันต้องการไฮไลต์และ CODE สำหรับการใช้แบบอินไลน์ ฉันนึกภาพไม่ออกว่าปริซึมเน้นใน XMP - ตัวช่วยสร้าง CSS ได้อย่างไร
— www-0av-Com
ฉันไม่แน่ใจเกี่ยวกับสิ่งนี้มากเกินไป ใช่มันใช้งานได้ แต่เลิกใช้ตั้งแต่ 3.2 และลบออกอย่างสมบูรณ์ใน 5? ในขณะที่มีแท็กไม่กี่แห่งที่ถูกลบออกจากเบราว์เซอร์อย่างสมบูรณ์ - <blink>เป็นตัวอย่างหนึ่ง - ฉันจะกังวลเกี่ยวกับการใช้สิ่งนี้เพื่อพิสูจน์สิ่งที่จะเกิดขึ้นในอนาคต
— ตัว
9

พิจารณา TextArea

คนหานี้ผ่านทาง Google และกำลังมองหาวิธีที่ดีกว่าในการจัดการการแสดงผลของเกร็ดเล็กเกร็ดน้อยของพวกเขาควรพิจารณา<textarea>ซึ่งจะช่วยให้จำนวนมากของการควบคุมความกว้าง / ความสูงเลื่อน ฯลฯ สังเกต @vsync ที่กล่าวถึงแท็กเลิก<xmp>ผมพบ<textarea readonly>เป็นตัวแทนที่ดีเยี่ยม สำหรับการแสดง HTML โดยไม่จำเป็นต้องหลบสิ่งใด ๆ ข้างใน (ยกเว้นที่</textarea>อาจปรากฏอยู่ข้างใน)

ตัวอย่างเช่นการแสดงบรรทัดเดียวกับการตัดบรรทัดควบคุมพิจารณา<textarea rows=1 cols=100 readonly> html หรืออื่น ๆ ของคุณด้วยตัวอักษรใด ๆ รวมทั้งแท็บและ </textarea>CRLF

<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>
ขยายตัวอย่างข้อมูล

เพื่อเปรียบเทียบทั้งหมด ...

<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>
ขยายตัวอย่างข้อมูล

— www-0av-Com
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.