HTML로 HTML 스 니펫 표시

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

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

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

• & 같이 &
• < 같이 <

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

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

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

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

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

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

¹ 사례 :

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. 바꾸기 &와 문자를&
2. 바꾸기 <와 문자를<
3. 바꾸기 >와 문자를>
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 ()와 같은 서버 측 메서드를 사용하는 것입니다.

HTML에서? 아니.

XML / XHTML에서? CDATA블록을 사용할 수 있습니다 .

매우 간단합니다 ....이 xmp 코드를 사용하십시오

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

나는 가정 :

• 100 % 유효한 HTML5를 작성하려고합니다
• 코드 스 니펫 (거의) 리터럴을 HTML에 배치하려고합니다.
  • 특히 <탈출 할 필요가 없습니다

모든 옵션은이 트리에 있습니다.

• HTML 구문
  • 5 가지 요소가 있습니다
  • "정상 요소"(예 <p>:)
    • 리터럴을 가질 수 없습니다 <
    • 다음 태그 또는 주석의 시작으로 간주됩니다
  • 공극 요소
    • 그들은 내용이 없다
    • HTML을 데이터 속성에 넣을 수는 있지만 모든 요소에 적용됩니다.
    • 데이터를 다른 곳으로 옮기려면 JavaScript가 필요합니다.
    • 이중 인용 속성의 "및 &thing;필요 탈출 : "및 &thing;각각
  • 원시 텍스트 요소
    • <script>그리고 <style>오직
    • 그들은 결코 보이지 않습니다
    • Javascript에 텍스트를 포함시키는 것이 가능할 수 있습니다.
    • 자바 스크립트는 백틱이있는 여러 줄 문자열을 허용합니다
    • 그런 다음 동적으로 삽입 할 수 있습니다
    • 리터럴 </script은 어디에서나 허용되지 않습니다<script>
  • 탈출 가능한 원문 요소
    • <textarea>그리고 <title>오직
    • <textarea> 코드를 감쌀 수있는 좋은 후보입니다
    • </html>거기 에 글을 쓰는 것은 완전히 합법적입니다
    • </textarea명백한 이유 때문에 합법적이지 않습니다.
      • 이 특별한 경우 탈출 </textarea또는 유사한
    • &thing; 탈출해야합니다 : &thing;
  • 외국 요소
    • MathML 및 SVG 네임 스페이스의 요소
    • 적어도 SVG는 HTML을 다시 포함시킬 수 있습니다 ...
    • CDATA가 허용되므로 잠재적 인 것으로 보입니다.
• XML 구문으로
  • Konrad의 답변으로 덮여

참고 : >이스케이프 할 필요가 없습니다. 정상적인 요소조차도 아닙니다.

