Hiển thị đoạn mã HTML trong HTML

Làm cách nào tôi có thể hiển thị các đoạn mã HTML trên trang web mà không cần thay thế từng đoạn <bằng <và >bằng >?

Nói cách khác, có thẻ nào không hiển thị HTML cho đến khi bạn nhấn thẻ đóng không?

Không , không có. Trong HTML thích hợp, không có cách nào thoát khỏi một số ký tự:

• & như &
• < như <

(Ngẫu nhiên, không cần phải trốn thoát >nhưng mọi người thường làm điều đó vì lý do đối xứng.)

Và tất nhiên, bạn nên bao quanh mã HTML đã thoát, được thoát trong <pre><code>…</code></pre>để (a) bảo toàn khoảng trắng và ngắt dòng và (b) đánh dấu nó là một phần tử mã.

Tất cả các giải pháp khác, chẳng hạn như gói mã của bạn vào một phần tử <textarea>(không dùng nữa) <xmp>, sẽ bị hỏng . ¹

XHTML được khai báo cho trình duyệt dưới dạng XML (thông qua Content-Typetiêu đề HTTP ! - chỉ cài đặt một DOCTYPElà không đủ ) có thể sử dụng thay thế một phần CDATA:

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

Nhưng điều này chỉ hoạt động trong XML, không phải trong HTML và thậm chí đây không phải là một giải pháp hoàn hảo, vì mã không được chứa dấu phân cách đóng ]]>. Vì vậy, ngay cả trong XML, giải pháp đơn giản nhất, mạnh mẽ nhất là thông qua thoát.

¹ trường hợp tại điểm:

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>

Phương pháp đã thử và đúng cho HTML:

1. Thay thế &nhân vật bằng&
2. Thay thế <nhân vật bằng<
3. Thay thế >nhân vật bằng>
4. Tùy chọn bao quanh mẫu HTML của bạn bằng <pre>và / hoặc <code>thẻ.

cách tốt nhất:

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

mẫu cũ:

mẫu 1 :

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

mẫu 2 :

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

mẫu 3 : (Nếu bạn thực sự "trích dẫn" một khối mã, thì đánh dấu sẽ là)

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

mẫu CSS đẹp:

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;
}

Mã tô sáng cú pháp (Dành cho công việc chuyên nghiệp):

cầu vồng (rất hoàn hảo)

tô điểm

cú pháp

Điểm nổi bật

Mã vạch

liên kết tốt nhất cho bạn:

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

http://alexgorbatchev.com/SyntaxHighlighter/

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

Làm cách nào để làm nổi bật mã nguồn trong HTML?

Một phương thức ngây thơ để hiển thị mã sẽ đưa nó vào trong vùng văn bản và thêm thuộc tính bị vô hiệu hóa để nó không thể chỉnh sửa được.

<textarea disabled> code </textarea>

Hy vọng rằng sẽ giúp ai đó tìm kiếm một cách dễ dàng để hoàn thành công việc ..

Không dùng nữa , nhưng hoạt động trong FF3 và IE8.

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

Đề xuất:

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

tôi đã sử dụng <xmp>như thế này: http://jsfiddle.net/barnameha/hF985/1/

<xmp>Thẻ không dùng nữa về cơ bản thực hiện điều đó nhưng không còn là một phần của thông số XHTML. Nó vẫn hoạt động mặc dù trong tất cả các trình duyệt hiện tại.

Đây là một ý tưởng khác, một thủ thuật hack / parlor, bạn có thể đặt mã vào một textarea như vậy:

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

Đặt dấu ngoặc nhọn và mã như thế này trong vùng văn bản là HTML không hợp lệ và sẽ gây ra hành vi không xác định trong các trình duyệt khác nhau. Trong Internet Explorer, HTML được diễn giải, trong khi Mozilla, Chrome và Safari không giải thích được.

Nếu bạn muốn nó không thể chỉnh sửa và trông khác biệt thì bạn có thể dễ dàng tạo kiểu cho nó bằng CSS. Vấn đề duy nhất là các trình duyệt sẽ thêm tay cầm kéo nhỏ đó ở góc dưới bên phải để thay đổi kích thước hộp. Hoặc cách khác, hãy thử sử dụng một thẻ đầu vào thay thế.

Cách đúng để tiêm mã vào vùng văn bản của bạn là sử dụng ngôn ngữ phía máy chủ như PHP này chẳng hạn:

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

Sau đó, nó bỏ qua trình thông dịch html và đặt văn bản không được giải thích vào textarea một cách nhất quán trên tất cả các trình duyệt.

Ngoài ra, cách duy nhất là thực sự tự thoát mã nếu HTML tĩnh hoặc sử dụng các phương thức phía máy chủ như HtmlEncode () của .NET nếu sử dụng công nghệ đó.

Trong HTML? Không.

Trong XML / XHTML? Bạn có thể sử dụng một CDATAkhối.

