<code> vs <pre> vs <samp> cho các đoạn mã nội tuyến và khối

335

Trang web của tôi sẽ có một số mã nội tuyến ("khi sử dụng foo()chức năng ...") và một số đoạn mã. Chúng có xu hướng là XML và có các dòng rất dài mà tôi thích trình duyệt hơn (nghĩa là tôi không muốn sử dụng <pre>). Tôi cũng muốn đặt định dạng CSS trên các đoạn mã khối.

Có vẻ như tôi không thể sử dụng <code>cho cả hai, vì nếu tôi đặt các thuộc tính khối CSS trên nó (với display: block;), nó sẽ phá vỡ các đoạn nội tuyến.

Tôi tò mò không biết mọi người làm gì. Sử dụng <code>cho các khối, và <samp>cho nội tuyến? Sử dụng <code><blockquote>hoặc một cái gì đó tương tự?

Tôi muốn giữ HTML thực tế đơn giản nhất có thể, tránh các lớp, vì những người dùng khác sẽ duy trì nó.

html  semantic-markup 
— Steve Bennett
nguồn
3
Sử dụng Google Chrome và kiểm tra blog của Rick Strahl: weblog.west-wind.com/posts/2016/May/23/ mẹo sau đó sử dụng các thuộc tính biểu định kiểu của anh ấy. Đoạn mã của anh ấy rất sạch sẽ và dễ dàng sao chép / đọc.
— JoshYates1980
1
<pre>và hành vi của nó có thể được giữ trong tâm trí như chữ “trước cisely”
— snr

Câu trả lời:

351

Sử dụng <code>cho mã nội tuyến có thể gói và <pre><code>cho mã khối không được bọc. <samp>là cho đầu ra mẫu , vì vậy tôi sẽ tránh sử dụng nó để thể hiện mã mẫu (mà trình đọc là đầu vào ). Đây là những gì Stack Overflow làm.

(Tốt hơn nữa, nếu bạn muốn dễ bảo trì, hãy để người dùng chỉnh sửa các bài viết dưới dạng Markdown, sau đó họ không phải nhớ sử dụng <pre><code>.)

HTML5 đồng ý với điều này trong “các preyếu tố” :

Phần tử pre đại diện cho một khối văn bản được định dạng sẵn, trong đó cấu trúc được thể hiện bằng các quy ước chính tả chứ không phải bởi các phần tử.

Một số ví dụ về trường hợp phần tử pre có thể được sử dụng:

  • Bao gồm các đoạn mã máy tính, với cấu trúc được chỉ định theo các quy ước của ngôn ngữ đó.

[Càng]

Để biểu diễn một khối mã máy tính, phần tử pre có thể được sử dụng với phần tử mã; để biểu diễn một khối đầu ra của máy tính, phần tử trước có thể được sử dụng với phần tử samp. Tương tự, phần tử kbd có thể được sử dụng trong phần tử pre để chỉ văn bản mà người dùng sẽ nhập.

Trong đoạn mã sau, một mẫu mã máy tính được trình bày.

<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
nguồn
8
Đây có thể là cách chính xác để đi, nhưng tôi vẫn nghĩ nó thật ngu ngốc. Các nhà phát triển HTML đã thấy trước sự cần thiết của một <code>thẻ, nhưng chúng tôi đã quyết định chỉ viết một dòng? Hoặc tôi đoán, vì họ không muốn có hai thẻ, một khối và một nội tuyến? Vẫn ... có gì sai khi tạo <code>block-level với CSS? Tôi nghĩ rằng chúng tôi đã phải viết HTML "ngữ nghĩa". <code>là tốt và ngữ nghĩa, nhưng <pre>không quá nhiều.
— mở
11
Tôi không đồng ý. Đối diện của văn bản được định dạng trước chỉ là văn bản cũ đơn giản trong tài liệu của bạn. Tạo <code>mức khối với CSS là không đáng kể. Cách này được khuyến nghị trong HTML5 .
— Josh Lee
1
Vấn đề <pre>là nó cũng sửa đổi xử lý khoảng trắng: tất cả các khoảng trắng được giữ nguyên và gói được tắt. Trừ khi có cách nào để tắt cái này?
— Steve Bennett
3
@Steve Bennett, trong CSS white-space: normal;Mặc dù tôi không biết lý do tại sao bạn sẽ làm điều này cho mã. Ngoài ra điều này <pre><code>là ngu ngốc, <pre>thẻ được xác định rất rõ ràng trong các tiêu chuẩn là "mã máy tính" (và những thứ khác) như được đề cập bởi @jleedev. Có phải bởi vì bạn nghĩ <code>là một cái tên tốt hơn? xin lỗi điều đó không làm cho nó có ngữ nghĩa hơn. Có một trường hợp tương tự với thẻ <address>, nó không thực sự giống như "tác giả", nhưng tiêu chuẩn nói rằng đó là những gì nó làm, vì vậy nó là.
— srcspider
6
-1. Câu hỏi trung tâm của OP là về cách thực hiện các đoạn mã gói. Bạn đã giải quyết mã nội tuyến, cũng như mã khối không được bọc, nhưng điều này không giải quyết được câu hỏi chính của OP.
— Asad Saeeduddin
80

Một cái gì đó tôi hoàn toàn bỏ lỡ: hành vi không bao bọc của <pre>có thể được kiểm soát bằng CSS. Vì vậy, điều này mang lại kết quả chính xác mà tôi đang tìm kiếm:

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>
Mở rộng đoạn trích

http://jsfiddle.net/9mCN7/

— Steve Bennett
nguồn
41