동일한 페이지에서 다른 곳에서 실행중인 코드 덩어리를 보여주는 것이 목표라면 textContent를 사용할 수 있습니다 (순수하고 잘 지원됩니다 : http://caniuse.com/#feat=textcontent )

<div id="myCode">
    <p>
        hello world
    </p>
</div>

<div id="loadHere"></div>


document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;

결과에서 여러 줄 형식을 얻으려면 CSS 스타일을 "white-space : pre;"로 설정해야합니다. 대상 div에 각 줄 끝에 "\ r \ n"을 사용하여 개별적으로 줄을 작성하십시오.

데모는 다음과 같습니다. https://jsfiddle.net/wphps3od/

이 방법은 텍스트 영역을 사용하는 것보다 이점이 있습니다. 코드는 텍스트 영역에서와 같이 다시 포맷되지 않습니다. (같은  것은 텍스트 영역에서 완전히 제거됩니다)

궁극적으로 가장 성가신 대답은 "텍스트 탈출"입니다.

그러나이 작업을 자동으로 수행 할 수있는 텍스트 편집기 나 독립형 미니 유틸리티가 많이 있습니다. 원하지 않는 경우 수동으로 이스케이프 처리하지 않아도됩니다 (이스케이프 처리 된 코드와 이스케이프 처리되지 않은 코드가 아닌 한 ...)

빠른 Google 검색에서이 정보를 보여줍니다 (예 : http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

<textarea ><?php echo htmlentities($page_html); ?></textarea>

나를 위해 잘 작동합니다 ..

" Alexander's제안 을 명심 하십시오, 이것이 내가 이것이 좋은 접근법이라고 생각하는 이유입니다"

우리가 평범한 <textarea>것을 시도 textarea하면 부모 태그를 잘못 닫고 부모 문서에 HTML 소스의 나머지를 표시하는 닫는 태그 가있을 수 있기 때문에 항상 작동하지 않을 수 있습니다 .

를 사용 하면 누출 가능성을 제거하는 HTML 엔터티 htmlentities로 모든 해당 문자 를 변환합니다 < >.

이 접근법에 이점이나 단점이 있거나 동일한 결과를 얻는 더 좋은 방법이있을 수 있습니다. 그렇다면 배우고 싶습니다.

PHP와 같은 서버 측 언어를 사용하여 원시 텍스트를 삽입 할 수 있습니다.

<?php
  $str = <<<EOD
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Minimal HTML5">
    <meta name="keywords" content="HTML5,Minimal">
    <title>This is the title</title>
    <link rel='stylesheet.css' href='style.css'>
  </head>
  <body>
  </body>
  </html>
  EOD;
?>

그런 다음 $strhtmlencoded 의 값을 덤프 하십시오.

<div style="white-space: pre">
  <?php echo htmlentities($str); ?>
</div>

이것은 간단한 트릭이며 Safari 및 Firefox에서 시도했습니다.

<code>
    <span><</span>meta property="og:title" content="A very fine cuisine" /><br>
    <span><</span>meta property="og:image" content="http://www.example.com/image.png" />
</code>

다음과 같이 표시됩니다.

당신은 그것을 여기 라이브 볼 수 있습니다

사실이 있다 할 수있는 방법. 제한이 있지만 (xmp와 같이) 더 이상 사용되지 않는 100 % 표준이며 작동합니다.

그리고 사소한 일입니다. 여기있어:

<div id="mydoc-src" style="display: none;">
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
</div>

설명해주세요. 우선, 일반적인 HTML 주석은 전체 블록이 해석되지 않도록 작업을 수행합니다. 태그를 쉽게 추가 할 수 있으며 모든 태그가 무시됩니다. 통역에서 무시되었지만 여전히 사용 가능innerHTML ! 남은 것은 내용을 가져 와서 앞뒤 주석 토큰을 ​​필터링하는 것입니다.

(제한을 기억하십시오)를 제외하고는 HTML 주석을 넣을 수 없습니다. (적어도 내 Chrome에서는) 중첩이 지원되지 않으므로 맨 처음 '->'가 공연을 종료합니다.

글쎄, 그것은 약간의 제한이 있지만, 텍스트에 HTML 주석이 없다면 어떤 경우에는 전혀 문제가되지 않습니다. 그리고 하나의 구성 요소를 탈출 한 다음 전체 구성 요소를 피하는 것이 더 쉽습니다.

자, 그 이상한 LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo문자열 은 무엇 입니까? 블록에서 사용되지 않고 해시처럼 임의의 문자열입니까? 여기 내가 사용한 이유 가 있습니다. 필자의 경우 한 DIV의 내용을 가져 와서 Showdown 마크 다운으로 처리 한 다음 출력을 다른 div에 할당했습니다. 아이디어는 HTML 파일에 인라인을 작성하고 브라우저에서 열기 만하면로드시 즉시 변환됩니다. 그래서 내 경우에는로 <!--변환되어 <p><!--</p>주석이 올바르게 탈출했습니다. 그것은 효과가 있었지만 화면을 오염 시켰습니다. 따라서 정규 표현식으로 쉽게 제거하기 위해 임의의 문자열이 사용되었습니다. 코드는 다음과 같습니다.

    var converter = new showdown.Converter();
    converter.setOption('simplifiedAutoLink', true);
    converter.setOption('tables', true);
    converter.setOption('tasklists', true);
    var src = document.getElementById("mydoc-src");
    var res = document.getElementById("mydoc-res");
    res.innerHTML = converter.makeHtml(src.innerHTML)
            .replace(/<p>.{0,10}LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo.{0,10}<\/p>/g, "");
    src.innerHTML = '';

그리고 작동합니다.

누군가 관심 이 있다면, 이 기사 는이 기술을 사용하여 작성됩니다. 자유롭게 다운로드하여 HTML 파일을 살펴보십시오.

용도에 따라 다릅니다. 사용자 입력입니까? 그런 다음을 사용 <textarea>하고 모든 것을 피하십시오. 제 경우에는 아마도 귀하의 경우이기도합니다. 나는 단순히 의견을 사용했으며 그 일을 수행합니다.

마크 다운을 사용하지 않고 태그에서 그대로 유지하려는 경우 훨씬 간단합니다.

<div id="mydoc-src" style="display: none;">
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
</div>

그것을 얻기위한 JavaScript 코드 :

    var src = document.getElementById("mydoc-src");
    var YOUR_CODE = src.innerHTML.replace(/(<!--|-->)/g, "");

HTML로 모든 것을 피할 수 있는 몇 가지 방법 이 있습니다.

또는 iframe평범한 오래된 텍스트 파일을로드 하는 것을 넣을 수 있습니다.

이것은 대부분의 상황에서 가장 좋은 방법입니다.

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

나는 그것을 제안한 첫 번째 사람에게 투표했을 것이지만 나는 평판이 없다. 나는 인터넷에서 답을 찾으려고 노력하는 사람들을 위해 무언가를 말해야한다고 느꼈습니다.

이것이 내가 한 방법입니다.

$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";

function escapeHTML(string)
    { 
        var pre = document.createElement('pre');
        var text = document.createTextNode(string);
        pre.appendChild(text);
        return pre.innerHTML;
}//end escapeHTML

탈출 된 HTML을 반환합니다.

시도해 볼 수 있습니다 :

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

모든 상황에서 작동하지는 않지만 코드 스 니펫을 textarea 로 표시됩니다.

실제 텍스트 영역처럼 보이지 않게하려면 CSS를 사용하여 텍스트 영역의 스타일을 지정할 수 있습니다.

이것은 약간의 해킹이지만 다음과 같은 것을 사용할 수 있습니다.

body script {
    display: block;
    font-family: monospace;
    white-space: pre;
}

<script type="text/html">
<h1>Hello World</h1>

<ul>
    <li>Enjoy this dodgy hack,
    <li>or don't!
</ul>
</script>

해당 CSS를 사용하면 브라우저가 본문 안에 스크립트를 표시합니다. 이 스크립트는 알 수없는 type이므로이 스크립트를 실행하려고 시도하지 않습니다 text/html. <script>닫는 </script>태그 를 포함하지 않으려는 경우 a 안에 특수 문자를 이스케이프 처리하지 않아도됩니다 .

이런 식으로 페이지 본문에 실행 가능한 JavaScript를 표시하여 일종의 "리터 레이트 프로그램"을 사용하고 있습니다.

이 질문에 더 많은 정보 가 있습니다. 태그는 언제 표시되어야하며 왜 그렇게 할 수 있습니까? .

 //To show xml tags in table columns you will have to encode the tags first

function htmlEncode(value) {
    //create a in-memory div, set it's inner text(which jQuery automatically encodes)
    //then grab the encoded contents back out.  The div never exists on the page.
    return $('<div/>').text(value).html();
}

html = htmlEncode(html)

여기에 함께 작동하는 몇 가지 답변의 조합 :

function c(s) {
    return s.split("&lt;").join("<").split("&gt;").join(">").split("&amp;").join("&")
}

displayMe.innerHTML = ok.innerHTML;
console.log(
  c(ok.innerHTML)
)

<textarea style="display:none" id="ok">
<script>
console.log("hello", 5&9);
</script>
</textarea>
<div id="displayMe">

</div>