[html] 인라인 및 블록 코드 스 니펫의 경우 <code> vs <pre> vs <samp>

Html / 글쓴이

내 사이트에는 인라인 코드 ( ” foo()함수 사용시 …”)와 일부 블록 스 니펫이 있습니다. 이들은 XML 인 경향이 있으며 브라우저가 줄 바꿈하는 것을 선호하는 매우 긴 줄을 가지고 있습니다 (즉, 사용하고 싶지 않습니다 <pre>). 또한 블록 스 니펫에 CSS 형식을 지정하고 싶습니다.

<code>CSS 블록 속성을 (with display: block;) 위에 넣으면 인라인 스 니펫이 손상 되기 때문에 둘 다 사용할 수없는 것 같습니다 .

사람들이하는 일이 궁금합니다. 사용 <code>블록 및 <samp>인라인을 위해? 사용 <code><blockquote>하거나 비슷한 것?

다른 사용자가 유지 관리 할 것이므로 클래스를 피하면서 실제 HTML을 가능한 한 단순하게 유지하고 싶습니다.

답변

<code>랩핑 할 수있는 인라인 코드 및 <pre><code>랩핑해서는 안되는 블록 코드에 사용하십시오 . <samp>샘플 출력을 위한 것이므로 샘플 코드 (독자가 입력해야 함 ) 를 나타내는 데 사용하지 마십시오 . 이것이 스택 오버플로의 기능입니다.

(더 나은 유지 관리를 원할 경우 사용자가 기사를 Markdown으로 편집하게하면 사용을 기억할 필요가 없습니다 <pre><code>.)

HTML5는 “ pre요소” 에서 이에 동의합니다 .

pre 요소는 사전 형식화 된 텍스트 블록을 나타내며, 여기에서 구조는 요소가 아닌 활자체 규칙으로 표시됩니다.

pre 요소를 사용할 수있는 경우의 몇 가지 예 :

  • 해당 언어의 규칙에 따라 구조가 표시된 컴퓨터 코드 조각 포함

[…]

컴퓨터 코드 블록을 나타 내기 위해 pre 요소를 코드 요소와 함께 사용할 수 있습니다. 컴퓨터 출력 블록을 나타 내기 위해 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>

답변

내가 완전히 놓친 것 : 비 랩핑 동작은 <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/

답변

개인적으로 사용 <code>하는 것이 가장 의미 적으로 정확 하기 때문에 사용 합니다. 그런 다음 인라인 코드와 블록 코드를 구별하기 위해 클래스를 추가합니다.

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

인라인 코드 또는

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

코드 블록. 어느 것이 덜 일반적인 지에 따라.

답변

일반적인 인라인 <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)가 좋은보다 앞에 보이는 모든 과 아래 라인 %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>

답변

(구식적인) 태그를 사용하여 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>

스 니펫 확장

답변

TextArea 고려

구글을 통해이 문제를 발견하고도 고려해야한다 그들의 조각의 표시를 관리 할 수있는 더 나은 방법을 찾고 사람 <textarea>등 스크롤이 @vsync가되지 않는 태그를 언급에 주목, 너비 / 높이 제어를 많이주는이 <xmp>, 내가 찾을 <textarea readonly>훌륭한 대용품이다 HTML을 표시 할 필요가 없습니다 (내부에서 </textarea>나타날 수 있는 곳 은 제외 ).

예를 들어 줄 바꿈이 제어 된 한 줄을 표시하려면 <textarea rows=1 cols=100 readonly> 탭 및 CrLf ‘s를 포함한 모든 문자가 포함 된 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>

스 니펫 확장

답변

Prism.js를 고려하십시오 : https://prismjs.com/#examples

그것은 만드는 <pre><code>작업을하고 매력적이다.