HTML로 HTML 스 니펫 표시 각을 교체 할

어떻게 각을 교체 할 필요없이 웹 페이지의 HTML 미리보기를 표시 할 수 있습니다 <와 &lt;와 >함께 &gt;?

즉, 닫는 태그를 칠 때까지 HTML을 렌더링하지 않는 태그가 있습니까?

답변

아니요 , 없습니다. HTML에서 적절하게 일부 문자를 이스케이프 처리하는 방법은 없습니다.

  • & 같이 &amp;
  • < 같이 &lt;

(실수로, 탈출 할 필요가 없습니다 > 없지만 사람들은 종종 대칭 때문에 그것을 피합니다.)

물론 이스케이프 처리 된 HTML 코드 <pre><code>…</code></pre>를 (a) 공백과 줄 바꿈을 유지하고 (b) 코드 요소로 표시하기 위해 둘러싸 야합니다 .

코드를 <textarea>(또는 더 이상 사용되지 않는) <xmp>요소에 래핑하는 것과 같은 다른 모든 솔루션 은 중단 됩니다. 1

XML로 브라우저에 선언 XHTML (를 통해 HTTP Content-Type헤더 – 단지가 설정! DOCTYPE입니다 충분하지 ) 대안 CDATA 섹션을 사용할 수 있습니다 :

<![CDATA[Your <code> here]]>

그러나 이것은 HTML이 아닌 XML에서만 작동하며 코드에는 닫는 구분 기호가 없어야하기 때문에 완벽한 솔루션이 아닙니다 ]]>. 따라서 XML에서도 가장 간단하고 강력한 솔루션은 이스케이프 처리입니다.

1 사례 :

코드 스 니펫 표시

textarea {border: none; width: 100%;}
<textarea readonly="readonly">
  <p>Computer <textarea>says</textarea> <span>no.</span>
</textarea>

<xmp>
  Computer <xmp>says</xmp> <span>no.</span>
</xmp>
스 니펫 확장

답변

HTML을위한 시도 된 진정한 방법 :

  1. 바꾸기 &와 문자를&amp;
  2. 바꾸기 <와 문자를&lt;
  3. 바꾸기 >와 문자를&gt;
  4. 선택적으로 HTML 샘플을 <pre>및 / 또는 <code>태그로 둘러 쌉니다 .

답변

가장 좋은 방법은:

<xmp>
// your codes ..
</xmp>

오래된 샘플 :

샘플 1 :

<pre>
  This text has
  been formatted using
  the HTML pre tag. The brower should
  display all white space
  as it was entered.
</pre>

샘플 2 :

<pre>
  <code>
    My pre-formatted code
    here.
  </code>
</pre>

샘플 3 : (실제로 코드 블록을 “인용”하는 경우 마크 업이됩니다)

<blockquote>
  <pre>
    <code>
        My pre-formatted "quoted" code here.
    </code>
  </pre>
</blockquote>

멋진 CSS 샘플 :

pre{
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  margin-bottom: 10px;
  overflow: auto;
  width: auto;
  padding: 5px;
  background-color: #eee;
  width: 650px!ie7;
  padding-bottom: 20px!ie7;
  max-height: 600px;
}

구문 강조 코드 (프로 작업용) :

무지개 (매우 완벽)

확인하다

구문

가장 밝은 부분

JSHighlighter

당신을위한 최고의 링크 :

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-any-project/

https://github.com/balupton/jquery-syntaxhighlighter

http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css/

http://alexgorbatchev.com/SyntaxHighlighter/

https://code.google.com/p/jquery-chili-js/

HTML에서 소스 코드를 강조 표시하는 방법

답변

코드를 표시하는 일종의 순진한 방법은 코드를 텍스트 영역에 포함하고 비활성화 된 속성을 추가하여 편집 할 수 없도록합니다.

<textarea disabled> code </textarea>

누군가가 일을 쉽게 할 수있는 방법을 찾는 데 도움이되기를 바랍니다 ..

답변

더 이상 사용되지 않지만 FF3 및 IE8에서 작동합니다.

<xmp>
   <b>bold</b><ul><li>list item</li></ul>
</xmp>

추천 :

<pre><code>
    code here, escape it yourself.
</code></pre>

답변

나는 <xmp>이것을 다음과 같이 사용했다 :
http://jsfiddle.net/barnameha/hF985/1/

답변

더 이상 사용되지 않는 <xmp>태그는 기본적으로 그렇게하지만 더 이상 XHTML 사양의 일부가 아닙니다. 현재 모든 브라우저에서 작동해야합니다.

다음은 또 다른 아이디어, 해킹 / 팔러 트릭입니다. 코드를 텍스트 영역에 넣을 수 있습니다.

<textarea disabled="true" style="border: none;background-color:white;">
    <p>test</p>
</textarea>

텍스트 영역 안에 꺽쇠 괄호와 코드를 넣는 것은 유효하지 않은 HTML이며 다른 브라우저에서 정의되지 않은 동작을 일으킬 것입니다. Internet Explorer에서는 HTML이 해석되는 반면 Mozilla, Chrome 및 Safari는 해석되지 않습니다.

편집 불가능하고 다르게 보이기를 원한다면 CSS를 사용하여 쉽게 스타일을 지정할 수 있습니다. 유일한 문제는 브라우저가 오른쪽 하단 모서리에 작은 드래그 핸들을 추가하여 상자 크기를 조정한다는 것입니다. 또는 대신 입력 태그를 사용해보십시오.

텍스트 영역에 코드를 삽입하는 올바른 방법은 다음과 같은 PHP와 같은 서버 측 언어를 사용하는 것입니다.

<textarea disabled="true" style="border: none;background-color:white;">
    <?php echo '<p>test</p>'; ?>
</textarea>

그런 다음 html 인터프리터를 무시하고 해석되지 않은 텍스트를 모든 브라우저에서 일관되게 텍스트 영역에 넣습니다.

그 이외의 유일한 방법은 정적 HTML 인 경우 코드를 직접 이스케이프하거나 그러한 기술을 사용하는 경우 .NET의 HtmlEncode ()와 같은 서버 측 메서드를 사용하는 것입니다.