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


335

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

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

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

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


3
Chrome을 사용하여 Rick Strahl의 블로그 ( weblog.west-wind.com/posts/2016/May/23/…)확인한 다음 스타일 시트 속성을 사용하십시오. 그의 코드 스 니펫은 매우 깨끗하고 복사 / 읽기가 쉽습니다.
JoshYates1980

1
<pre>그리고 그 행동은 정확하게”
snr

답변:


351

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

8
이것은 올바른 방법 일지 모르지만 여전히 멍청하다고 생각합니다. HTML 개발자는 <code>태그 의 필요성을 예견 했지만 한 줄만 작성하기로 결정 했습니까? 아니면 두 개의 태그, 하나의 블록과 하나의 인라인을 원하지 않기 때문에 추측합니다. 여전히 ... <code>CSS로 블록 수준을 만드는 데 무엇이 문제 입니까? "시맨틱 한"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>더 나은 이름 이라고 생각하기 때문 입니까? 더 시맨틱하지는 않습니다. tag와 비슷한 경우가 있는데 <address>, 실제로는 "저자"처럼 들리지 않지만 표준은 그것이 그것이 맞는 것이라고 말합니다.
srcspider

6
-1. OP의 핵심 질문은 포장 블록 조각을 달성하는 방법에 관한 것이었다. 줄 바꿈 해서는 안되는 블록 코드뿐만 아니라 인라인 코드를 다루었 지만 OP의 주요 질문을 다루지는 않습니다.
Asad 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>

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


그래, 나도 그렇게 생각하기 시작했다. 수업이없는 솔루션을 요청했지만 좋은 것이없는 것처럼 보입니다.
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>`

테스트 : (주의 : 다음은 이용하는 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>

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>


분명히 뭔가
빠졌지

@ sphakka (& vsync), 내 대답을 참조하십시오 <textarea readonly>.
www-0av-Com

@ user1863152- 예를 들어 Prism 과 같은 외부 스크립트로 코드를 강조 표시 할 수 없기 때문에 텍스트 영역 IMHO를 매우 잘못 사용 합니다. 또한 내용과 같이 내용의 높이와 너비에 맞지 <xmp>않거나 다른 block요소와 맞지 않습니다. 이론적 인 해결책으로 만 실제 솔루션으로 권장하지는 않습니다.
vsync

@vsync, 예, 그것은 코스의 말입니다 (그리고 나는 당신에게 공감대를 부여했습니다). 필요에 따라 텍스트 영역을 사용합니다. xmp를 시도했는데 왜 xmp가 내 요구에 불만족 스러웠는지 알 수 없습니다. 물론 더 이상 사용되지 않는 상태는 확실하지 않습니다. 인라인 사용을 위해 강조 표시하고 코딩해야 할 때 PRE를 사용합니다. XMP 내에서 프리즘이 어떻게 강조되는지 상상할 수 없습니다-일부 CSS 마법사?
www-0av-Com

나는 이것에 대해 너무 확신하지 못한다. 예, 작동하지만 3.2 이후로 더 이상 사용되지 않고 5에서 완전히 제거 되었습니까? 많은 태그가 브라우저에서 완전히 제거되지는 않았지만 <blink>하나의 예입니다. 미래 보장이 필요한 모든 것에 이것을 사용하는 것이 염려됩니다.
spacer GIF

9

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>


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.