원시 HTML 코드를 PRE 또는 이와 유사한 것으로 표시하는 방법

원시 HTML 코드를 PRE 또는 이와 유사한 것으로 표시하는 방법

---

원시 HTML을 표시하고 싶습니다. 우리 모두는 이렇게 "<"와 ">"를 이스케이프해야한다는 것을 알고 있습니다.

     <PRE> this is a test  &ltDIV&gt </PRE>

그러나 나는 이것을하고 싶지 않다. HTML 코드를 그대로 유지하는 방법을 원합니다 (읽기 쉽기 때문에 (편집기 내부에서)) 복사하여 다시 실제 HTML 코드로 사용하고 싶지 않습니다. 다시 변경하거나 동일한 코드의 두 가지 버전이 하나는 이스케이프되고 다른 하나는 이스케이프되지 않음).

이를 허용 할 수있는 PRE보다 더 "원시"인 다른 환경이 있습니까? 따라서 HTML을 계속 편집하고 일부 원시 HTML 코드를 표시 할 때마다 모든 것을 변경할 필요가 없습니다. HTML5에있을 수 있습니까?

같은 것 <REALLY_REALLY_VERBATIM> ...... </<REALLY_REALLY_VERBATIM>

스크린 샷

자바 스크립트 솔루션은 FF 21에서 작동하지 않습니다. 다음은 스크린 샷입니다.

스크린 샷 2

첫 번째 솔루션은 여전히 ​​파이어 폭스에서 작동하지 않습니다. 여기 스크린 샷이 있습니다.

---

xmp요소 를 사용할 수 있습니다 . <XMP> 태그의 용도는 무엇입니까?를 참조하십시오 . . 처음부터 HTML로되어 있으며 모든 브라우저에서 지원됩니다. 사양이 눈살을 찌푸 리지만 HTML5 CR은 여전히이를 설명하고 브라우저가이를 지원해야합니다 (작성자에게 사용하지 말라고 말하지만 실제로는 당신을 막을 수는 없습니다).

내부의 모든 것은 xmp그 자체로 간주되며, 명백한 이유로 요소 자체의 끝 태그를 제외하고 마크 업 (태그 또는 문자 참조)이 인식되지 않습니다 </xmp>.

그렇지 않으면 xmp같은 렌더링됩니다 pre.

"진짜 XHTML"를 사용하는 경우, 즉 XHTML 때문에, (희귀)는 XML 미디어 타입, 특수 구문 분석 규칙이 적용되지 않습니다와 함께 제공 xmp처럼 취급 pre. 그러나 "실제 XHTML"에서는 유사한 구문 분석 규칙을 의미하는 CDATA 섹션을 사용할 수 있습니다. 특별한 형식이 없기 때문에 pre요소 안에 감싸고 싶을 것입니다 .

<pre><![CDATA[
This is a demo, tags like <p> will
appear literally.
]]></pre>

xmp소위 다중 언어 마크 업을 달성하기 위해 어떻게 CDATA 섹션과 결합 할 수 있는지 모르겠습니다.

---

기본적으로 원래 질문은 두 부분으로 나눌 수 있습니다.

• 주요 목표 / 과제 : 웹 페이지의 마크 업에 원시 형식의 코드 스 니펫 (모든 종류의 코드)을 포함 (/ 전송) (인코딩 / 이스케이프 없음으로 인한 간단한 복사 / 붙여 넣기 / 편집)
• 브라우저에서 해당 코드 조각을 올바르게 표시 / 렌더링 (편집 가능)

짧은 (그러나) 모호한 대답은 : 당신은 할 수 없습니다 , 하지만 당신이 (매우 가까이) 할 수 있습니다.
(저는 3 개의 모순되는 답변이므로 계속 읽으십시오 ...)

(polyglot) (x) (ht) ml 마크 업 언어는 시작 / 열기 및 끝 / 닫기 태그 / 문자 (시퀀스) 사이의 모든 것을 (거의) 래핑에 의존합니다.
따라서 마크 업 언어에 모든 종류의 원시 코드 / 스 니펫을 포함하려면 래핑 'container'요소를 닫는 문자 (-sequence)와 유사한 모든 인스턴스 (스 니펫 내부)를 항상 이스케이프 / 인코딩해야합니다. 마크 업. ( 이 포스트에서 나는 이것을 규칙 1 번
이라고 부를 것입니다 .) "some "data" here"or를 생각 하세요. <i>..close italics with '</i>'-tag</i>여기서 누군가 이스케이프 / 인코딩 (뭔가를) </i하고 "(또는 컨테이너의 따옴표 문자를에서 "로 변경 해야합니다 ').