Cá nhân tôi sẽ sử dụng <code>vì đó là chính xác nhất về mặt ngữ nghĩa. Sau đó, để phân biệt giữa mã nội tuyến và mã khối, tôi sẽ thêm một lớp:

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

cho mã nội tuyến hoặc:

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

cho khối mã. Tùy thuộc vào đó là ít phổ biến hơn.

— người ngủ
nguồn
Vâng, tôi cũng bắt đầu nghĩ như vậy. Tôi đã yêu cầu một giải pháp mà không lớp học, nhưng có vẻ như không có một tốt nhất.
— Steve Bennett
3
@Steve: Điều quan trọng là xác định một mặc định <code>khối mà không có một lớp học cho các trường hợp sử dụng phổ biến nhất. Sau đó, bất cứ ai muốn làm điều hiếm chỉ cần thêm các lớp. Làm việc đó bất kỳ cách nào khác vẫn sẽ yêu cầu người dùng phải gõ thêm. Bằng cách này, người dùng có thể nghĩ về nó như thêm một thẻ đặc biệt hơn là sử dụng một cấu trúc hoàn toàn khác nhau.
— slebetman
17

Đối với <code>sử dụng nội tuyến bình thường :

<code>...</code>

và cho mỗi và mọi nơi <code>cần sử dụng

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

Ngoài ra, xác định một <codenza>thẻ để phá vỡ khối lót <code> (không có lớp)

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

Kiểm tra: (NB: sau đây là một scURIple sử dụng một data:giao thức URI / chương trình, do đó %0Amã định dạng nl là rất cần thiết trong việc giữ gìn như vậy khi cắt và dán vào thanh URL để thử nghiệm - vì vậy view-source:( ctrl- U) có vẻ tốt preceed mỗi dòng dưới đây với %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
nguồn
14

Hiện mã HTML, như-là , bằng cách sử dụng (lỗi thời) <xmp>tag:

<xmp>
<div>
  <input placeholder='write something' value='test'>
</div>
</xmp>
Mở rộng đoạn trích

Thật đáng buồn khi thẻ này đã bị phản đối, nhưng nó vẫn hoạt động trên các trình duyệt, nó là một thẻ ass-ass xấu. không cần phải thoát khỏi bất cứ điều gì bên trong nó Vui thế!

Hiện mã HTML, như-là , bằng cách sử dụng <textarea>thẻ:

<textarea readonly rows="4" style="background:none; border:none; resize:none; outline:none; width:100%;">
<div>
  <input placeholder='write something' value='test'>
</div>
</textarea>
Mở rộng đoạn trích

— vsync
nguồn
Tôi chắc chắn đang thiếu một cái gì đó, nhưng rõ ràng, đây là cách duy nhất tôi tìm thấy để hiển thị mã HTML thô (cho mục đích gỡ lỗi) trong các mẫu WordPress / PHP ...
— sphakka
@sphakka (& vsync), Xem câu trả lời của tôi ở đây gợi ý việc sử dụng <textarea readonly>tương tự, hiện tại và có nhiều quyền kiểm soát hơn nếu bạn muốn.
— www-0av-Com
@ user1863152 - đó là việc sử dụng IMHO textarea rất tệ vì mã không thể được làm nổi bật bởi tập lệnh bên ngoài, như Prism chẳng hạn. và ngoài ra, nó không phù hợp với chiều cao và chiều rộng của nội dung, giống như <xmp>, hoặc bất kỳ blockyếu tố nào khác .. tôi sẽ không đề xuất nó như một giải pháp thực sự, chỉ là một lý thuyết.
— vsync
@vsync, vâng, đó là ngựa cho các khóa học (& tôi đã cho bạn một btw upvote). Tôi sử dụng textarea cho nhu cầu của tôi. Tôi đã thử xmp và không thể nhớ tại sao tôi thấy xmp không thỏa mãn cho nhu cầu của tôi. Tất nhiên tình trạng không được chấp nhận của nó chắc chắn làm nản lòng. Tôi sử dụng PRE khi tôi cần tô sáng và CODE để sử dụng nội tuyến. Tôi không thể tưởng tượng Prism nổi bật như thế nào trong XMP - một số thuật sĩ CSS?
— www-0av-Com
Tôi không chắc lắm về điều này. Có, nó hoạt động, nhưng không dùng nữa từ 3.2 và loại bỏ hoàn toàn trong 5? Mặc dù không có nhiều thẻ đã bị xóa hoàn toàn khỏi trình duyệt - <blink>là một ví dụ - tôi sẽ lo lắng về việc sử dụng thẻ này cho bất kỳ điều gì cần phải được chứng minh trong tương lai.
— spacer GIF
9

Hãy xem xét TextArea

Mọi người tìm kiếm này qua Google và tìm kiếm một cách tốt hơn để quản lý việc hiển thị các đoạn của họ cũng nên xem xét <textarea>mang đến cho rất nhiều quyền kiểm soát chiều rộng / chiều cao, di chuyển, vv Ghi nhận @vsync đó đề cập đến thẻ NỮA <xmp>, tôi tìm thấy <textarea readonly>là một thay thế tuyệt vời để hiển thị HTML mà không cần phải thoát bất cứ thứ gì bên trong nó (ngoại trừ nơi</textarea> có thể xuất hiện bên trong).

Ví dụ: để hiển thị một dòng duy nhất với gói dòng được kiểm soát, hãy xem xét <textarea rows=1 cols=100 readonly> html hoặc vv của bạn với bất kỳ ký tự nào bao gồm các tab và 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>
Mở rộng đoạn trích

Để so sánh tất cả ...

<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>
Mở rộng đoạn trích

— www-0av-Com
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.