Tampilkan cuplikan HTML dalam HTML

Bagaimana saya bisa menampilkan cuplikan HTML pada halaman web tanpa harus mengganti masing <- masing dengan <dan >dengan >?

Dengan kata lain, apakah ada tag untuk jangan membuat HTML sampai Anda menekan tag penutup ?

Tidak , tidak ada. Dalam HTML yang tepat, tidak ada jalan keluar dari beberapa karakter:

• & sebagai &
• < sebagai <

(Kebetulan, tidak perlu melarikan diri >tetapi orang sering melakukannya karena alasan simetri.)

Dan tentu saja Anda harus mengelilingi kode HTML yang dihasilkan, lolos <pre><code>…</code></pre>ke dalam (a) melestarikan spasi putih dan jeda baris, dan (b) menandainya sebagai elemen kode.

Semua solusi lain, seperti membungkus kode Anda ke <textarea>dalam <xmp>elemen (atau usang) , akan rusak . ¹

XHTML yang dinyatakan browser sebagai XML (melalui HTTP Content-Typeheader - hanya menetapkan! DOCTYPEAdalah tidak cukup ) alternatif bisa menggunakan bagian CDATA:

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

Tetapi ini hanya berfungsi dalam XML, bukan dalam HTML, dan bahkan ini bukan solusi yang mudah, karena kode tidak boleh mengandung pembatas penutup ]]>. Jadi, bahkan dalam XML, solusi paling sederhana dan paling kuat adalah melalui pelolosan.

¹ Contoh kasus:

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>

Metode yang dicoba dan benar untuk HTML:

1. Ganti &karakter dengan&
2. Ganti <karakter dengan<
3. Ganti >karakter dengan>
4. Secara opsional mengelilingi sampel HTML Anda dengan <pre>dan / atau <code>tag.

Cara terbaik:

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

sampel lama:

sampel 1 :

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

sampel 2 :

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