따라서 규칙 1 번 때문에 마크 업 안에 '아무'알려지지 않은 원시 코드 조각을 '그냥'삽입 할 수 없습니다 . 원시 스 니펫 내에서 한 문자 라도
이스케이프 / 인코딩해야하는 경우 해당 스 니펫은 더 이상 생각없이 문서의 마크 업에서 복사 / 붙여 넣기 / 편집 할 수있는 동일한 원본 '순수 원시 코드'가 아니기 때문 입니다. 엔티티로 인해 잘못된 / 불법 마크 업 및 Mojibake (주로)가 발생할 수 있습니다.
또한, 해야 그 조각 같은 문자를 포함, 당신은 것입니다 여전히 에서 (그리고에) 문자 (순서)가 빠져 있어요 / 인코딩 된 표현이 니펫을 표시 할 수 있음을 '번역'에 일부 자바 스크립트가 필요 제대로을 '웹 페이지'(복사 / 붙여 넣기 / 편집 용).

이는 마크 업 언어가 지정하는 데이터 유형 (일부)으로 이어집니다. 이러한 데이터 유형은 본질적으로 '유효한 문자'로 간주되는 것과 그 의미 (태그, 속성 등)를 정의합니다.

• PCDATA(분석 된 문자 데이터) : 개체를 확장하고 하나는 탈출해야한다 <, &(그리고 >마크 업 언어 / 버전에 따라).
  대부분의 태그처럼 body, div, pre, 등, 또한 textarea이러한 유형의 아래가 (HTML5까지).
  따라서 스 니펫 내에서 모든 컨테이너의 닫는 문자 시퀀스를 인코딩해야 할뿐만 아니라 모든 <, &(, >) 문자 (최소) 도 인코딩해야합니다 .
  말할 필요도없이 이렇게 많은 문자를 인코딩 / 이스케이프하는 것은 마크 업에 원시 스 니펫을 포함하는이 목표의 범위를 벗어납니다.
  '..하지만 텍스트 영역이 작동하는 것 같습니다 ...', 그렇습니다. 브라우저의 오류 엔진으로 인해 무언가를 만들거나 HTML5를 사용하기 때문입니다.

• RCDATA(Replaceable Character DATA) : 텍스트 내부의 태그를 마크 업으로 처리하지 않습니다 (그러나 여전히 규칙 1에 의해 관리 됨). 따라서 인코딩 할 필요가 없습니다 <( >). 그러나 엔티티는 여전히 확장되어 있으므로 해당 엔티티와 '모호한 앰퍼샌드'( &)는 특별한주의가 필요합니다. 현재 HTML5 스펙은 텍스트 영역이 현재 말한다 필드 와 (인용) :
  RCDATA

  의 텍스트 raw text및 RCDATA요소는 안 문자열의 발생 포함 할 "</"경우 소문자를 구별 U + 0009 CHARACTER 집계 한 다음 요소의 태그 이름과 일치하는지 문자 다음에 (U + 003C보다 적게보다는 기호, U + 002F 상선를) (탭), U + 000A 라인 피드 (LF), U + 000C 양식 피드 (FF), U + 000D 캐리지 리턴 (CR), U + 0020 SPACE, U + 003E GREATER-THAN SIGN (>) 또는 U + 002F 솔 리더스 (/).

  따라서 더, 텍스트 영역이 무거운 엔티티 번역 핸들러를 필요로하거나 어떤 문제가되지 않습니다 개체에 결국 글자 깨짐!

• CDATA(문자 데이터) 는 텍스트 내부의 태그를 마크 업으로 취급하지 않으며 엔티티를 확장하지 않습니다 .
  따라서 원시 스 니펫 코드가 규칙 1을 위반하지 않는 한 (스 니펫 내에서 컨테이너를 닫는 문자 (시퀀스)를 가질 수 없음) 다른 이스케이프 / 인코딩 이 필요 하지 않습니다 .

분명히 이것은 다음과 같이 요약됩니다. 스 니펫의 원시 소스에서 인코딩해야하는 문자 / 문자 시퀀스 의 수와 해당 문자 (시퀀스)가 평균 스 니펫에 나타날 수있는 횟수를 어떻게 최소화 할 수 있습니까? 이러한 문자의 번역을 처리하는 자바 스크립트에서도 중요한 것입니다 (만약 발생하는 경우).

그렇다면 어떤 '컨테이너'가 이러한 CDATA맥락을 가지고 있습니까?

