แสดงตัวอย่าง HTML ใน HTML

ฉันจะแสดงตัวอย่าง HTML บนหน้าเว็บโดยไม่จำเป็นต้องแทนที่<ด้วย<และ>ด้วยได้>อย่างไร

กล่าวอีกนัยหนึ่งมีแท็กที่จะไม่แสดง HTML จนกว่าคุณจะกดแท็กปิดหรือไม่

ไม่มีมีไม่ได้ ใน HTML ที่เหมาะสมไม่มีทางที่จะหลีกเลี่ยงอักขระบางตัวได้:

• & เช่น &
• < เช่น <

(บังเอิญไม่จำเป็นต้องหลบหนี>แต่คนมักจะทำเพื่อความสมมาตร)

และแน่นอนคุณควรล้อมโค้ด HTML ที่เป็นผลลัพธ์ไว้และหลบหนี<pre><code>…</code></pre>ไปที่ (ก) สงวนพื้นที่ว่างและตัวแบ่งบรรทัดและ (b) ทำเครื่องหมายเป็นองค์ประกอบรหัส

โซลูชั่นอื่น ๆ ทั้งหมดเช่นการตัดรหัสของคุณให้เป็น<textarea>หรือ (เลิก) <xmp>องค์ประกอบจะทำลาย ¹

XHTML ที่ถูกประกาศให้เบราว์เซอร์เป็น XML (ผ่าน HTTP Content-Typeส่วนหัว - เพียงการตั้งค่า! DOCTYPEคือไม่เพียงพอ ) อีกทางเลือกหนึ่งสามารถใช้ส่วน CDATA:

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

แต่นี้จะทำงานเฉพาะใน XML ไม่ได้อยู่ใน HTML, ]]>และแม้กระทั่งนี้ไม่ได้เป็นวิธีการแก้ปัญหาที่จะเข้าใจผิดเนื่องจากรหัสไม่ต้องมีตัวคั่นปิด ดังนั้นแม้ใน 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;
}

รหัสเน้นไวยากรณ์ (สำหรับการทำงานระดับมืออาชีพ):

สายรุ้ง (สมบูรณ์แบบมาก)

เสริมสวย

syntaxhighlighter

ไฮไลท์

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 และเพิ่มคุณลักษณะที่ปิดใช้งานดังนั้นจึงไม่สามารถแก้ไขได้

<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 ดังนี้:

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

การใส่เครื่องหมายวงเล็บมุมและโค้ดเช่นนี้ไว้ในพื้นที่ข้อความเป็น HTML ที่ไม่ถูกต้องและจะทำให้เกิดพฤติกรรมที่ไม่ได้กำหนดในเบราว์เซอร์ที่แตกต่างกัน ใน Internet Explorer HTML จะถูกตีความในขณะที่ Mozilla, Chrome และ Safari จะไม่ถูกตีความ

หากคุณต้องการให้แก้ไขไม่ได้และมีลักษณะแตกต่างจากนั้นคุณสามารถจัดรูปแบบได้อย่างง่ายดายโดยใช้ CSS ปัญหาเดียวก็คือเบราว์เซอร์จะเพิ่มตัวจัดการการลากเล็ก ๆ ที่มุมล่างขวาเพื่อปรับขนาดกล่อง หรือลองใช้แท็กอินพุตแทน

วิธีที่ถูกต้องในการแทรกโค้ดลงใน textarea ของคุณคือการใช้ภาษาฝั่งเซิร์ฟเวอร์เช่น PHP นี้:

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

จากนั้นจะข้ามตัวแปล html และวางข้อความที่ไม่ถูกตีความลงใน textarea อย่างสม่ำเสมอในทุกเบราว์เซอร์

นอกเหนือจากนั้นวิธีเดียวคือหลีกเลี่ยงโค้ดด้วยตัวคุณเองถ้า HTML แบบคงที่หรือใช้วิธีฝั่งเซิร์ฟเวอร์เช่น HtmlEncode ของ. NET () หากใช้เทคโนโลยีดังกล่าว

ใน HTML? เลขที่