contoh 3 : (Jika Anda benar-benar "mengutip" satu blok kode, maka markupnya adalah

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

contoh CSS yang bagus:

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

Kode penyorot sintaks (Untuk pekerjaan profesional):

pelangi (sangat sempurna)

mendandani

syntaxhighlighter

menyoroti

JSHighlighter

tautan terbaik untuk Anda:

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/

Bagaimana cara menyoroti kode sumber dalam HTML?

Jenis metode naif untuk menampilkan kode akan memasukkannya ke dalam textarea dan menambahkan atribut yang dinonaktifkan sehingga tidak dapat diedit.

<textarea disabled> code </textarea>

Semoga itu membantu seseorang mencari cara mudah untuk menyelesaikan sesuatu ..

Sudah usang , tetapi bekerja di FF3 dan IE8.

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

Direkomendasikan:

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

saya menggunakan <xmp>seperti ini: http://jsfiddle.net/barnameha/hF985/1/

<xmp>Tag yang sudah usang pada dasarnya melakukan itu tetapi tidak lagi menjadi bagian dari spesifikasi XHTML. Itu masih harus bekerja meskipun di semua browser saat ini.

Ini ide lain, trik hack / salon, Anda bisa memasukkan kode ke dalam teks seperti:

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

Menempatkan tanda kurung sudut dan kode seperti ini di dalam area teks adalah HTML yang tidak valid dan akan menyebabkan perilaku yang tidak terdefinisi di browser yang berbeda. Di Internet Explorer HTML diartikan, sedangkan Mozilla, Chrome dan Safari membiarkannya tidak diinterpretasikan.

Jika Anda ingin itu tidak dapat diedit dan terlihat berbeda maka Anda dapat dengan mudah gaya menggunakan CSS. Satu-satunya masalah adalah bahwa browser akan menambahkan pegangan seret kecil di sudut kanan bawah untuk mengubah ukuran kotak. Atau sebagai alternatif, coba gunakan tag input saja.

Cara yang tepat untuk menyuntikkan kode ke dalam textarea Anda adalah dengan menggunakan bahasa sisi server seperti PHP ini misalnya:

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

Kemudian ia memotong penerjemah html dan menempatkan teks yang tidak diinterpretasikan ke dalam textarea secara konsisten di semua browser.

Selain itu, satu-satunya cara adalah keluar dari kode sendiri jika HTML statis atau menggunakan metode sisi server seperti .NET's HtmlEncode () jika menggunakan teknologi tersebut.

Dalam HTML? Tidak.

Dalam XML / XHTML? Anda bisa menggunakan CDATAblok.

Ini sangat sederhana .... Gunakan kode xmp ini

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

Saya berasumsi:

• Anda ingin menulis 100% HTML5 yang valid
• Anda ingin menempatkan potongan kode (hampir) literal dalam HTML
  • terutama <tidak perlu melarikan diri

Semua opsi Anda ada di pohon ini:

• dengan sintaks HTML
  • ada lima macam elemen
  • yang disebut "elemen normal" (seperti <p>)
    • tidak dapat memiliki literal <
    • itu akan dianggap sebagai awal dari tag atau komentar berikutnya
  • elemen batal
    • mereka tidak memiliki konten
    • Anda bisa meletakkan HTML Anda di atribut data (tapi ini berlaku untuk semua elemen)
    • yang membutuhkan JavaScript untuk memindahkan data ke tempat lain
    • dalam atribut yang dikutip ganda, "dan &thing;perlu melarikan diri: "dan &thing;masing - masing
  • elemen teks mentah
    • <script>dan <style>hanya
    • mereka tidak pernah ditampilkan
    • tetapi menanamkan teks Anda dalam Javascript mungkin layak
    • Javascript memungkinkan untuk string multi-line dengan backtick
    • kemudian dapat dimasukkan secara dinamis
    • literal </scripttidak diizinkan di mana pun di Indonesia<script>
  • elemen teks mentah lolos
    • <textarea>dan <title>hanya
    • <textarea> adalah kandidat yang baik untuk membungkus kode
    • itu benar-benar legal untuk menulis </html>di sana
    • tidak legal adalah substring </textareakarena alasan yang jelas
      • keluar dari kasus khusus ini dengan </textareaatau serupa
    • &thing; kebutuhan untuk melarikan diri: &thing;
  • elemen asing
    • elemen dari ruang nama MathML dan SVG
    • setidaknya SVG memungkinkan penyisipan HTML lagi ...
    • dan CDATA diizinkan di sana, jadi sepertinya memiliki potensi
• dengan sintaks XML
  • ditutupi oleh jawaban Konrad

Catatan: >tidak perlu melarikan diri. Bahkan dalam elemen normal sekalipun.

Jika tujuan Anda adalah untuk menunjukkan sepotong kode yang Anda jalankan di tempat lain pada halaman yang sama, Anda dapat menggunakan textContent (ini murni-js dan didukung dengan baik: 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;

Untuk mendapatkan pemformatan multi-garis di hasilnya, Anda perlu mengatur gaya css "white-space: pre;" pada target div, dan tulis baris secara individual menggunakan "\ r \ n" di akhir masing-masing.

Berikut ini demo: https://jsfiddle.net/wphps3od/

Metode ini memiliki keunggulan dibandingkan menggunakan textarea: Kode tidak akan diformat ulang seperti dalam textarea. (Hal-hal seperti  dihapus seluruhnya dalam textarea)

Pada akhirnya jawaban terbaik (meskipun menjengkelkan) adalah "lepas teks".

Namun ada banyak editor teks - atau bahkan utilitas mini yang berdiri sendiri - yang dapat melakukan ini secara otomatis. Jadi Anda tidak perlu melarikan diri secara manual jika Anda tidak mau (Kecuali jika itu adalah kombinasi kode yang lolos dan yang tidak diloloskan ...)

Pencarian Google cepat menunjukkan kepada saya yang ini, misalnya: http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

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

berfungsi dengan baik untuk saya ..

"Mengingat Alexander'ssaran, inilah mengapa saya pikir ini adalah pendekatan yang baik"

jika kita coba polos, <textarea>itu mungkin tidak selalu berhasil karena mungkin ada textareatag penutup yang salah menutup tag induk dan menampilkan sisa sumber HTML pada dokumen induk, yang akan terlihat canggung.

menggunakan htmlentitieskonversi semua karakter yang berlaku seperti < >ke entitas HTML yang menghilangkan kemungkinan kebocoran.

Mungkin ada manfaat atau kekurangan untuk pendekatan ini atau cara yang lebih baik untuk mencapai hasil yang sama, jika demikian silakan berkomentar karena saya ingin belajar dari mereka :)

Anda bisa menggunakan bahasa sisi server seperti PHP untuk memasukkan teks mentah:

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

lalu buang nilai $strhtmlencoded:

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

Ini adalah trik sederhana dan saya sudah mencobanya di Safari dan 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>

Ini akan ditampilkan seperti ini:

Anda bisa melihatnya langsung di sini

Sebenarnya ada adalah cara untuk melakukan hal ini. Ini memiliki batasan (satu), tetapi standar 100%, tidak usang (seperti xmp), dan berfungsi.

Dan itu sepele. Ini dia:

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

Tolong izinkan saya menjelaskan. Pertama-tama, komentar HTML biasa berfungsi, untuk mencegah seluruh blok ditafsirkan. Anda dapat dengan mudah menambahkan tag apa pun di dalamnya, semuanya akan diabaikan. Diabaikan dari interpretasi, tetapi masih tersedia via innerHTML! Jadi yang tersisa, adalah untuk mendapatkan konten, dan memfilter token komentar sebelumnya dan tertinggal.

Kecuali (ingat - batasannya) Anda tidak dapat memasukkan komentar HTML di dalamnya, karena (setidaknya di Chrome saya) tidak ada yang mendukung, dan '->' pertama akan mengakhiri pertunjukan.

Yah, itu adalah batasan kecil yang tidak menyenangkan, tetapi dalam kasus-kasus tertentu itu tidak masalah sama sekali, jika teks Anda bebas dari komentar HTML. Dan, lebih mudah untuk lolos dari satu konstruksi, lalu sejumlah besar dari mereka.

Sekarang, apa LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJostring aneh itu ? Ini string acak, seperti hash, tidak mungkin digunakan di blok, dan digunakan untuk? Inilah konteksnya, mengapa saya menggunakannya. Dalam kasus saya, saya mengambil konten dari satu DIV, lalu memprosesnya dengan penurunan harga Showdown, dan kemudian output ditugaskan ke div lain. Idenya adalah, untuk menulis penurunan harga inline dalam file HTML, dan cukup buka di browser dan itu akan berubah pada beban on-the-fly. Jadi, dalam kasus saya, <!--diubah menjadi <p><!--</p>, komentar dengan benar lolos. Itu berhasil, tetapi mencemari layar. Jadi, untuk menghapusnya dengan regex, string acak digunakan. Berikut kodenya:

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

Dan itu berhasil.

Jika seseorang tertarik, artikel ini ditulis menggunakan teknik ini. Jangan ragu untuk mengunduh, dan lihat ke dalam file HTML.

Tergantung untuk apa Anda menggunakannya. Apakah itu input pengguna? Kemudian gunakan <textarea>, dan lepaskan semuanya. Dalam kasus saya, dan mungkin Anda juga, saya hanya menggunakan komentar, dan itu berhasil.

Jika Anda tidak menggunakan markdown, dan hanya ingin mendapatkannya dari tag, maka itu lebih sederhana:

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

dan kode JavaScript untuk mendapatkannya:

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

Ada beberapa cara untuk menghindari semuanya dalam HTML, tidak ada yang bagus.

Atau Anda bisa memasukkan iframeyang memuat file teks biasa.

Sejauh ini, ini adalah metode terbaik untuk sebagian besar situasi:

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

Saya akan memilih orang pertama yang menyarankannya tetapi saya tidak memiliki reputasi. Saya merasa terdorong untuk mengatakan sesuatu demi orang-orang yang mencoba menemukan jawaban di Internet.

Beginilah cara saya melakukannya:

$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

itu akan mengembalikan Html yang lolos

Kamu bisa mencoba:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

Ini mungkin tidak berfungsi di setiap situasi, tetapi menempatkan potongan kode di dalam textareaakan menampilkannya sebagai kode.

Anda bisa menata textarea dengan CSS jika Anda tidak ingin itu terlihat seperti textarea yang sebenarnya.

Ini sedikit meretas, tetapi kita bisa menggunakan sesuatu seperti:

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>

Dengan CSS itu, browser akan menampilkan skrip di dalam tubuh. Itu tidak akan mencoba untuk mengeksekusi skrip ini, karena memiliki jenis yang tidak dikenal text/html. Tidak perlu keluar dari karakter khusus di dalam <script>, kecuali jika Anda ingin menyertakan </script>tag penutup .

Saya menggunakan sesuatu seperti ini untuk menampilkan JavaScript yang dapat dieksekusi di badan halaman, untuk semacam "melek huruf progamming".

Ada beberapa info lagi dalam pertanyaan ini Kapan seharusnya tag terlihat dan mengapa bisa? .

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

Kombinasi jawaban pasangan yang bekerja bersama di sini:

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>