태그의 대부분의 값 속성은 CDATA이므로 숨겨진 입력의 값 속성을 (ab) 사용할 수 있습니다 ( 개념 증명 jsfiddle here ).
그러나 (규칙 1 준수) 이것은 원시 스 니펫에 중첩 된 따옴표 ( "및 ') 와 함께 인코딩 / 이스케이프 문제를 생성하며 스 니펫을 가져 오거나 번역하고 다른 (보이는) 요소에서 스 니펫을 설정 (또는 단순히 텍스트로 설정)하려면 자바 스크립트가 필요합니다. -지역의 가치). 어떻게 든 이것은 FF의 엔티티에 문제를주었습니다 (텍스트 영역과 마찬가지로). 그러나 중첩 된 따옴표를 이스케이프 / 인코딩해야하는 '가격'이 (HTML5) 텍스트 영역보다 높기 때문에 실제로 중요하지 않습니다 (인용문은 소스 코드에서 매우 일반적입니다 ..).

(학대) 사용하려는 것은 <![CDATA[<tag>bla & bla</tag>]]>어떻습니까?
Jukka가 그의 확장 답변에서 지적했듯이 이것은 (희귀 한) '진짜 xhtml'에서만 작동합니다.
스크립트 태그 (스크립트 태그 내부에 이러한 CDATA 래퍼가 있거나없는)를 /* */원시 코드 조각을 래핑 하는 여러 줄 주석과 함께 사용하는 것을 생각했습니다 (스크립트 태그에는를 포함 할 수 있으며 id개수로 액세스 할 수 있음). 그러나 이것은 분명히 */, ]]>및 </script원시 스 니펫에서 이스케이프 문제를 도입하기 때문에 해결책처럼 보이지 않습니다 .

이 답변에 대한 의견에 다른 실행 가능한 '컨테이너'를 게시하십시오.

그건 그렇고, -문자 수를 인코딩하거나 계산하고 주석 태그 내에서 균형을 맞추는 것은 <!-- -->이 목적을 위해 미쳤습니다 (규칙 1 제외).

---

잎 우리 것을 유카 K. 펠라의 훌륭한 대답 : 태그는 최고의 옵션을 보인다!<xmp>

'잊혀진'는이 <xmp>보유하고 CDATA,이 목적을위한 것이며 여전히 참이다 에 현재 HTML 5 스펙 (및 HTML3.2 이후 적어도있다); 정확히 우리가 필요로하는 것! 또한 IE6에서도 광범위하게 지원됩니다 (즉, 스크롤 테이블 본문과 동일한 회귀가 발생할 때까지).
참고 : Jukka가 지적했듯이, 이것은 진정한 xhtml 또는 polyglot에서 작동하지 않으며 (로 처리 할 것입니다 pre) xmp태그는 여전히 규칙 1 번을 준수해야합니다. 그러나 이것이 '유일한'규칙입니다.

다음 마크 업을 고려하십시오.

<!-- ATTENTION: replace any occurrence of &lt;/xmp with </xmp -->
<xmp id="snippet-container">
<div>
    <div>this is an example div &amp; holds an xmp tag:<br />
        <xmp> 
<html><head>  <!-- indentation col 0!! -->
    <title>My Title</title>
</head><body>
    <p>hello world !!</p>
</body></html>
        &lt;/xmp>  <!-- note this encoded/escaped tag -->
    </div>
    This line is also part of the snippet
</div>
</xmp>

The above codeblok illustrates a raw piece of markup where <xmp id="snippet-container"> contains an (almost raw) code-snippet (containing div>div>xmp>html-document).
Notice the encoded closing tag in this markup? To comply with rule no 1, this was encoded/escaped).

So embedding/transporting the (sometimes almost) raw code is/seems solved.

What about displaying/rendering the snippet (and that encoded </xmp>)?

The browser will (or it should) render the snippet (the contents inside snippet-container) exactly the way you see it in the codeblock above (with some discrepancy amongst browsers whether or not the snippet starts with a blank line).
That includes the formatting/indentation, entities (like the string &), full tags, comments AND the encoded closing tag </xmp> (just like it was encoded in the markup). And depending on browser(version) one could even try use the property contenteditable="true" to edit this snippet (all that without javascript enabled). Doing something like textarea.value=xmp.innerHTML is also a breeze.

So you can... if the snippet doesn't contain the containers closing character-sequence.

However, should a raw snippet contain the closing character-sequence </xmp (because it is an example of xmp itself or it contains some regex, etc), you must accept that you have to encode/escape that sequence in the raw snippet AND need a javascript handler to translate that encoding to display/render the encoded </xmp> like </xmp> inside a textarea (for editing/posting) or (for example) a pre just to correctly render the snippet's code (or so it seems).

A very rudimentary jsfiddle example of this here. Note that getting/embedding/displaying/retrieving-to-textarea worked perfect even in IE6. But setting the xmp's innerHTML revealed some interesting 'would-be-intelligent' behavior on IE's part. There is a more extensive note and workaround on that in the fiddle.

But now comes the important kicker (another reason why you only get very close): Just as an over-simplified example, imagine this rabbit-hole:

Intended raw code-snippet:

