HTML snippet'lerini HTML olarak görüntüleme

Nasıl her yerine gerek kalmadan web sayfasındaki HTML parçacıkları gösterebilir <ile <ve >ile >?

Başka bir deyişle, kapanış etiketine ulaşana kadar HTML oluşturmadığınız için bir etiket var mı?

Hayır , yok. HTML biçiminde, bazı karakterlerden kaçmanın bir yolu yoktur:

• & gibi &
• < gibi <

(Bu arada, kaçmaya gerek yoktur, >ancak insanlar genellikle simetri nedeniyle bunu yaparlar.)

Ve elbette, sonuçta ortaya çıkan, kaçan HTML kodunu <pre><code>…</code></pre>(a) boşluk ve satır sonlarını korumak ve (b) bir kod öğesi olarak işaretlemeniz gerekir.

Böyle bir içine kodunuzu sarma gibi diğer tüm çözümler, <textarea>ya da (kaldırıldı) <xmp>elemanı, kıracak . ¹

XML olarak tarayıcıya bildirildi XHTML (via HTTP Content-Typebaşlık - sadece bir ayar! DOCTYPEOlduğunu yetmez ) alternatif bir CDATA bölümü kullanabilirsiniz:

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

Ancak bu, HTML'de değil, yalnızca XML'de çalışır ve kodun kapatma sınırlayıcısını içermemesi gerektiğinden bu bile kusursuz bir çözüm değildir ]]>. XML'de bile en basit, en sağlam çözüm kaçmaktır.

¹ Örnek olay:

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 için denenmiş ve gerçek yöntem:

1. &Karakteri değiştir&
2. <Karakteri değiştir<
3. >Karakteri değiştir>
4. İsteğe bağlı olarak HTML örneğinizi <pre>ve / veya <code>etiketlerle çevreleyin .

en iyi yol:

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

eski örnekleri:

örnek 1 :

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

örnek 2 :

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

örnek 3 : (Aslında bir kod bloğunu "alıntılıyorsanız", biçimlendirme olur)

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

güzel CSS örneği:

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

Sözdizimi vurgulama kodu (Profesyonel çalışma için):

gökkuşağı (çok mükemmel)

güzelleştirmek

syntaxhighlighter

vurgulamak

JSHighlighter

sizin için en iyi bağlantılar:

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'de kaynak kodu nasıl vurgulanır?

Kodu görüntülemek için naif bir yöntem, onu bir metin alanına dahil etmek ve düzenlenebilir olmaması için devre dışı niteliğini eklemek olacaktır.

<textarea disabled> code </textarea>

İşleri halletmek için kolay bir yol arayan birine yardım etmeyi umuyoruz ..

Kullanımdan kaldırıldı , ancak FF3 ve IE8'de çalışıyor.

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

Önerilen:

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

<xmp>aynen böyle kullandım : http://jsfiddle.net/barnameha/hF985/1/

Kullanımdan kaldırılan <xmp>etiket aslında bunu yapıyor ancak artık XHTML spesifikasyonunun bir parçası değil. Yine de mevcut tüm tarayıcılarda çalışmalıdır.

İşte başka bir fikir, bir hack / salon hilesi, kodu şöyle bir metin alanına koyabilirsiniz:

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

Bir metin alanının içine köşeli ayraçlar ve kod koymak geçersiz HTML'dir ve farklı tarayıcılarda tanımlanmamış davranışa neden olur. Internet Explorer'da HTML yorumlanırken Mozilla, Chrome ve Safari bunu yorumlanmadan bırakır.

Düzenlenemez olmasını ve farklı görünmesini istiyorsanız, CSS kullanarak kolayca stil uygulayabilirsiniz. Tek sorun, tarayıcıların kutuyu yeniden boyutlandırmak için sağ alt köşeye bu küçük sürükleme tutamacını ekleyecek olmasıdır. Alternatif olarak, bunun yerine bir giriş etiketi kullanmayı deneyin.

Metin alanınıza kod eklemenin doğru yolu, bu PHP gibi sunucu tarafı dilini kullanmaktır:

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

Daha sonra html yorumlayıcısını atlar ve yorumlanmamış metni tüm tarayıcılarda tutarlı bir şekilde textarea içine koyar.

Bunun dışında, tek yol statik HTML veya kendiniz böyle bir teknoloji kullanıyorsanız .NET HtmlEncode () gibi sunucu tarafı yöntemleri kullanarak kodu kendiniz kaçmak için.

