HTML में HTML स्निपेट प्रदर्शित करें
जवाबों:
नहीं , वहाँ नहीं है। HTML में उचित, कुछ वर्णों से बचने का कोई तरीका नहीं है:
&जैसा&<जैसा<
(संयोग से, बचने की कोई जरूरत नहीं है >लेकिन लोग अक्सर इसे समरूपता के कारणों से करते हैं।)
और निश्चित रूप से आपको परिणामी को घेर लेना चाहिए, <pre><code>…</code></pre>(क) व्हाट्सएप और लाइन विराम को संरक्षित करने के भीतर से बचा हुआ HTML कोड , और (b) इसे एक कोड तत्व के रूप में चिह्नित करता है।
अन्य सभी समाधान, जैसे आपके कोड को <textarea>(या हटाए गए) <xmp>तत्व में लपेटना , टूट जाएगा । 1
XHTML जिसे ब्राउज़र के रूप में XML (HTTP Content-Typeहेडर के माध्यम से घोषित किया गया है ! - केवल एक सेट करना DOCTYPEही पर्याप्त नहीं है ) वैकल्पिक रूप से CDATA डेटा का उपयोग कर सकता है:
<![CDATA[Your <code> here]]>लेकिन यह केवल XML में काम करता है, HTML में नहीं, और यहां तक कि यह एक मूर्खतापूर्ण समाधान नहीं है, क्योंकि कोड में समापन सीमांकक नहीं होना चाहिए ]]>। तो एक्सएमएल में भी सबसे सरल, सबसे मजबूत समाधान भागने के माध्यम से है।
1 मामले में मामला:
>के साथ >
<और &प्रतिस्थापित करने की आवश्यकता है, unescaped >HTML के अंदर मान्य है।
HTML के लिए आजमाया हुआ और सही तरीका:
&पहले और <बाद में संभाल लेंगे ।
सबसे अच्छा तरीका:
<xmp>
// your codes ..
</xmp>पुराने नमूने:
नमूना 1 :
<pre>
This text has
been formatted using
the HTML pre tag. The brower should
display all white space
as it was entered.
</pre>नमूना 2 :
<pre>
<code>
My pre-formatted code
here.
</code>
</pre>नमूना 3 : (यदि आप वास्तव में कोड के एक ब्लॉक को "उद्धृत" कर रहे हैं, तो मार्कअप होगा)
<blockquote>
<pre>
<code>
My pre-formatted "quoted" code here.
</code>
</pre>
</blockquote>अच्छा सीएसएस नमूना:
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;
}सिंटैक्स हाइलाइटिंग कोड (प्रो काम के लिए):
इंद्रधनुष (एकदम सही)
आपके लिए सर्वश्रेष्ठ लिंक:
https://github.com/balupton/jquery-syntaxhighlighter
http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css/
http://alexgorbatchev.com/SyntaxHighlighter/
कोड प्रदर्शित करने के लिए एक भोली विधि की तरह यह एक textarea में शामिल हो जाएगा और अक्षम विशेषता जोड़ देगा ताकि इसकी संपादन योग्य न हो।
<textarea disabled> code </textarea>आशा है कि किसी को सामान प्राप्त करने का आसान तरीका खोजने में मदद करें ।।
मैंने <xmp>इस तरह से इस्तेमाल किया :
http://jsfiddle.net/barnameha/hF985/1/
पदावनत <xmp>टैग अनिवार्य रूप से ऐसा करता है लेकिन अब XHTML युक्ति का हिस्सा नहीं है। यह अभी भी सभी मौजूदा ब्राउज़रों में काम करना चाहिए।
यहाँ एक और विचार है, एक हैक / पार्लर ट्रिक, आप कोड को एक textarea में डाल सकते हैं जैसे:
<textarea disabled="true" style="border: none;background-color:white;">
<p>test</p>
</textarea>कोण कोष्ठक और कोड को इस तरह से पाठ क्षेत्र के अंदर रखना अमान्य HTML है और विभिन्न ब्राउज़रों में अपरिभाषित व्यवहार का कारण होगा। इंटरनेट एक्सप्लोरर में HTML की व्याख्या की जाती है, जबकि मोज़िला, क्रोम और सफारी इसे निर्बाध रूप से छोड़ देते हैं।
यदि आप चाहते हैं कि यह गैर-संपादन योग्य हो और अलग दिखे तो आप आसानी से इसे सीएसएस का उपयोग करके स्टाइल कर सकते हैं। एकमात्र मुद्दा यह होगा कि ब्राउज़र बॉक्स को आकार देने के लिए नीचे-दाएं कोने में उस छोटे ड्रैग हैंडल को जोड़ देगा। या वैकल्पिक रूप से, इसके बजाय इनपुट टैग का उपयोग करने का प्रयास करें।
अपने textarea में कोड को इंजेक्ट करने का सही तरीका उदाहरण के लिए इस PHP की तरह सर्वर साइड भाषा का उपयोग करना है:
<textarea disabled="true" style="border: none;background-color:white;">
<?php echo '<p>test</p>'; ?>
</textarea>तब यह html दुभाषिया को दरकिनार कर देता है और सभी ब्राउज़रों में लगातार textarea में निर्बाध पाठ डालता है।
इसके अलावा, एकमात्र तरीका वास्तव में कोड से बचने के लिए है यदि स्थिर HTML या ऐसी तकनीक का उपयोग करते हुए .NET के HtmlEncode () जैसे सर्वर-साइड तरीकों का उपयोग कर रहा है।
<textarea disabled="true" style="border: none;background-color:white; width:100%">
मै मानता हूँ:
- आप 100% वैध HTML5 लिखना चाहते हैं
- आप HTML में कोड स्निपेट (लगभग) शाब्दिक रखना चाहते हैं
- विशेष रूप से
<भागने की जरूरत नहीं होनी चाहिए
- विशेष रूप से
आपके सभी विकल्प इस पेड़ में हैं:
- HTML सिंटैक्स के साथ
- पांच प्रकार के तत्व हैं
- जिन्हें "सामान्य तत्व" कहा जाता है (जैसे
<p>)- शाब्दिक नहीं हो सकता
< - इसे अगले टैग या टिप्पणी की शुरुआत माना जाएगा
- शाब्दिक नहीं हो सकता
- शून्य तत्व
- उनके पास कोई सामग्री नहीं है
- आप अपने HTML को एक डेटा विशेषता में रख सकते हैं (लेकिन यह सभी तत्वों के लिए सही है)
- डेटा को कहीं और स्थानांतरित करने के लिए जावास्क्रिप्ट की आवश्यकता होगी
- डबल-कोटेड गुण, में
"और&thing;जरूरत से बचने:"और&thing;क्रमश:
- कच्चे पाठ तत्व
<script>और<style>केवल- वे कभी भी दृश्यमान नहीं होते हैं
- लेकिन जावास्क्रिप्ट में अपने पाठ को एम्बेड करना संभव हो सकता है
- जावास्क्रिप्ट बैकलिक्स के साथ मल्टी-लाइन स्ट्रिंग्स के लिए अनुमति देता है
- फिर इसे गतिशील रूप से डाला जा सकता है
</scriptकहीं भी शाब्दिक अनुमति नहीं है<script>
- अपरिहार्य कच्चे पाठ तत्व
<textarea>और<title>केवल<textarea>में कोड लपेटने के लिए एक अच्छा उम्मीदवार है- यह लिखने के लिए पूरी तरह से कानूनी है
</html>वहाँ में - कानूनी नहीं
</textareaस्पष्ट कारणों के लिए विकल्प है- इस विशेष मामले के साथ
</textareaया इसी तरह से बच जाएं
- इस विशेष मामले के साथ
&thing;भागने की जरूरत है:&thing;
- विदेशी तत्व
- MathML और SVG नेमस्पेस के तत्व
- कम से कम SVG HTML को फिर से एम्बेड करने की अनुमति देता है ...
- और सीडीएटीए की अनुमति दी गई है, इसलिए यह संभावित है
- XML सिंटैक्स के साथ
- कोनराड के उत्तर द्वारा कवर किया गया
नोट: >कभी भी भागने की जरूरत नहीं है। सामान्य तत्वों में भी नहीं।
<script>और <style>दृश्यमान रूप से प्रस्तुत किए जा सकते हैं, बस उन्हें अंदर और या कुछ के <body>साथ रखें यदि आप नहीं चाहते कि इसे जावास्क्रिप्ट के रूप में निष्पादित किया जाए। यह काफी अच्छी चाल है जो मुझे लगता है, साक्षर प्रोग्रामिंग और शिक्षण के लिए अच्छा है। यह अभी भी प्रमुख ब्राउज़रों में लागू किया गया है, हालांकि यह पदावनत है।style="display: block; white-space: pre;"type="text/html"<xmp>
<xmp>HTML5 मान्य नहीं है, लेकिन आपकी अन्य चाल उचित लगती है!
यदि आपका लक्ष्य कोड का एक हिस्सा दिखाना है जिसे आप उसी पृष्ठ पर कहीं और निष्पादित कर रहे हैं, तो आप textContent का उपयोग कर सकते हैं (यह शुद्ध- js और अच्छी तरह से समर्थित है: 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;परिणाम में मल्टी-लाइन फॉर्मेटिंग प्राप्त करने के लिए, आपको सीएसएस शैली "व्हाइट-स्पेस: प्री;" लक्ष्य div पर, और प्रत्येक के अंत में "\ r \ n" का उपयोग करके व्यक्तिगत रूप से लाइनें लिखें।
यहाँ एक डेमो है: https://jsfiddle.net/wphps3od/
इस विधि में textarea का उपयोग करने पर एक फायदा है: जैसा कि यह एक textarea में होगा कोड को फिर से नहीं किया जाएगा। ( पूरी तरह से एक textarea में हटा दिया जाता है)
<template>ऐसी चीज़ के साथ उपयोग कर सकते हैं जो सामान्य रूप से प्रदान नहीं की जाती है।
अंततः सबसे अच्छा (हालांकि कष्टप्रद) उत्तर "पाठ से बचना" है।
हालाँकि, बहुत सारे टेक्स्ट एडिटर हैं - या यहां तक कि स्टैंड-अलोन मिनी यूटिलिटीज़ भी - जो अपने आप ऐसा कर सकती हैं। इसलिए आपको कभी भी इसे मैन्युअल रूप से नहीं बचाना चाहिए यदि आप नहीं चाहते हैं (जब तक कि यह बच गए और संयुक्त राष्ट्र के भागने वाले कोड का मिश्रण नहीं है ...)
त्वरित Google खोज मुझे यह एक दिखाती है, उदाहरण के लिए: http://malektips.com/zzee-text-utility-html-escape- अनियमित-expression.html
<textarea ><?php echo htmlentities($page_html); ?></textarea>मेरे लिए ठीक काम करता है ..
" Alexander'sसुझाव को ध्यान में रखते हुए , यहाँ मुझे लगता है कि यह एक अच्छा तरीका है"
अगर हम सिर्फ सादा कोशिश करते हैं तो <textarea>यह हमेशा काम नहीं कर सकता है क्योंकि इसमें क्लोजिंग textareaटैग हो सकते हैं जो गलत तरीके से पैरेंट टैग को बंद कर सकते हैं और पेरेंट डॉक्यूमेंट पर HTML स्रोत के बाकी हिस्सों को प्रदर्शित कर सकते हैं, जो अजीब लगेगा।
का उपयोग करके htmlentitiesसभी लागू वर्णों जैसे < >HTML संस्थाओं में कनवर्ट करता है जो लीक की किसी भी संभावना को समाप्त करता है।
इस दृष्टिकोण के लिए लाभ या कमियाँ हो सकती हैं या समान परिणाम प्राप्त करने का एक बेहतर तरीका है, अगर ऐसा है तो कृपया टिप्पणी करें क्योंकि मुझे यह पसंद नहीं है :)
कच्चे पाठ को सम्मिलित करने के लिए आप PHP जैसी सर्वर साइड भाषा का उपयोग कर सकते हैं:
<?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;
?>तब $strhtmlencoded के मान को बाहर निकाल दें:
<div style="white-space: pre">
<?php echo htmlentities($str); ?>
</div>यह एक सरल चाल है और मैंने इसे सफारी और फ़ायरफ़ॉक्स में आज़माया है
<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>यह इस तरह दिखाई देगा:
आप इसे यहां लाइव देख सकते हैं
वास्तव में ऐसा करने का एक तरीका है। इसमें सीमा (एक) है, लेकिन 100% मानक है, न कि वंचित (जैसे xmp), और काम करता है।
और यह तुच्छ है। यह रहा:
<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>कृपया मुझे समझाएं। सबसे पहले, साधारण HTML टिप्पणी काम करती है, जिससे पूरे ब्लॉक की व्याख्या की जा सके। आप आसानी से इसमें किसी भी टैग को जोड़ सकते हैं, उन सभी को अनदेखा किया जाएगा। व्याख्या से अनदेखा, लेकिन अभी भी उपलब्ध हैinnerHTML ! तो जो बचा है, वह सामग्री प्राप्त करना है, और पूर्ववर्ती और अनुगामी टिप्पणी टोकन को फ़िल्टर करना है।
सिवाय इसके (याद रखें - सीमा) आप HTML टिप्पणियाँ अंदर नहीं डाल सकते हैं, क्योंकि (कम से कम मेरे क्रोम में) उनमें से घोंसले का समर्थन नहीं है, और बहुत पहले '->' शो समाप्त हो जाएगा।
ठीक है, यह एक बुरा थोड़ा सीमा है, लेकिन कुछ मामलों में यह एक समस्या नहीं है, अगर आपका पाठ HTML टिप्पणियों से मुक्त है। और, एक निर्माण से बचना आसान है, फिर उनमें से एक पूरा गुच्छा।
अब, वह अजीब LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJoस्ट्रिंग क्या है ? यह एक यादृच्छिक स्ट्रिंग हैश की तरह, ब्लॉक में उपयोग किए जाने की संभावना नहीं है, और इसके लिए उपयोग किया जाता है? यहाँ संदर्भ है, मैंने इसका उपयोग क्यों किया है। मेरे मामले में, मैंने एक डीआईवी की सामग्री ली, फिर इसे शोडाउन मार्कडाउन के साथ संसाधित किया, और फिर आउटपुट को दूसरे डिव में सौंपा। यह विचार HTML फ़ाइल में मार्कडाउन इनलाइन लिखने के लिए था, और बस एक ब्राउज़र में खुला था और यह लोड-ऑन-द-फ्लाई में बदल जाएगा। इसलिए, मेरे मामले में, <!--रूपांतरित हो गया <p><!--</p>, टिप्पणी ठीक से बच गई। इसने काम किया, लेकिन स्क्रीन को प्रदूषित कर दिया। इसलिए, इसे आसानी से रेगेक्स के साथ हटाने के लिए, यादृच्छिक स्ट्रिंग का उपयोग किया गया था। यहाँ कोड है:
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 = '';और यह काम करता है।
यदि किसी को दिलचस्पी है, तो यह लेख इस तकनीक का उपयोग करके लिखा गया है। एचटीएमएल फ़ाइल के अंदर डाउनलोड करने और देखने के लिए स्वतंत्र महसूस करें।
यह निर्भर करता है कि आप इसके लिए क्या उपयोग कर रहे हैं। क्या यह यूजर इनपुट है? फिर उपयोग करें <textarea>, और सब कुछ से बच जाएं। मेरे मामले में, और शायद यह आपका मामला भी है, मैंने बस टिप्पणियों का इस्तेमाल किया, और यह काम करता है।
यदि आप मार्कडाउन का उपयोग नहीं करते हैं, और बस इसे एक टैग से प्राप्त करना चाहते हैं, तो यह और भी सरल है:
<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>और इसे प्राप्त करने के लिए जावास्क्रिप्ट कोड:
var src = document.getElementById("mydoc-src");
var YOUR_CODE = src.innerHTML.replace(/(<!--|-->)/g, "");HTML में सब कुछ बचने के कुछ तरीके हैं , उनमें से कोई भी अच्छा नहीं है।
या आप iframeएक सादे पुराने पाठ फ़ाइल में लोड कर सकते हैं ।
यह ज्यादातर स्थितियों के लिए सबसे अच्छी विधि है:
<pre><code>
code here, escape it yourself.
</code></pre>मैंने पहले व्यक्ति को वोट दिया होगा जिसने यह सुझाव दिया था लेकिन मेरे पास प्रतिष्ठा नहीं है। मैं इंटरनेट पर जवाब खोजने की कोशिश कर रहे लोगों की खातिर कुछ कहने के लिए मजबूर महसूस कर रहा था।
मैंने इस तरह से इसे किया:
$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यह बची हुई एचटीएमएल लौटाएगा
तुम कोशिश कर सकते हो:
Hello! Here is some code:
<xmp>
<div id="hello">
</div>
</xmp>यह थोड़ा हैक है, लेकिन हम कुछ का उपयोग कर सकते हैं:
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>उस CSS के साथ, ब्राउज़र शरीर के अंदर स्क्रिप्ट प्रदर्शित करेगा। यह इस स्क्रिप्ट को निष्पादित करने का प्रयास नहीं करेगा, क्योंकि इसमें एक अज्ञात प्रकार है text/html। <script>जब तक आप एक समापन </script>टैग को शामिल नहीं करना चाहते, तब तक विशेष वर्णों के अंदर भागना आवश्यक नहीं है ।
मैं इस तरह के कुछ का उपयोग कर रहा हूँ, पृष्ठ के शरीर में निष्पादन योग्य जावास्क्रिप्ट को प्रदर्शित करने के लिए, "साक्षर प्रोगामिंग" के एक प्रकार के लिए।
इस सवाल में कुछ और जानकारी है कि टैग कब दिखाई देने चाहिए और वे क्यों कर सकते हैं? ।
//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)एक जोड़ी का एक संयोजन जवाब देता है कि यहां एक साथ काम करते हैं:
function c(s) {
return s.split("<").join("<").split(">").join(">").split("&").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>