<!-- remember to translate between </xmp> and &lt;/xmp> -->
<xmp>
<p>a paragraph</p>
</xmp>

Well, to comply with rule 1, we 'only' need to encode those </xmp[> \n\r\t\f\/] sequences, right?

So that gives us the following markup (using just a possible encoding):

<xmp id="container">
<!-- remember to translate between &lt;/xmp> and &lt;/xmp> -->
<xmp>
<p>a paragraph</p>
&lt;/xmp>
</xmp>

Hmm.. shalt I get my crystal ball or flip a coin? No, let the computer look at its system-clock and state that a derived number is 'random'. Yes, that should do it..

Using a regex like: xmp.innerHTML.replace(/&lt;(?=\/xmp[> \n\r\t\f\/])/gi, '<');, would translate 'back' to this:

<!-- remember to translate between </xmp> and </xmp> -->
<xmp>
<p>a paragraph</p>
</xmp>

Hmm.. seems this random generator is broken... Houston..?
Should you have missed the joke/problem, read again starting at the 'intended raw code-snippet'.

Wait, I know, we (also) need to encode .... to ....
Ok, rewind to 'intended raw code-snippet' and read again.
Somehow this all begins to smell like the famous hilarious-but-true rexgex-answer on SO, a good read for people fluent in mojibake.

Maybe someone knows a clever algorithm or solution to fix this problem, but I assume that the embedded raw code will get more and more obscure to the point where you'd be better of properly escaping/encoding just your <, & (and >), just like the rest of the world.

Conclusion: (using the xmp tag)

• it can be done with known snippets that do not contain the container's closing character-sequence,
• we can get very close to the original objective with known snippets that only use 'basic first-level' escaping/encoding so we don't fall in the rabbithole,
• but ultimately it seems that one can't do this reliably in a 'production-environment' where people can/should copy/paste/edit 'any unknown' raw snippets while not knowing/understanding the implications/rules/rabbithole (depending on your implementation of handling/translating for rule 1 and the rabbit-hole).

Hope this helps!

PS: Whilst I would appreciate an upvote if you find this explanation useful, I kind of think Jukka's answer should be the accepted answer (should no better option/answer come along), since he was the one who remembered the xmp tag (that I forgot about over the years and got 'distracted' by the commonly advocated PCDATA elements like pre, textarea, etc.).
This answer originated in explaining why you can't do it (with any unknown raw snippet) and explain some obvious pitfalls that some other (now deleted) answers overlooked when advising a textarea for embedding/transport. I've expanded my existing explanation to also support and further explain Jukka's answer (since all that entity and *CDATA stuff is almost harder than code-pages).

---

Cheap and cheerful answer:

<textarea>Some raw content</textarea>

The textarea will handle tabs, multiple spaces, newlines, line wrapping all verbatim. It copies and pastes nicely and its valid HTML all the way. It also allows the user to resize the code box. You don't need any CSS, JS, escaping, encoding.

You can alter the appearance and behaviour as well. Here's a monospace font, editing disabled, smaller font, no border:

<textarea
    style="width:100%; font-family: Monospace; font-size:10px; border:0;"
    rows="30" disabled
>Some raw content</textarea>

This solution is probably not semantically correct. So if you need that, it might be best to choose a more sophisticated answer.

---

echo '<pre>' . htmlspecialchars("<div><b>raw HTML</b></div>") . '</pre>';

I think that's what you're looking for?

In other words, use htmlspecialchars() in PHP

---

@GitaarLAB and @Jukka elaborate that <xmp> tag is obsolete, but still the best. When I use it like this

<xmp>
<div>Lorem ipsum</div>
<p>Hello</p>
</xmp>

then the first EOL is inserted in the code, and it looks awful.

It can be solved by removing that EOL

<xmp><div>Lorem ipsum</div>
<p>Hello</p>
</xmp>

그러나 소스에서는 나빠 보입니다. 나는 랩핑으로 그것을 해결하곤 <div>했지만 최근에 좋은 CSS3 규칙을 알아 냈다. 누군가에게 도움이되기를 바란다.

xmp { margin: 5px 0; padding: 0 5px 5px 5px; background: #CCC; }
xmp:before { content: ""; display: block; height: 1em; margin: 0 -5px -2em -5px; }

이것은 더 좋아 보인다 .

---

xmp 갈 방법입니다. 즉 :

<xmp>
  # your code...
</xmp>

---

jQuery를 활성화 한 경우 escapeXml 함수를 사용할 수 있으며 이스케이프 화살표 또는 특수 문자에 대해 걱정할 필요가 없습니다.

<pre>
  ${fn:escapeXml('
    <!-- all your code --> 
  ')};
</pre>

참조 URL : https://stackoverflow.com/questions/16783708/how-to-display-raw-html-code-in-pre-or-something-like-it-but-without-escaping-it