ใน XML / XHTML คุณสามารถใช้CDATAบล็อก

มันง่ายมาก .... ใช้รหัส xmp นี้

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

ผมถือว่า:

• คุณต้องการเขียน HTML5 ที่ถูกต้อง 100%
• คุณต้องการวางข้อมูลโค้ด (เกือบ) ตามตัวอักษรใน HTML
  • โดยเฉพาะอย่างยิ่ง<ไม่จำเป็นต้องหลบหนี

ตัวเลือกทั้งหมดของคุณอยู่ในต้นไม้นี้:

• ด้วยไวยากรณ์ HTML
  • มีองค์ประกอบห้าชนิด
  • สิ่งที่เรียกว่า "องค์ประกอบปกติ" (เหมือน<p>)
    • ไม่มีตัวอักษร <
    • จะถือว่าเป็นการเริ่มต้นของแท็กหรือความคิดเห็นถัดไป
  • องค์ประกอบที่เป็นโมฆะ
    • พวกเขาไม่มีเนื้อหา
    • คุณสามารถใส่ HTML ในแอตทริบิวต์ data (แต่นี่เป็นจริงสำหรับองค์ประกอบทั้งหมด)
    • ที่จะต้องใช้ JavaScript เพื่อย้ายข้อมูลที่อื่น
    • ในแอ็ตทริบิวต์ที่ยกมาสองครั้ง"และ&thing;ต้องการหลบหนี: "และ&thing;ตามลำดับ
  • องค์ประกอบข้อความดิบ
    • <script>และ<style>เท่านั้น
    • พวกเขาจะไม่แสดงผล
    • แต่การฝังข้อความของคุณใน Javascript อาจทำได้
    • Javascript อนุญาตให้ใช้สตริงหลายบรรทัดพร้อม backticks
    • มันสามารถถูกแทรกแบบไดนามิก
    • </scriptไม่อนุญาตให้ใช้ตัวอักษรใด ๆ ก็ได้<script>
  • องค์ประกอบข้อความดิบที่หลบหนีได้
    • <textarea>และ<title>เท่านั้น
    • <textarea> เป็นตัวเลือกที่ดีในการใส่โค้ด
    • มันเป็นกฎหมายโดยสิ้นเชิงที่จะเขียน</html>ในนั้น
    • ไม่ถูกต้องตามกฎหมายเป็นซับสตริง</textareaด้วยเหตุผลที่ชัดเจน
      • หนีกรณีพิเศษนี้ด้วย</textareaหรือคล้ายกัน
    • &thing; ต้องการหลบหนี: &thing;
  • องค์ประกอบต่างประเทศ
    • องค์ประกอบจาก MathML และ SVG เนมสเปซ
    • อย่างน้อย SVG อนุญาตให้ฝัง HTML อีกครั้ง ...
    • และอนุญาตให้ CDATA อยู่ที่นั่นดังนั้นจึงมีศักยภาพ
• ด้วยไวยากรณ์ XML
  • ครอบคลุมโดยคำตอบของ Konrad

หมายเหตุ: >ไม่ต้องหลบหนี ไม่ได้อยู่ในองค์ประกอบปกติ

