<code> vs <pre> vs <samp>(インラインおよびブロックコードスニペット)


335

私のサイトには、いくつかのインラインコード( " foo()関数を使用する場合...")といくつかのブロックスニペットがあります。これらはXMLになりがちで、非常に長い行が含まれているため、ブラウザーで折り返します(つまり、使用したくない<pre>)。また、ブロックスニペットにCSS書式を設定したいと思います。

<code>CSSブロック属性を(を使用してdisplay: block;)配置すると、インラインスニペットが破損するため、両方を使用することはできないようです。

私は人々が何をしているのか知りたいです。<code>ブロックと<samp>インラインに使用しますか?使用<code><blockquote>または同様のもの?

他のユーザーがHTMLを保守するため、実際のHTMLはできるだけシンプルにして、クラスは避けたいと思います。


3
Google Chromeを使用して、Rick Strahlのブログを調べます: weblog.west-wind.com/posts/2016/May/23/… 次に、彼のスタイルシート属性を使用します。彼のコードスニペットは非常にクリーンで、コピー/読み取りが簡単です。
JoshYates1980

1
<pre>そしてその行動は言葉として念頭に置くことができる「事前 cisely」
SNR

回答:


351

<code>ラップできるインラインコードとラップし<pre><code>てはならないブロックコードに使用します。<samp>はサンプル出力用なので、サンプルコード(リーダーが入力するコード)を表すために使用することは避けます。これはスタックオーバーフローが行うことです。

(さらに良いことに、メンテナンスを簡単にしたい場合は、ユーザーがMarkdownとして記事を編集できるようにすれば、ユーザーがを使用することを覚えておく必要がなくなります<pre><code>。)

HTML5は、「the preelement」でこれに同意します。

pre要素は、事前にフォーマットされたテキストのブロックを表します。その構造は、要素ではなく表記上の規則によって表されます。

pre要素を使用できるケースの例:

  • コンピューターコードのフラグメントを含み、その言語の規則に従って構造が示されている。

[…]

コンピュータコードのブロックを表すには、pre要素をcode要素と共に使用できます。コンピュータ出力のブロックを表すために、pre要素をsamp要素と共に使用できます。同様に、kbd要素をpre要素内で使用して、ユーザーが入力するテキストを示すことができます。

次のスニペットでは、コンピューターコードのサンプルを示しています。

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

8
これは正しい方法かもしれませんが、それでも愚かだと思います。HTML開発者は<code>タグの必要性を予測していましたが、これまで1行しか記述しないことに決めましたか?または、私は彼らが2つのタグ、1つのブロックと1つのインラインを持つことを望まなかったので、そうでしょうか それでも... <code>CSSでブロックレベルにすることの何が問題になっていますか?「セマンティック」なHTMLを書くことになっていると思いました。<code>良い意味論ですが<pre>、それほど多くはありません。
mpen 2011年

11
同意しません。書式設定済みのテキストの反対は、ドキュメント内の単純な古いテキストです。<code>CSS を使用してブロックレベルにするのは意味がありません。この方法はHTML5推奨されています
ジョシュリー

1
問題<pre>は、空白処理も変更することです。すべてのスペースが保持され、折り返しがオフになります。これをオフにする方法がない限り?
Steve Bennett、

3
@Steve Bennett、CSS white-space: normal;なぜコードでこれを行うのかわかりません。また、これ<pre><code>は愚かです。<pre>タグは、@ jleedevで言及されているように、「コンピュータコード」などの標準として非常に明確に定義されています。それはあなた<code>がより良い名前だと思うからですか?意味がわからなくてすみません。タグ<address>にも同様のケースがあり、実際には「著者」のようには聞こえませんが、標準ではそれが目的であると記載されているので、そうです。
srcspider、2011

6
-1。OPの中心的な質問は、ラップするブロックスニペットを実現する方法に関するものでした。インラインコードと、ラップしてはならないブロックコードに対処しましたが、これはOPの主要な質問には対応していません。
Asad Saeeduddin 2013年

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>

コードブロック用。どちらが一般的でないかに応じて。


ええ、私もそう思い始めています。私はクラスのない解決策を求めましたが、良い解決策はないようです。
Steve Bennett

3
@Steve:<code>最も重要なのは、最も一般的な使用例のクラスなしでデフォルトブロックを定義することです。次に、珍しいことをしたい人は、クラスを追加するだけで済みます。他の方法でそれを行うと、ユーザーに余分な入力を求めることになります。このように、ユーザーは完全に異なる構造を使用するのではなく、特別なタグを追加すると考えることができます。
slebetman、2011年

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

テスト:(注意:以下は利用scURIpleありdata:、したがって、URIプロトコル/スキームを%0ANLフォーマットコードがある不可欠な保存で、このような時にカットし、テストするためのURLバーに貼り付け-そうview-source:ctrl- U)は良いがpreceedに見えるすべてのと下の行を%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>

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>


私は間違いなく何かを見逃していますが、どうやら、これは、WordPress / PHPテンプレートで生のHTMLコード(デバッグ目的)を表示する唯一の方法です
sphakka

@sphakka(&vsync)、<textarea readonly>同じことを行う使用を示唆しているここの私の答えを参照してください、最新であり、必要に応じてはるかに制御できます。
www-0av-Com 2018

@ user1863152- Prismなどの外部スクリプトでコードを強調表示できないため、textarea IMHOを使用するのは非常に不適切です。また、コンテンツの高さや幅とは異なり、<xmp>他のblock要素とは異なります。実際のソリューションとしてはお勧めしません。理論上のソリューションとしてのみお勧めします。
vsync 2018年

@vsync、はい、コースの馬です(そして私はあなたに賛成投票しました)。私は必要に応じてtextareaを使用します。私はxmpを試してみましたが、なぜxmpが自分のニーズに不十分であるかを思い出せません。もちろん、その非推奨のステータスは確かに落胆します。インラインで使用するために強調表示してコーディングする必要がある場合は、PREを使用します。PrismがXMP内でどのようにハイライト表示されるか想像できません-一部のCSSウィザード?
www-0av-Com 2018

これについてはあまりよくわかりません。はい、機能しますが、3.2から廃止され、5で完全に削除されましたか?ブラウザーから完全に削除されたタグはそれほど多くありません<blink>が(1つの例です)、将来を見据えたものにする必要があるものにこれを使用することを切望しています。
スペーサーGIF

9

TextAreaを検討する

グーグル経由でこれを発見し、そのスニペットの表示を管理するためのより良い方法を探していることも考慮しなければならない人々<textarea>の幅/高さを制御の多くを与える、スクロールなど@vsyncは非推奨タグを言及したことに注目し<xmp>、私は見つける<textarea readonly>優れた代替品です内部に何かをエスケープする必要なしにHTMLを表示するため(内部に</textarea>表示される場所を除く)。

たとえば、制御された行の折り返しで1行を表示するには、<textarea rows=1 cols=100 readonly> タブやCrLfを含む任意の文字を含むhtmlなどを 検討してください</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>

すべてを比較するには...

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


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.