I'd seperti untuk menampilkan HTML mentah. Kita semua tahu seseorang untuk melarikan diri masing-masing "<" dan ">" seperti ini
<PRE> this is a test <DIV> </PRE>
Namun, saya tidak ingin melakukan ini. I'd seperti cara untuk membuat kode HTML seperti ini (karena lebih mudah untuk membaca, (di dalam editor) dan aku mungkin ingin copy dan menggunakannya lagi diriku yang sebenarnya kode-kode HTML, dan tidak ingin mengubahnya lagi atau memiliki 2 versi dari kode yang sama yang lolos dan tidak lolos).
Apakah ada lingkungan lain yang lebih "raw" dari PRA yang mungkin membiarkan hal ini? Jadi orang tidak harus menyimpan mengedit HTML dan mengubah segalanya setiap kali mereka ingin menunjukkan beberapa baku HTML, mungkin di HTML5?
Sesuatu seperti <REALLY_REALLY_VERBATIM> ...... </<REALLY_REALLY_VERBATIM>
screen shot
Javascript solusi tidak bekerja pada FF 21, berikut ini adalah screen shot
screen shot 2
Solusi pertama masih tidak bekerja pada firefox, berikut ini adalah screen shot
Anda dapat menggunakan xmp
elemen, lihat https://stackoverflow.com/questions/4545/what-was-the-xmp-tag-used-for. Telah di HTML sejak awal dan didukung oleh semua browser. Spesifikasi kerutan pada itu, tapi HTML5 CR masih menjelaskan hal itu dan membutuhkan browser untuk mendukung hal itu (meskipun itu juga memberitahu penulis untuk tidak menggunakannya, tapi itu tidak benar-benar mencegah anda).
Segala sesuatu di dalam xmp
diambil seperti itu, tidak ada markup (kategori atau referensi karakter) diakui ada, kecuali, untuk alasan yang jelas, akhir tag elemen itu sendiri, </xmp>
.
Jika tidak xmp
yang diberikan seperti pra
.
Ketika menggunakan "real XHTML", yaitu XHTML disajikan dengan XML jenis media (yang langka), khusus parsing aturan tidak berlaku, jadi xmp
diperlakukan seperti pra
. Tapi dalam "real XHTML", anda dapat menggunakan CDATA bagian, yang berarti sama parsing aturan. Ia tidak memiliki format khusus, sehingga anda mungkin akan ingin membungkusnya di dalam pra
elemen:
<pre><![CDATA[
This is a demo, tags like <p> will
appear literally.
]]></pre>
Saya tidak melihat bagaimana anda bisa menggabungkan xmp
dan bagian CDATA untuk mencapai yang disebut polyglot markup
Pada dasarnya pertanyaan awal dapat dibagi dalam 2 bagian:
"c "data" di sini"
atau <i>..dekat miring dengan '</i>'-tag</i>
, di mana hal ini jelas salah satu harus melarikan diri/encode (sesuatu) </i
dan "
(atau mengubah kontainer's quote-karakter dari "
ke '
).
Jadi, karena aturan no 1, anda dapat't 'hanya' cantumkan 'ada' yang tidak diketahui baku kode-cuplikan dalam markup.
Karena, jika salah satu telah untuk melarikan diri/encode satu karakter dalam baku cuplikan, maka potongan akan tidak lagi sama asli 'baku murni kode' bahwa siapa pun dapat copy/paste/mengedit dokumen's markup tanpa berpikir lebih lanjut. Hal itu akan menyebabkan kecacatan/ilegal markup dan Mojibake (terutama) karena entitas.
Juga, harus cuplikan yang mengandung karakter tersebut, anda'd masih butuh javascript untuk 'menerjemahkan' bahwa karakter(urutan) dari (dan untuk) it's melarikan diri/dikodekan representasi untuk menampilkan snippet benar di 'web' (untuk copy/paste/edit).
Yang membawa kita ke (beberapa) tipe data bahwa markup-bahasa menentukan. Ini tipe-tipe data pada dasarnya mendefinisikan apa yang dianggap 'berlaku karakter' dan maknanya (per tag, properti, dll.): PCDATA
(Parsing DATA Karakter): akan memperluas entitas dan salah satu harus
melarikan diri <
, &
(dan >
tergantung pada bahasa markup/versi).
Sebagian besar kategori seperti tubuh
, div
, pra
, dll, tapi juga textarea
(sampai
HTML5) termasuk dalam jenis ini.
Jadi anda tidak hanya perlu untuk mengkodekan semua wadah's penutupan karakter-urutan
dalam cuplikan, anda juga harus mengkodekan semua <
, &
(,>
) karakter
(minimal).
Tak perlu dikatakan, encoding/melarikan diri ini banyak karakter yang jatuh di luar ini
tujuan's lingkup embedding baku cuplikan di markup.
'..Tapi textarea tampaknya bekerja...', ya, baik karena browser
kesalahan-mesin mencoba untuk membuat sesuatu dari itu, atau karena HTML5: RCDATA
(Diganti DATA Karakter): tidak akan, tidak mengobati kategori di dalam
teks sebagai markup (tapi masih diatur oleh aturan 1), maka salah satu doesn't perlu
encode <
(>
). TAPI badan masih diperluas, sehingga mereka dan 'ambigu
ampersand' (&
) perlu perawatan khusus.
Yang saat ini ** HTML5 spec kata textarea sekarang RCDATA
field dan (kutipan): teks dalam
teks mentah
danRCDATA
elemen tidak mengandung kemunculan string"</"
(U+003C KURANG TANDA, U+002F SOLIDUS) diikuti oleh karakter-karakter yang tidak membedakan besar huruf sesuai dengan tag nama elemen diikuti oleh salah satu U+0009 KARAKTER TABULASI (tab), U+000A LINE FEED (LF), U+000C BENTUK FEED (FF), U+D 000 CARRIAGE RETURN (CR), U+0020 RUANG, U+003E lebih BESAR DARI tanda-TANDA (>), atau U+002F SOLIDUS (/). Jadi tidak peduli apa, textarea kebutuhan yang lumayan entitas terjemahan handler atau hal ini akan ** akhirnya Mojibake pada badan!
CDATA
(Data Karakter) tidak akan memperlakukan kategori di dalam teks sebagai
markup dan tidak akan memperluas entitas.
Jadi selama baku cuplikan kode yang tidak melanggar aturan 1 (satu itu dapat't
memiliki wadah penutupan karakter(urutan) dalam cuplikan), ini
membutuhkan tidak ada lain melarikan diri/encoding.
Jelas ini bermuara untuk: bagaimana kita bisa meminimalkan jumlah karakter/karakter-urutan yang masih harus dikodekan dalam cuplikan's sumber baku dan jumlah kali bahwa karakter(urutan) yang mungkin muncul di rata-rata cuplikan; sesuatu yang juga penting untuk javascript yang menangani terjemahan dari karakter ini (jika terjadi).
Jadi apa yang 'wadah' ini CDATA
konteks?
Nilai sifat tag CDATA, jadi satu bisa (ab)menggunakan input tersembunyi's nilai properti ([bukti dari konsep jsfiddle di sini][3]).
Namun (sesuai aturan 1) hal ini menciptakan sebuah encoding/melarikan diri masalah nested dengan tanda kutip ("
dan '
) dalam baku cuplikan dan salah satu kebutuhan beberapa javascript untuk dapatkan/menerjemahkan dan mengatur potongan lain (terlihat) elemen (atau hanya menetapkan sebagai teks-daerah's value). Entah bagaimana ini memberi saya masalah dengan entitas di FF (seperti di textarea). Tapi itu doesn't benar-benar peduli, karena 'harga' memiliki untuk melarikan diri/encode bersarang kutipan lebih tinggi maka a (HTML5) textarea (kutipan yang cukup umum dalam kode sumber..).
Bagaimana tentang mencoba untuk (ab)menggunakan <![CDATA[<tag>bla & bla</tag>]]>
?
Sebagai Jukka poin dalam nya diperpanjang menjawab, ini hanya akan bekerja dalam (jarang) 'real xhtml'.
Saya berpikir untuk menggunakan script-tag (dengan atau tanpa CDATA pembungkus di dalam naskah-tag) bersama-sama dengan multi-line comment /* */
yang membungkus baku cuplikan (script-kategori dapat memiliki sebuah id
dan anda dapat mengaksesnya dengan menghitung). Tapi karena ini jelas memperkenalkan melarikan diri masalah dengan */
, ]]>
dan </script
dalam baku cuplikan, ini doesn't tampak seperti solusi yang baik.
Silahkan posting lain yang layak 'wadah' di komentar untuk jawaban ini.
By the way, pengkodean atau menghitung jumlah -
karakter dan menyeimbangkan mereka keluar di dalam tag komentar <!-- -->
hanya gila untuk tujuan ini (terlepas dari aturan 1). <!-- ATTENTION: replace any occurrence of </xmp with </xmp -->
<xmp id="snippet-container">
<div>
<div>this is an example div & holds an xmp tag:<br />
<xmp>
<html><head> <!-- indentation col 0!! -->
<title>My Title</title>
</head><body>
<p>hello world !!</p>
</body></html>
</xmp> <!-- note this encoded/escaped tag -->
</div>
This line is also part of the snippet
</div>
</xmp>
Di atas codeblok menggambarkan baku bagian dari markup mana <xmp id="cuplikan-wadah">
berisi (hampir baku) kode-cuplikan (mengandung div>div>xmp>html-dokumen
).
Perhatikan dikodekan tag penutup di markup ini? Untuk mematuhi aturan no 1, ini adalah dikodekan/kabur).
Jadi embedding/mengangkut (kadang-kadang hampir) baku kode/tampaknya diselesaikan.
Bagaimana menampilkan/rendering cuplikan (dan yang dikodekan </xmp>
)?
Browser akan (atau harus) membuat cuplikan (isi di dalam cuplikan-container
) tepat cara anda melihat itu di codeblock di atas (dengan beberapa perbedaan di antara browser atau tidaknya cuplikan dimulai dengan baris kosong).
Yang termasuk format/lekukan, entitas (seperti string &
), full tag, komentar DAN dikodekan penutupan tag </xmp>
(hanya seperti itu dikodekan dalam markup). Dan tergantung pada browser(versi) salah satu bahkan bisa mencoba menggunakan properti contenteditable="benar"
untuk mengedit potongan ini (tanpa javascript). Melakukan sesuatu seperti textarea.nilai=xmp.innerHTML
juga angin.
Jadi anda dapat... jika snippet doesn't mengandung wadah penutupan karakter-urutan.
Namun, harus baku cuplikan yang mengandung penutupan karakter-urutan </xmp
(karena itu adalah contoh dari xmp sendiri atau mengandung beberapa regex, dll), anda harus menerima bahwa anda harus encode/melarikan diri bahwa urutan dalam baku cuplikan DAN membutuhkan javascript handler untuk menerjemahkan bahwa pengkodean untuk menampilkan/membuat dikodekan </xmp>
suka </xmp>
di dalam textarea
(untuk mengedit/posting) atau (misalnya) pra
hanya untuk benar menampilkan cuplikan's kode (atau sepertinya begitu).
Sangat dasar [jsfiddle contoh ini di sini][6]. Perhatikan bahwa semakin/embedding/menampilkan/mengambil-untuk-textarea bekerja sempurna bahkan di IE6. Tapi pengaturan xmp
's innerHTML
mengungkapkan beberapa menarik 'akan-menjadi-cerdas' perilaku pada IE's bagian. Ada yang lebih luas catatan dan solusi itu di biola.
Tapi sekarang datang penting kicker (alasan lain mengapa anda hanya mendapatkan sangat dekat):
Hanya satu contoh sederhana, bayangkan ini kelinci-lubang:
Dimaksudkan baku kode-cuplikan:
<!-- remember to translate between </xmp> and </xmp> -->
<xmp>
<p>a paragraph</p>
</xmp>
Nah, untuk mematuhi aturan 1, we 'hanya' perlu encode mereka </xmp[> \n\r\t\f\/]
urutan, kan?
Sehingga memberikan kita markup berikut (menggunakan hanya mungkin encoding):
<xmp id="container">
<!-- remember to translate between </xmp> and </xmp> -->
<xmp>
<p>a paragraph</p>
</xmp>
</xmp>
Hmm.. boleh saya mendapatkan bola kristal atau melempar koin? Tidak, biarkan komputer melihat sistem-jam dan keadaan yang berasal nomor 'random'. Ya, itulah yang harus dilakukan..
Menggunakan regex suka: xmp.innerHTML.mengganti(/<(?=\/xmp[> \n\r\t\f\/])/gi, '<');
, akan menerjemahkan 'kembali' untuk ini:
<!-- remember to translate between </xmp> and </xmp> -->
<xmp>
<p>a paragraph</p>
</xmp>
Hmm.. tampaknya ini random generator rusak... Houston..?
Anda harus melewatkan hal/masalah, baca lagi mulai di 'dimaksudkan baku kode-cuplikan'.
Tunggu, aku tahu, kita (juga) harus encode .... untuk ....
Ok, mundur ke 'dimaksudkan baku kode-cuplikan' dan baca lagi.
Entah bagaimana ini semua mulai berbau seperti yang terkenal lucu-tapi-benar rexgex-jawaban pada JADI, membaca yang baik bagi orang-orang yang fasih dalam mojibake.
Mungkin ada yang tahu algoritma pintar atau solusi untuk memperbaiki masalah ini, tapi saya berasumsi bahwa yang tertanam baku kode akan mendapatkan lebih banyak dan lebih jelas ke titik di mana anda'a menjadi lebih baik dari benar melarikan diri/encoding hanya <
, &
(dan >
), seperti sisa dari dunia.
Kesimpulan: (menggunakan xmp
tag)
Harap ini membantu!
PS:
Sementara saya akan menghargai upvote jika anda menemukan penjelasan ini berguna, saya pikir Jukka's jawaban harus diterima jawaban (harus ada pilihan yang lebih baik/jawaban datang bersama), karena ia adalah orang yang ingat xmp tag (yang saya lupa tentang selama bertahun-tahun dan punya 'terganggu' pada umumnya menganjurkan PCDATA unsur-unsur seperti pre
, textarea
, dll.).
Jawaban ini berasal menjelaskan mengapa anda dapat't melakukan itu (dengan yang tidak diketahui baku snippet) dan menjelaskan beberapa jelas perangkap yang lain (sekarang sudah dihapus) jawaban diabaikan ketika menasihati textarea untuk embedding/transportasi. I've diperluas saya ada penjelasan juga mendukung dan menjelaskan lebih lanjut Jukka's jawaban (karena semua yang badan dan *CDATA hal ini hampir lebih keras dari kode-halaman).
Murah dan ceria menjawab:
<textarea>Some raw content</textarea>
Textarea akan menangani tab, beberapa spasi, baris, baris membungkus semua kata-katanya. Itu copy-paste dengan baik dan valid HTML semua cara. Hal ini juga memungkinkan pengguna untuk mengubah ukuran kotak kode. Anda don't perlu setiap CSS, JS, melarikan diri, encoding.
Anda dapat mengubah penampilan dan perilaku serta. Berikut ini's monospace font, editing tamu dengan kebutuhan khusus, font yang lebih kecil, tidak ada perbatasan:
<textarea
style="width:100%; font-family: Monospace; font-size:10px; border:0;"
rows="30" disabled
>Some raw content</textarea>
Solusi ini mungkin tidak semantik benar. Jadi jika anda membutuhkannya, mungkin akan lebih baik untuk memilih yang lebih canggih menjawab.
@GitaarLAB dan @Jukka menjelaskan bahwa <xmp>
tag usang, tapi masih yang terbaik. Ketika saya gunakan seperti ini
<xmp>
<div>Lorem ipsum</div>
<p>Hello</p>
</xmp>
maka yang pertama EOL dimasukkan di dalam kode, dan itu [tampak mengerikan](
).Hal itu dapat diatasi dengan menghapus yang EOL
<xmp><div>Lorem ipsum</div>
<p>Hello</p>
</xmp>
tapi kemudian terlihat buruk di sumber. Aku digunakan untuk menyelesaikannya dengan pembungkus <div>
, tapi baru-baru ini saya tahu bagus CSS3 aturan, saya berharap hal ini juga membantu seseorang:
xmp { margin: 5px 0; padding: 0 5px 5px 5px; background: #CCC; }
xmp:before { content: ""; display: block; height: 1em; margin: 0 -5px -2em -5px; }
Ini [terlihat baik](
1/).