หากเป้าหมายของคุณคือการแสดงโค้ดที่คุณกำลังดำเนินการที่อื่นในหน้าเดียวกันคุณสามารถใช้ textContent (เป็น pure-js และรองรับอย่างดี: 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/

วิธีนี้มีข้อได้เปรียบมากกว่าการใช้ textarea: รหัสจะไม่ถูกฟอร์แมตใหม่เหมือนใน textarea (สิ่งที่ต้องการ จะถูกลบทั้งหมดใน textarea)

ในที่สุดคำตอบที่ดีที่สุด (แต่น่ารำคาญ) คือ "หลบหนีข้อความ"

อย่างไรก็ตามมีตัวแก้ไขข้อความมากมาย - หรือแม้แต่มินิยูทิลิตี้แบบสแตนด์อโลน - ที่สามารถทำได้โดยอัตโนมัติ ดังนั้นคุณไม่ควรที่จะหลีกเลี่ยงมันด้วยตนเองหากคุณไม่ต้องการ (เว้นแต่จะเป็นการรวมกันของรหัสที่ใช้ Escape และ Un-Escape ... )

การค้นหาอย่างรวดเร็วของ Google แสดงให้ฉันเห็นสิ่งนี้ตัวอย่างเช่น: http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

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

ทำงานได้ดีสำหรับฉัน ..

"คำนึงถึงAlexander'sข้อเสนอแนะนี่คือเหตุผลว่าทำไมฉันจึงคิดว่านี่เป็นวิธีการที่ดี"

หากเราลองใช้แบบธรรมดา<textarea>อาจไม่ทำงานเนื่องจากอาจมีtextareaแท็กปิดซึ่งอาจปิดแท็กหลักและแสดงส่วนที่เหลือของแหล่งที่มา HTML ในเอกสารหลักซึ่งอาจดูแปลก ๆ

การใช้htmlentitiesแปลงอักขระที่ใช้งานได้ทั้งหมดเช่น< >เอนทิตี HTML ซึ่งจะช่วยลดโอกาสการรั่วไหล

อาจมีประโยชน์หรือข้อบกพร่องสำหรับวิธีนี้หรือวิธีที่ดีกว่าในการบรรลุผลลัพธ์เดียวกันถ้าเป็นเช่นนั้นโปรดแสดงความคิดเห็นตามที่ฉันชอบที่จะเรียนรู้จากพวกเขา :)

คุณสามารถใช้ภาษาฝั่งเซิร์ฟเวอร์เช่น 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>

มันจะแสดงเช่นนี้:

คุณสามารถดูได้ที่นี่

ที่จริงมีเป็นวิธีการที่จะทำเช่นนี้ มันมีข้อ จำกัด (หนึ่ง) แต่เป็นมาตรฐาน 100% ไม่เลิก (เช่น xmp) และใช้งานได้

และมันเป็นเรื่องเล็กน้อย นี่มันคือ:

<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 markdown แล้วเอาท์พุทที่กำหนดไว้ใน div อื่น แนวคิดคือการเขียน markdown แบบอินไลน์ในไฟล์ HTML และเพิ่งเปิดในเบราว์เซอร์และมันจะแปลงโหลดได้ทันที ดังนั้นในกรณีของฉัน<!--กลายเป็น<p><!--</p>ความคิดเห็นที่ถูกหลบหนีอย่างถูกต้อง มันใช้งานได้ แต่ทำให้หน้าจอสกปรก ดังนั้นในการลบออกอย่างง่ายดายด้วย regex สตริงสุ่มถูกใช้ นี่คือรหัส:

    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>และหลบหนีทุกอย่าง ในกรณีของฉันและอาจเป็นกรณีของคุณเช่นกันฉันก็ใช้ความเห็นและทำงานได้

หากคุณไม่ได้ใช้ markdown และเพียงต้องการให้มันมาจากแท็กนั่นก็ง่ายกว่า:

<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จะแสดงเป็นรหัส

คุณสามารถจัดรูปแบบ textarea ด้วย CSS หากคุณไม่ต้องการให้มันดูเหมือน textarea จริง

นี่เป็นบิตของการแฮ็ก แต่เราสามารถใช้สิ่งที่ชอบ:

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 นั้นเบราว์เซอร์จะแสดงสคริปต์ภายในเนื้อความ text/htmlมันจะไม่พยายามที่จะรันสคริปต์นี้มันมีไม่ทราบชนิด ไม่จำเป็นต้องยกเว้นอักขระพิเศษภายใน a <script>ยกเว้นว่าคุณต้องการใส่</script>แท็กปิด

ฉันใช้สิ่งนี้เพื่อแสดง JavaScript ที่สามารถใช้งานได้ในเนื้อความของหน้าเพื่อเรียงลำดับ "progamming ที่รู้หนังสือ"

มีข้อมูลเพิ่มเติมในคำถามนี้เมื่อใดควรจะมองเห็นแท็กและทำไมจึงสามารถแท็กได้ .

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