Thật đơn giản .... Sử dụng mã xmp này

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

Tôi giả sử:

• bạn muốn viết HTML5 hợp lệ 100%
• bạn muốn đặt đoạn mã (gần như) bằng chữ trong HTML
  • đặc biệt <không cần thoát

Tất cả các tùy chọn của bạn là trong cây này:

• với cú pháp HTML
  • có năm loại yếu tố
  • những người được gọi là "yếu tố bình thường" (như <p>)
    • không thể có nghĩa đen <
    • nó sẽ được coi là bắt đầu của thẻ hoặc bình luận tiếp theo
  • yếu tố trống
    • họ không có nội dung
    • bạn có thể đặt HTML của mình vào một thuộc tính dữ liệu (nhưng điều này đúng với tất cả các yếu tố)
    • sẽ cần JavaScript để di chuyển dữ liệu đi nơi khác
    • trong các thuộc tính được trích dẫn kép "và &thing;cần thoát: "và &thing;tương ứng
  • yếu tố văn bản thô
    • <script>và <style>chỉ
    • chúng không bao giờ được hiển thị
    • nhưng việc nhúng văn bản của bạn vào Javascript có thể khả thi
    • Javascript cho phép các chuỗi nhiều dòng với backticks
    • sau đó nó có thể được chèn động
    • một nghĩa đen </scriptkhông được phép ở bất cứ đâu trong<script>
  • yếu tố văn bản thô có thể thoát
    • <textarea>và <title>chỉ
    • <textarea> là một ứng cử viên tốt để bọc mã
    • viết </html>ở đó là hoàn toàn hợp pháp
    • không hợp pháp là chuỗi con </textareavì lý do rõ ràng
      • thoát khỏi trường hợp đặc biệt này có </textareahoặc tương tự
    • &thing; cần thoát: &thing;
  • yếu tố nước ngoài
    • các phần tử từ không gian tên MathML và SVG
    • ít nhất SVG cho phép nhúng lại HTML ...
    • và CDATA được cho phép ở đó, vì vậy nó dường như có tiềm năng
• với cú pháp XML
  • bao phủ bởi câu trả lời của Konrad

Lưu ý: >không bao giờ cần thoát. Ngay cả trong các yếu tố bình thường.

Nếu mục tiêu của bạn là hiển thị một đoạn mã mà bạn đang thực thi ở nơi khác trên cùng một trang, bạn có thể sử dụng textContent (đó là j-thuần và được hỗ trợ tốt: 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;

Để có được định dạng nhiều dòng trong kết quả, bạn cần đặt kiểu css "white-space: pre;" trên div đích và viết các dòng riêng lẻ bằng cách sử dụng "\ r \ n" ở cuối mỗi mục.

Đây là bản demo: https://jsfiddle.net/wphps3od/

Phương pháp này có một lợi thế so với việc sử dụng textarea: Code sẽ không được định dạng lại như trong textarea. (Những thứ như  được loại bỏ hoàn toàn trong một vùng văn bản)

Cuối cùng, câu trả lời tốt nhất (dù khó chịu) là "thoát khỏi văn bản".

Tuy nhiên, có rất nhiều trình soạn thảo văn bản - hoặc thậm chí các tiện ích mini độc lập - có thể thực hiện việc này một cách tự động. Vì vậy, bạn không bao giờ phải thoát nó theo cách thủ công nếu bạn không muốn (Trừ khi đó là sự pha trộn giữa mã thoát và không thoát ...)

Tìm kiếm nhanh trên Google cho tôi thấy cái này, ví dụ: http://malektips.com/zzee-text-utility-html-escape-THER-expression.html

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

làm việc tốt cho tôi ..

"Hãy ghi nhớ Alexander'sđề nghị, đây là lý do tại sao tôi nghĩ rằng đây là một cách tiếp cận tốt"

nếu chúng ta chỉ thử đơn giản <textarea>thì có thể không phải lúc nào cũng hoạt động vì có thể có textareacác thẻ đóng có thể đóng nhầm thẻ cha và hiển thị phần còn lại của nguồn HTML trên tài liệu gốc, điều này có vẻ khó xử.

sử dụng htmlentitieschuyển đổi tất cả các ký tự có thể áp dụng như < >các thực thể HTML để loại bỏ mọi khả năng rò rỉ.

Có thể có lợi ích hoặc thiếu sót đối với phương pháp này hoặc cách tốt hơn để đạt được kết quả tương tự, nếu vậy hãy bình luận vì tôi muốn học hỏi từ họ :)

Bạn có thể sử dụng ngôn ngữ phía máy chủ như PHP để chèn văn bản thô:

<?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;
?>

sau đó kết xuất giá trị của $strhtmlencoding:

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

Đây là một mẹo đơn giản và tôi đã thử nó trong Safari và 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>

Nó sẽ hiển thị như thế này:

Bạn có thể thấy nó sống ở đây

Trên thực tế có là một cách để làm điều này. Nó có giới hạn (một), nhưng là tiêu chuẩn 100%, không bị phản đối (như xmp) và hoạt động.

Và nó tầm thường. Đây là:

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

Xin hãy để tôi giải thích. Trước hết, nhận xét HTML thông thường thực hiện công việc, để ngăn chặn toàn bộ khối được diễn giải. Bạn có thể dễ dàng thêm vào nó bất kỳ thẻ nào, tất cả chúng sẽ bị bỏ qua. Bỏ qua từ giải thích, nhưng vẫn có sẵn thông qua innerHTML! Vì vậy, những gì còn lại, là để có được nội dung và lọc các mã thông báo nhận xét trước và sau.

Ngoại trừ (hãy nhớ - giới hạn) bạn không thể đặt các nhận xét HTML bên trong, vì (ít nhất là trong Chrome của tôi) việc lồng chúng không được hỗ trợ và đầu tiên '->' sẽ kết thúc chương trình.

Vâng, đó là một hạn chế nhỏ khó chịu, nhưng trong một số trường hợp nhất định, đó không phải là vấn đề, nếu văn bản của bạn không có nhận xét HTML. Và, dễ dàng hơn để thoát khỏi một cấu trúc, sau đó là một loạt chúng.

Bây giờ, LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJochuỗi kỳ lạ đó là gì? Đó là một chuỗi ngẫu nhiên, giống như một hàm băm, không có khả năng được sử dụng trong khối và được sử dụng cho? Đây là bối cảnh, tại sao tôi đã sử dụng nó. Trong trường hợp của tôi, tôi đã lấy nội dung của một DIV, sau đó xử lý nó với đánh dấu Showdown và sau đó đầu ra được gán vào một div khác. Ý tưởng là, để viết nội dung markdown trong tệp HTML và chỉ cần mở trong trình duyệt và nó sẽ chuyển đổi khi tải một cách nhanh chóng. Vì vậy, trong trường hợp của tôi, <!--đã trở thành chuyển đổi <p><!--</p>, bình luận thoát đúng. Nó làm việc, nhưng làm ô nhiễm màn hình. Vì vậy, để dễ dàng loại bỏ nó bằng regex, chuỗi ngẫu nhiên đã được sử dụng. Đây là mã:

    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 = '';

Và nó hoạt động.

Nếu ai đó quan tâm, bài viết này được viết bằng kỹ thuật này. Hãy tải xuống và xem bên trong tệp HTML.

Nó phụ thuộc vào những gì bạn đang sử dụng nó cho. Có phải người dùng nhập liệu? Sau đó sử dụng <textarea>, và thoát khỏi mọi thứ. Trong trường hợp của tôi, và có lẽ đó cũng là trường hợp của bạn, tôi chỉ đơn giản là sử dụng các bình luận, và nó thực hiện công việc.

Nếu bạn không sử dụng markdown và chỉ muốn lấy nó từ thẻ, thì điều đó còn đơn giản hơn:

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

và mã JavaScript để có được nó:

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

Có một vài cách để thoát mọi thứ trong HTML, không có cách nào hay cả.

Hoặc bạn có thể đặt trong iframeđó tải một tệp văn bản cũ đơn giản.

Đây là phương pháp tốt nhất cho hầu hết các tình huống:

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

Tôi đã bỏ phiếu cho người đầu tiên đề xuất nhưng tôi không có tiếng tăm. Tôi cảm thấy bắt buộc phải nói điều gì đó mặc dù vì lợi ích của mọi người khi cố gắng tìm câu trả lời trên Internet.

Đây là cách tôi đã làm nó:

$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

nó sẽ trả về Html đã thoát

Bạn có thể thử:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

Nó có thể không hoạt động trong mọi tình huống, nhưng đặt các đoạn mã bên trong textareasẽ hiển thị chúng dưới dạng mã.

Bạn có thể tạo kiểu cho textarea bằng CSS nếu bạn không muốn nó trông giống như một textarea thực tế.

Đây là một chút hack, nhưng chúng ta có thể sử dụng một cái gì đó như:

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>

Với CSS đó, trình duyệt sẽ hiển thị các tập lệnh bên trong cơ thể. Nó sẽ không cố thực thi tập lệnh này, vì nó có một kiểu không xác định text/html. Không cần thiết phải thoát các ký tự đặc biệt bên trong a <script>, trừ khi bạn muốn bao gồm đóng</script> thẻ .

Tôi đang sử dụng một cái gì đó như thế này để hiển thị JavaScript có thể thực thi được trong phần thân của trang, cho một loại "progamming biết chữ".

Có một số thông tin khác trong câu hỏi này Khi nào các thẻ nên được hiển thị và tại sao chúng có thể? .

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

Một sự kết hợp của một vài câu trả lời làm việc cùng nhau ở đây:

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>