HTML'de mi? Hayır.

XML / XHTML'de mi? Bir CDATAblok kullanabilirsiniz .

Çok basit .... Bu xmp kodunu kullanın

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

Sanırım:

• % 100 geçerli bir HTML5 yazmak istiyorsunuz
• kod pasajını (neredeyse) değişmez kelimeyi HTML'ye yerleştirmek istiyorsunuz
  • özellikle <kaçmaya gerek yok

Tüm seçenekleriniz bu ağaçta:

• HTML sözdizimi ile
  • beş çeşit unsur var
  • "normal elemanlar" olarak adlandırılanlar (gibi <p>)
    • değişmez olamaz <
    • bir sonraki etiketin veya yorumun başlangıcı sayılır
  • geçersiz elemanlar
    • onların içeriği yok
    • HTML'nizi bir veri özelliğine koyabilirsiniz (ancak bu tüm öğeler için geçerlidir)
    • verileri başka bir yere taşımak için JavaScript gerekir
    • çift ​​tırnaklı özniteliklerde "ve &thing;kaçmak gerekir: "ve &thing;sırasıyla
  • ham metin öğeleri
    • <script>ve <style>sadece
    • asla görünür kılınmazlar
    • ancak metninizi Javascript'e gömmek mümkün olabilir
    • Javascript, ters tırnaklı çok satırlı dizelere izin verir
    • daha sonra dinamik olarak eklenebilir
    • bir </scriptyerde değişmez bir değere izin verilmez<script>
  • kaçan ham metin öğeleri
    • <textarea>ve <title>sadece
    • <textarea> kodu girmek için iyi bir aday
    • yazmak için tamamen yasal olduğunu </html>orada
    • </textareabariz nedenlerden dolayı yasal değil
      • bu özel durumdan </textareaveya benzeri bir durumdan kaç
    • &thing; kaçmak gerekiyor: &thing;
  • yabancı unsurlar
    • MathML ve SVG ad alanlarındaki öğeler
    • en azından SVG, HTML'nin tekrar yerleştirilmesine izin veriyor ...
    • ve orada CDATA'ya izin verilir, bu yüzden potansiyel var gibi görünüyor
• XML sözdizimi ile
  • Konrad'ın cevabı kapsamında

Not: >asla kaçmaya gerek yoktur. Normal elemanlarda bile.

Amacınız aynı sayfada başka bir yerde yürütmekte olduğunuz bir kod parçasını göstermekse textContent'i kullanabilirsiniz (pure-j'ler ve iyi desteklenir: 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;

Sonuçta çok satırlı biçimlendirme elde etmek için, css stilini "white-space: pre;" hedef div üzerine yazın ve satırların her birini "\ r \ n" kullanarak tek tek yazın.

İşte bir demo: https://jsfiddle.net/wphps3od/

Bu yöntemin textarea kullanımına göre bir avantajı vardır: Kod bir textarea'da olduğu gibi yeniden biçimlendirilmeyecektir. (Gibi şeyler  bir metin alanında tamamen kaldırılır)

Sonuçta en iyi (can sıkıcı olsa da) cevap "metinden kaçmak" tır.

Bununla birlikte, bunu otomatik olarak yapabilen çok sayıda metin düzenleyici - hatta bağımsız mini yardımcı program var. Bu yüzden, eğer istemiyorsanız asla manuel olarak kaçmak zorunda kalmazsınız (Kaçan ve kaçan kodun bir karışımı olmadığı sürece ...)

Hızlı Google araması bana bunu gösteriyor, örneğin: http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

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

benim için iyi çalışıyor ..

" Alexander'söneri akılda tutularak , bunun iyi bir yaklaşım olduğunu düşünüyorum"

sadece düz <textarea>denersek, her zaman işe yaramayabilir, çünkü textareaüst etiketi yanlış kapatabilir ve üst belgede HTML kaynağının geri kalanını görüntüleyebilir, bu da garip görünebilir.

kullanarak htmlentities, < >herhangi bir sızıntı olasılığını ortadan kaldıran HTML varlıkları gibi tüm geçerli karakterleri dönüştürür .

Belki de bu yaklaşımın faydaları veya eksiklikleri veya aynı sonuçları elde etmenin daha iyi bir yolu vardır, eğer öyleyse lütfen onlardan öğrenmek istediğim gibi yorum yapın :)

Ham metin eklemek için PHP gibi bir sunucu tarafı dili kullanabilirsiniz:

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

