어떻게 각을 교체 할 필요없이 웹 페이지의 HTML 미리보기를 표시 할 수 있습니다 <와 <와 >함께 >?
즉, 닫는 태그를 칠 때까지 HTML을 렌더링하지 않는 태그가 있습니까?
답변
아니요 , 없습니다. HTML에서 적절하게 일부 문자를 이스케이프 처리하는 방법은 없습니다.
&같이&<같이<
(실수로, 탈출 할 필요가 없습니다 > 없지만 사람들은 종종 대칭 때문에 그것을 피합니다.)
물론 이스케이프 처리 된 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 사례 :
답변
HTML을위한 시도 된 진정한 방법 :
답변
가장 좋은 방법은:
<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;
}구문 강조 코드 (프로 작업용) :
무지개 (매우 완벽)
당신을위한 최고의 링크 :
https://github.com/balupton/jquery-syntaxhighlighter
http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css/
http://alexgorbatchev.com/SyntaxHighlighter/
답변
코드를 표시하는 일종의 순진한 방법은 코드를 텍스트 영역에 포함하고 비활성화 된 속성을 추가하여 편집 할 수 없도록합니다.
<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 ()와 같은 서버 측 메서드를 사용하는 것입니다.