web-gelistirme-sc.com

HTML etiketlerini ayrıştırmadan görüntülemek için bir HTML/CSS yolu var mı?

HTML etiketlerini ayrıştırmadan görüntüleyebilmemin bir yolu var mı? XMP gibi etiketler daha önce mükemmel sonuç verdi, ancak şimdi o kadar da iyi olmayan PRE ile değiştirildi. Şu örneğe bir göz atın:

//This used to NOT PARSE HTML even if you used standard < and >.
<XMP>
<a hred="http://example.com">Link</a>
</XMP>

//New PRE tag requires &lt; and &gt; as replacement for < and >.
<PRE>
&#60;a href="http://example.com"&#62;Link&#60;/A&#62;
</PRE>

Aradığım şey eski XMP etiketinin karşılığı. Yeni PRE etiketi kodu ayrıştırır.

21
Atadj

Düz metni belirtmek için script setiyle type öğesini kullanabilir ve display özelliğini block olarak ayarlayabilirsiniz. Bu yalnızca ayrıştırma davranışını etkiler: öğenin kendisinin bitiş etiketi dışında </script> dışında hiçbir işaretleme (etiket veya varlık veya karakter referansları) tanınmaz. (Bu yüzden quite aynı, xmp ile aynı, burada tanınmış etiket </xmp>. İle aynı değildir.) Ayrı ayrı beyaz boşluk bırakarak xmp ve pre ile aynı şekilde işlem yapabilir ve/veya yazı tipini monospace'de olduğu gibi ayarlayabilirsiniz. öğeler varsayılan olarak.

Örnek:

<style>
    script {
        display: block;
    }
</style>

Sonra belge gövdesi içinde:

<script type="text/plain">
    <i>&eacute;</i>
</script>

IE, Chrome, Firefox, Opera'nın en yeni sürümlerinde test edilmiştir. IE 8 ve IE 7 emülasyonunda IE 9’da çalışmadı, ancak bu muhtemelen öykünmede bir hata.

Ancak, çalışmayı bırakmayan xmp yerine neden kullandığınızı anlamıyorum. Teknik özelliklerde yer almıyor, ancak bunun için endişeleniyorsanız, her zaman endişelenmiş olmalısınız. HTML 2.0'da (şimdiye kadarki ilk HTML spesifikasyonu) kaçınılmaz olarak belirtildi, HTML 3.2'de kullanımdan kaldırıldı ve HTML 4.0'da tamamen kaldırıldı (uzun zaman önce: 1997'de).

xmp, ölmek yerine geri dönüş yapıyor. W3C HTML5 (W3C personeli tarafından geçerli HTML spesifikasyonu olarak nitelendirilir), xmp işlevini eski ve uygun olmayan olarak ilan eder, ancak aynı zamanda tarayıcılara bir gereklilik uygular: “Kullanıcı aracıları xmp öğelerini eşdeğer bir şekilde ele almalıdır Anlamsal açıdan ve işlenme amacıyla pre elemanları. (Ayrıştırıcının bu öğe için özel bir davranışı vardır.) ”Eski ayrıştırma davranışı bu nedenle açıkça gerekli değildir, ancak açıkça ima edilir.

23
Jukka K. Korpela

Hey Guys Ben şahsen <code> </code> etiketlerini kullanmanın sadece Dream Weaver'da çalıştığını düşünüyorum ve <xmp> </xmp> etiketi, eğer </xmp> 'ya girmeden çalışmazsa, asla işe yaramaz. <textarea> </textarea> işlevini kullanmak, başkalarının kodunuzu web sitesinde veya sayfada düzenleyebilmesini sağlar, böylece <xmp> </xmp> etiketinin hala kullanılmasını ve bu etiketin devam etmesini öneririz.

4
Sean Cassiere

Daha karmaşık olmak istiyorsanız, başka bir yol da jQuery kullanarak özel bir etiket oluşturmaktır. Bu örnek için <noparse> kullandım.

$('noparse').each(function(){
    if($(this).attr('tagchecked') != 'true'){ //checks if already changed tag
        $(this).text($(this).html()).attr('tagchecked', 'true'); //makes the html into plaintext
    }
});

JSFiddle burada

1
tjhorner

Modern yol textarea'yı (boole) özniteliği ile salt okunur kullanmaktır. XMP'yi kullanabilirsiniz, ancak bu kullanımdan kaldırılmıştır, dolayısıyla sonunda desteklenmeyi bırakabilir. 
örnek:

<textarea readonly='true'>
    <p>This is some text</p>
</textarea>
1
user3133463

Yok.

Teorik olarak bir CDATA bloğu kullanabilirsiniz, ancak hiçbir tarayıcı bunu text/html modunda desteklemez.

Karakter referanslarını kullanın.

1
Quentin

Html iframe etiketini kullanmanızı ve src niteliğinde gösterilmesini istediğiniz metni koymanızı öneririm. Sadece url veya base64 önce kodlamanız gerekir.

example (urlencoded):
<iframe src="data:text/plain,%22%3Chello%3E%22"></iframe>

example (base64):
<iframe src="data:text/plain;base64,IjxoZWxsbz4i"></iframe>

Result displayed as:
"<hello>"

Ve sonra ... birkaç yıl sonra, blogumu wordpress'ten lambda ve dynamodb tarafından desteklenen bir vuejs spa'sına dönüştürürken de aynı sorunu yaşıyorum.

Ve cevap; en azından benim durumumda. Varlıktan kaç.

&lt;, &amp;lt; olur

&gt;, &amp;gt; olur

vesaire vesaire.

Bu yardımcı olur umarım. 

0
morissette