sonra $strhtmlencoded değerini boşaltın:

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

Bu basit bir hile ve Safari ve Firefox'ta denedim

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

Şöyle görünecektir:

Burada canlı görebilirsiniz

Aslında orada olduğunu bunu yapmanın bir yolu. Sınırlaması (bir) vardır, ancak% 100 standarttır, kullanımdan kaldırılmamıştır (xmp gibi) ve çalışır.

Ve önemsiz. İşte burada:

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

Lütfen açıklamama izin verin. Her şeyden önce, tüm bloğun yorumlanmasını önlemek için sıradan HTML yorumu işi yapar. Herhangi bir etiketi kolayca ekleyebilirsiniz, hepsi yok sayılır. Yorumdan yoksundur, ancak şu yolla ulaşılabilir:innerHTML ! Yani geriye kalan, içeriği almak ve önceki ve sondaki yorum simgelerini filtrelemektir.

Dışında (en azından Chrome'umda) bunların iç içe geçmesi desteklenmediğinden ve çok önce '->' şovu sona erdireceğinden, (hatırlayın - sınırlama) içine HTML yorumları koyamazsınız.

Eh, bu kötü bir küçük sınırlamadır, ancak metninizde HTML yorumları içermiyorsa, bazı durumlarda hiç sorun değildir. Ve, bir yapıdan kaçmak daha kolay, daha sonra bir sürü yapı.

Şimdi, bu tuhaf LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJoip nedir? Bir karma gibi blokta kullanılmaya ve kullanılmayacak rastgele bir dize mi? Bağlam, neden kullandığım. Benim durumumda, bir DIV'nin içeriğini aldım, sonra Showdown markdown ile işledim ve çıktı başka bir div'a atandı. Fikir, HTML dosyasına satır içi işaretleme yazmak ve sadece bir tarayıcıda açmaktı ve anında yüke dönüşecekti. Yani, benim durumumda, <!--dönüştü <p><!--</p>, yorum düzgün bir şekilde kaçtı. Çalıştı, ancak ekranı kirletti. Böylece, regex ile kolayca kaldırmak için rastgele dize kullanıldı. İşte kod:

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

Ve çalışıyor.

Birisi ilgileniyorsa, bu makale bu teknik kullanılarak yazılmıştır. İndirmekten çekinmeyin ve HTML dosyasının içine bakın.

Ne için kullandığınıza bağlıdır. Kullanıcı girişi mi? Sonra <textarea>her şeyi kullanın ve kaçın.Benim durumumda, ve muhtemelen sizin durumunuzda, sadece yorumları kullandım ve işi yapıyor.

Markdown kullanmıyorsanız ve sadece bir etiketten olduğu gibi almak istiyorsanız, o zaman daha da basittir:

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

ve JavaScript kodunu edinin:

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

Her şeyden kaçmanın birkaç yolu varHTML'deki , hiçbiri hoş değildir.

Veya iframedüz eski bir metin dosyası yükleyen bir koyabilirsiniz .

Bu, çoğu durum için açık ara en iyi yöntemdir:

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

Bunu öneren ilk kişiye oy verirdim ama itibarım yok. İnternette cevap bulmaya çalışan insanlar uğruna bir şeyler söylemeye mecbur hissettim.

Ben böyle yaptım:

$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

kaçan Html'yi döndürecek

Deneyebilirsiniz:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

Her durumda çalışmayabilir, ancak kod parçacıklarını a'nın içine yerleştirmek textareaonları kod olarak görüntüler.

Gerçek bir metin alanına benzemesini istemiyorsanız, metin alanını CSS ile biçimlendirebilirsiniz.

Bu biraz hack, ancak aşağıdaki gibi bir şey kullanabiliriz:

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>

Bu CSS ile tarayıcı, gövde içinde komut dosyaları görüntüler. Bilinmeyen bir türe sahip olduğu için bu komut dosyasını yürütmeye çalışmaz text/html. <script>Bir kapanış </script>etiketi eklemek istemiyorsanız, a içindeki özel karakterlerden kaçmanıza gerek yoktur .

Bir tür "okuryazar program" için sayfanın gövdesinde yürütülebilir JavaScript görüntülemek için böyle bir şey kullanıyorum.

Bu soruda daha fazla bilgi var Etiketler ne zaman görünür olmalı ve neden olabilir? .

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

Burada birlikte çalışan birkaç cevaptan oluşan bir kombinasyon:

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>