Tampilkan cuplikan HTML dalam HTML


208

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

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

Jawaban:


95

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

  • & sebagai &amp;
  • < sebagai &lt;

(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 . 1

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.


1 Contoh kasus:


Bagus. Jadi itu bagian dari standar HTML? Atau lebih dalam, seperti bagian dari standar xml?
aioobe

7
Dalam HTML, ini akan merender `di sini]]>`
Dolph

3
Ya, ini adalah jawaban yang baik, tetapi jangan lupa untuk mengganti >dengan &gt;
Alan

2
@Alan saya akan melakukan ini juga, tetapi sebenarnya tidak perlu : hanya <dan &perlu diganti, unescaped >valid di dalam HTML.
Konrad Rudolph

1
@ SamWatkins Tapi solusi Anda tidak lebih mudah daripada milik saya . Anda baru saja mengubah apa yang perlu diloloskan, dan solusi Anda tidak jelas, seperti yang Anda akui. Tidak ada keuntungan jika melakukannya dengan benar. Ini adalah masalah yang diselesaikan dengan solusi yang benar. Tidak perlu melakukan peretasan, kecuali seluruh pengaturan Anda rusak.
Konrad Rudolph

161

Metode yang dicoba dan benar untuk HTML:

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

17
Kiat: Untuk mempercepat penggantian kode HTML Anda dapat menggunakan Notepad ++ dengan ekstensi 'TextFX'. Tandai teks, pergi ke menu> TextFX> TextFX Convert> Encode HTML (& <> ") → Selesai.
Kai Noack

2
Apakah ada pustaka JavaScript yang ada yang bisa melakukan ini, kebetulan?
Anderson Green

9
Ini tidak menjawab pertanyaan, yang mengatakan "tanpa perlu mengganti ...". Selain itu, mengganti ">" tidak perlu.
Jukka K. Korpela

2
Dan urutannya juga penting. Pastikan Anda menangani yang &pertama dan <sesudahnya.
Tolga Evcimen

151

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?


4
Elemen-elemen yang digunakan dalam jawaban tidak menjawab pertanyaan sama sekali: mereka tidak mempengaruhi interpretasi "<" memulai tag.
Jukka K. Korpela

7
developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp mengatakan, " Jangan gunakan elemen ini . Ini sudah ditinggalkan sejak HTML3.2 dan tidak diterapkan secara konsisten. Itu sepenuhnya dihapus dari bahasa dalam HTML5. "
Nick Rice

50

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


7
Readonly mungkin atribut yang lebih baik daripada dinonaktifkan sehingga Anda dapat menyorot teks di dalamnya. Juga mungkin menambahkan gaya yang menghilangkan semua fitur yang membuatnya terlihat seperti elemen input, meskipun itu adalah sekunder.
Tarquin

2
Solusi yang luar biasa. Terima kasih
Apit John Ismail

1
Ampersand masih akan ditafsirkan. mis. & nbsp; akan diberikan sebagai ruang tanpa melanggar aktual. Namun jawaban yang baik tetap ideal untuk sesuatu yang ingin saya lakukan.
Nick Rice

1
Saya sudah mencoba banyak cara, dan ini adalah satu-satunya cara yang bekerja untuk saya. Terima kasih banyak.
William Hou

25

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>


12

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


1
ini ide yang mengerikan. Bagaimana jika itu html dinamis yang ditampilkan, dan seseorang melakukan hal berikut. <? php echo '</textarea> <script> lansiran (\' hello world \ '); </script> <textarea>'; />. Karenanya kode Anda rentan terhadap xss.
Gary Drocella

PHP adalah sisi-server, sehingga tidak mengubah hasil yang dilihat oleh browser. Terutama tidak memotong penerjemah HTML.
Robert Siemer

Saya suka format textarea untuk membuatnya tidak terlihat seperti kotak input. Saya juga menambahkan lebar 100% untuk mengurangi pembungkus:<textarea disabled="true" style="border: none;background-color:white; width:100%">
Dan King

@GaryDrocella jika Anda memasukkan tag <script> ke dalam tetarea, tag tersebut dikonversi ke & lt; dan & gt; secara otomatis, jadi tidak ada skrip yang pernah dieksekusi
bluejayke

6

Dalam HTML? Tidak.

Dalam XML / XHTML? Anda bisa menggunakan CDATAblok.


6

Ini sangat sederhana .... Gunakan kode xmp ini

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

6

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: &quot;dan &amp;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 &lt;/textareaatau serupa
      • &thing; kebutuhan untuk melarikan diri: &amp;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

 

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


1
Saya suka pendekatan komprehensif jawaban Anda. Beberapa koreksi: <script>dan <style>dapat ditampilkan, cukup letakkan di dalam <body>with style="display: block; white-space: pre;"dan type="text/html"atau sesuatu jika Anda tidak ingin dieksekusi sebagai JavaScript. Trik yang cukup bagus menurut saya, bagus untuk pemrograman dan pengajaran yang melek. Juga <xmp>masih diterapkan di browser utama, meskipun sudah usang.
Sam Watkins

Menarik. @SamWatkins <xmp>bukan HTML5 yang valid, tetapi trik Anda yang lain terlihat tepat!
Robert Siemer

5

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 &nbsp;dihapus seluruhnya dalam textarea)


Itu pendekatan yang cukup bagus, untuk menggunakan JavaScript dan DOM API untuk melakukan pelarian bagi kami. Kita bisa menggunakannya bersama dengan <template>atau sesuatu yang biasanya tidak diberikan.
Sam Watkins

3

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


3
<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 :)


2
Sementara kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang bagaimana dan mengapa memecahkan masalah akan meningkatkan nilai jangka panjang jawaban.
Alexander

1
Jika Anda menggunakan htmlentities () seperti itu, <textarea> menjadi mubazir. Taruh saja di div atau sesuatu. OP tidak menyarankan mereka menggunakan PHP sama sekali.
Nick Rice

@Nick yeah well, menurut saya textarea berfungsi sebagai wadah alami karena secara otomatis akan menambahkan scrollbar dan hal-hal yang jika tidak perlu styling jika kita meletakkannya di div sesuatu ..
Anupam

2

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>

2

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:

masukkan deskripsi gambar di sini

Anda bisa melihatnya langsung di sini


2

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, "");

1

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

Atau Anda bisa memasukkan iframeyang memuat file teks biasa.


1

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.


1

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

kode ini rentan terhadap xss. siapa pun dapat menetapkan $ str = "</textarea> <textarea>"
Gary Drocella

Hai, ini mungkin bisa menyelesaikan masalah ... tapi akan lebih baik jika Anda bisa memberikan sedikit penjelasan tentang bagaimana dan mengapa ia bekerja :) Jangan lupa - ada banyak pemula di Stack overflow, dan mereka bisa belajar satu atau dua hal dari keahlian Anda - yang jelas bagi Anda mungkin tidak demikian bagi mereka.
Taryn East

1
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


1

Kamu bisa mencoba:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>


0

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.


0

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


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

-2

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>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.