web-dev-qa-db-ja.com

インラインおよびブロックコードスニペットの場合は、<code> vs <pre> vs <samp>

私のサイトにはインラインコード（ "foo()関数を使うときは..."）といくつかのブロックスニペットがあるでしょう。これらはXMLになりがちで、ブラウザがラップするのを好む非常に長い行を持っています（つまり、<pre>を使用したくありません）。ブロックスニペットにCSSフォーマットを追加したいと思います。

CSSブロック属性を（<code>を付けて）配置すると、インラインスニペットが壊れるため、両方にdisplay: block;を使用することはできないようです。

私は人々が何をするのか興味があります。ブロックには<code>を、インラインには<samp>を使用しますか？ <code><blockquote>かそれに似たものを使いますか？

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

htmlsemantic-markup
305
Steve Bennett

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

72
Steve Bennett

折り返すことができるインラインコードには<code>を使用し、折り返してはいけないブロックコードには<pre><code>を使用します。 <samp>はサンプル出力用なので、サンプルコード（読者は入力を表す）を表すのに使用しないでください。これがスタックオーバーフローの動作です。

（もっと良いのは、もしあなたが保守しやすいのであれば、Markdownとして記事をユーザに編集させてください、そして彼らは<pre><code>を使うことを忘れないでください。）

HTML5はこれに賛成です “ pre要素” ：

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>
322
Josh Lee

個人的には<code>を使用します。それが意味的に最も正しいからです。次に、インラインコードとブロックコードを区別するために、クラスを追加します。

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

インラインコードの場合または

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

コードブロック用。どちらによるかはあまり一般的ではありません。

36
slebetman

（廃止） <xmp> タグを使用して、HTMLコードをそのままで表示します。

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

このタグが非推奨になったのはとても悲しいことですが、それはまだブラウザ上で動作します。その中に何かをエスケープする必要はありません。なんて喜びでしょう。

14
vsync

通常のインライン<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>`

テスト：（注：以下はdata: URIプロトコル/スキームを利用するscURIpleです。したがって、%0A nl形式コードはessentialであり、カット時およびテストのためにURLバーに貼り付けた-だからview-source:（ctrl-U）良い前に見えるevery行の下に%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>
13
ekim

Prism.jsを検討してください。 https://prismjs.com/#examples

それは<pre><code>を機能させ魅力的です。

2
Michael Cole