इनलाइन और ब्लॉक कोड स्निपेट्स के लिए <कोड> बनाम <प्री> बनाम <samp>

Question

मेरी साइट में कुछ इनलाइन कोड (" foo()फ़ंक्शन का उपयोग करते समय ...") और कुछ ब्लॉक स्निपेट होने वाले हैं। ये एक्सएमएल होते हैं, और बहुत लंबी लाइनें होती हैं जो मैं ब्राउज़र को लपेटने के लिए पसंद करता हूं (यानी, मैं उपयोग नहीं करना चाहता <pre>)। मैं सीएसएस फॉर्मेटिंग को ब्लॉक स्निपेट पर रखना चाहता हूं।

ऐसा लगता है कि मैं <code>दोनों के लिए उपयोग नहीं कर सकता , क्योंकि अगर मैंने इस पर (साथ display: block;) सीएसएस ब्लॉक विशेषताओं को रखा , तो यह इनलाइन स्निपेट्स को तोड़ देगा।

मैं उत्सुक हूं कि लोग क्या करते हैं। <code>ब्लॉक के लिए उपयोग करें , और <samp>इनलाइन के लिए? उपयोग <code><blockquote>या कुछ इसी तरह?

मैं वास्तविक HTML को यथासंभव सरल रखना चाहता हूं, कक्षाओं से बचना, क्योंकि अन्य उपयोगकर्ता इसे बनाए रखेंगे।

Comments

Google Chrome का उपयोग करें और रिक स्ट्राल के ब्लॉग का निरीक्षण करें: weblog.west-wind.com/posts/2016/May/23/… फिर उसकी स्टाइलशीट एट्रीब्यूट का उपयोग करें। उनके कोड स्निपेट बहुत साफ और आसानी से कॉपी / पढ़े जाते हैं।

— जोशिएट्स 1980

<pre>और अपने व्यवहार शब्द के रूप में ध्यान में रखा जा सकता है "पूर्व cisely"

— SNR

Answer 1

<code>इनलाइन कोड के लिए उपयोग कर सकते हैं जो लपेट सकते हैं और <pre><code>ब्लॉक कोड के लिए जिसे लपेटना नहीं चाहिए। <samp>नमूना आउटपुट के लिए है , इसलिए मैं नमूना कोड का प्रतिनिधित्व करने के लिए इसका उपयोग करने से बचूंगा (जो पाठक इनपुट के लिए है )। यह वही है जो स्टैक ओवरफ्लो करता है।

(बेहतर अभी तक, यदि आप आसानी से बनाए रखना चाहते हैं, तो उपयोगकर्ताओं को लेखों को मार्कडाउन के रूप में संपादित करने दें, फिर उन्हें उपयोग करने के लिए याद नहीं करना होगा <pre><code>।)

HTML5 " preतत्व" में इस बात से सहमत है :

पूर्व तत्व पूर्वनिर्मित पाठ के एक ब्लॉक का प्रतिनिधित्व करता है, जिसमें संरचना को तत्वों के बजाय टाइपोग्राफिक सम्मेलनों द्वारा दर्शाया जाता है।

उन मामलों के कुछ उदाहरण जहां पूर्व तत्व का उपयोग किया जा सकता है:

• कंप्यूटर कोड के टुकड़े सहित, उस भाषा के सम्मेलनों के अनुसार इंगित संरचना के साथ।

[...]

कंप्यूटर कोड के एक ब्लॉक का प्रतिनिधित्व करने के लिए, पूर्व तत्व का उपयोग कोड तत्व के साथ किया जा सकता है; कंप्यूटर आउटपुट के एक ब्लॉक का प्रतिनिधित्व करने के लिए पूर्व तत्व का उपयोग एक सैम्प तत्व के साथ किया जा सकता है। इसी प्रकार, kbd तत्व का उपयोग एक पूर्व तत्व के भीतर किया जा सकता है ताकि पाठ को इंगित किया जा सके कि उपयोगकर्ता को प्रवेश करना है।

निम्नलिखित स्निपेट में, कंप्यूटर कोड का एक नमूना प्रस्तुत किया गया है।

<p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

Comments

यह जाने का सही तरीका हो सकता है, लेकिन मुझे अभी भी लगता है कि यह बेवकूफ है। HTML-devs ने एक <code>टैग की आवश्यकता का पूर्वाभास किया , लेकिन तय किया कि हम केवल एक लाइन ही लिखेंगे? या मुझे लगता है, क्योंकि वे दो टैग, एक ब्लॉक और एक इनलाइन नहीं चाहते थे? फिर भी ... <code>सीएसएस के साथ ब्लॉक-स्तर बनाने में क्या गलत है ? मुझे लगा कि हम "शब्दार्थ" HTML लिखने वाले थे। <code>अच्छा और अर्थपूर्ण है, लेकिन <pre>इतना नहीं।

— मप्र

मैं असहमत हूं। पूर्वनिर्मित पाठ के विपरीत आपके दस्तावेज़ में केवल सादा पुराना पाठ है। <code>CSS के साथ ब्लॉक-स्तर बनाना अनिश्चितता है। HTML5 में यह तरीका सुझाया गया है ।

— जोश ली

<pre>इसके साथ समस्या यह है कि यह व्हाट्सएप प्रसंस्करण को भी संशोधित करता है: सभी स्थान संरक्षित हैं, और रैपिंग बंद है। जब तक कि इसे बंद करने का कोई तरीका नहीं है?

— स्टीव बेनेट

@Steve बेनेट, सीएसएस में white-space: normal;हालांकि मैं यह देखने में विफल हूं कि आप कोड के लिए ऐसा क्यों करेंगे। यह <pre><code>बात भी बेवकूफी है, <pre>टैग को "कंप्यूटर कोड" (और अन्य चीजों) के रूप में मानकों में बहुत स्पष्ट रूप से परिभाषित किया गया है जैसा कि @jlevev द्वारा उल्लेख किया गया है। क्या इसलिए कि आपको लगता <code>है कि बेहतर नाम है? खेद है कि यह अधिक अर्थपूर्ण नहीं बनाता है। टैग के साथ भी ऐसा ही मामला है <address>, यह वास्तव में "लेखक" की तरह नहीं है, लेकिन मानक कहते हैं कि यह क्या है, इसलिए यह है।

— srcspider

-1। ओपी का केंद्रीय प्रश्न था कि लपेटने वाले ब्लॉक स्निपेट्स को कैसे पूरा किया जाए। आपने इनलाइन कोड, साथ ही ब्लॉक कोड को संबोधित किया है जिसे लपेटना नहीं चाहिए , लेकिन यह ओपी के प्राथमिक प्रश्न को संबोधित नहीं करता है।

— असद सईदुद्दीन

Answer 2

मैं पूरी तरह से छूट गया: गैर-रैपिंग व्यवहार को <pre>सीएसएस के साथ नियंत्रित किया जा सकता है। तो यह सटीक परिणाम देता है जिसकी मुझे तलाश थी:

code { 
    background: hsl(220, 80%, 90%); 
}

pre {
    white-space: pre-wrap;
    background: hsl(30,80%,90%);
}

Here's an example demonstrating the <code>&lt;code&gt;</code> tag.

<pre>
Here's a very long pre-formatted formatted using the &lt;pre&gt; tag. Notice how it wraps?  It goes on and on and on and on and on and on and on and on and on and on...
</pre>

http://jsfiddle.net/9mCN7/

Answer 3

व्यक्तिगत रूप से मैं उपयोग करूंगा <code>क्योंकि यह सबसे शब्दार्थ रूप से सही है। फिर इनलाइन और ब्लॉक कोड के बीच अंतर करने के लिए मैं एक वर्ग जोड़ूंगा:

<code class="inlinecode"></code>

इनलाइन कोड के लिए या:

<code class="codeblock"></code>

कोड ब्लॉक के लिए। जिसके आधार पर कम आम है।

Comments

हाँ, मैं भी ऐसा सोचने लगा हूँ। मैंने कक्षाओं के बिना एक समाधान के लिए पूछा था, लेकिन ऐसा लगता है कि कोई अच्छा नहीं है।

— स्टीव बेनेट 23

@ साइट: मुख्य बात <code>सबसे सामान्य उपयोग के मामले के लिए एक वर्ग के बिना डिफ़ॉल्ट ब्लॉक को परिभाषित करना है। फिर किसी को भी असामान्य चीज करने के लिए केवल कक्षा को जोड़ना होगा। इसे किसी अन्य तरीके से करना अभी भी उपयोगकर्ता को अतिरिक्त टाइप करने के लिए कहेगा। इस तरह से उपयोगकर्ता इसे पूरी तरह से अलग संरचना का उपयोग करने के बजाय एक विशेष टैग जोड़ने के रूप में सोच सकता है।

— स्लीपबेटमैन

Answer 4

सामान्य इनलाइन <code>उपयोग के लिए:

<code>...</code>

और प्रत्येक और हर जगह के लिए जहां अवरुद्ध <code>उपयोग की आवश्यकता है

<code style="display:block; white-space:pre-wrap">...</code>

---

वैकल्पिक रूप से, <codenza>ब्रेक अस्तर ब्लॉक <code> (कोई वर्ग नहीं) के लिए एक टैग को परिभाषित करें

<script>
</script>
<style>
  codenza, code {}     /*  noop mnemonic aide that codenza mimes code tag  */
  codenza {display:block;white-space:pre-wrap}
</style>`

---

परीक्षण: (NB: निम्नलिखित data:URI प्रोटोकॉल / योजना का उपयोग करने वाला एक डरावना है , इसलिए परीक्षण के लिए URL बार में कट और पेस्ट किए जाने पर %0Anl प्रारूप कोड आवश्यक होते हैं जैसे - view-source:( ctrl-U ) नीचे दी गई प्रत्येक पंक्ति को अच्छी तरह से देख सके %0A)

data:text/html;charset=utf-8,<html >
<script>document.write(window.navigator.userAgent)</script>
<script></script>
<style>
  codenza, code {}     /*  noop mnemonic aide that codenza mimes code tag  */
  codenza {display:block;white-space:pre-wrap}
</style>
<p>First using the usual &lt;code> tag
<code>
  %0A     function x(arghhh){ 
  %0A          return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
  %0A     }
</code>
and then 
<p>with the tag blocked using pre-wrapped lines
<code style=display:block;white-space:pre-wrap> 
  %0A     function x(arghhh){ 
  %0A          return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
  %0A     }
</code>
<br>using an ersatz tag
<codenza>
  %0A     function x(arghhh){ 
  %0A          return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
 %0A     }
</codenza>
</html>

Answer 5

(अप्रचलित) टैग का उपयोग करके HTML कोड, जैसा कि है , दिखाएं <xmp>:

<xmp>
<div>
  <input placeholder='write something' value='test'>
</div>
</xmp>

यह बहुत दुख की बात है कि इस टैग को हटा दिया गया है, लेकिन यह अभी भी ब्राउज़रों पर काम करता है, यह एक बुरा-गधा टैग है। इसके अंदर कुछ भी भागने की जरूरत नहीं है। क्या खुशी है!

---

टैग का उपयोग करके HTML कोड, जैसा कि है , दिखाएं <textarea>:

<textarea readonly rows="4" style="background:none; border:none; resize:none; outline:none; width:100%;">
<div>
  <input placeholder='write something' value='test'>
</div>
</textarea>

Comments

मैं निश्चित रूप से कुछ याद कर रहा हूं, लेकिन जाहिर है, यह केवल वर्डप्रेस / पीएचपी टेम्पलेट्स में कच्चे एचटीएमएल कोड (डीबगिंग उद्देश्य के लिए) दिखाने का एकमात्र तरीका है ...

— sphakka

@sphakka (& vsync), यहाँ मेरा जवाब देखें <textarea readonly>जो उपयोग करने का सुझाव देता है, वही करता है, वर्तमान है, और यदि आप चाहें तो बहुत अधिक नियंत्रण है।

— www-0av-Com

@ user1863152 - यह एक textarea IMHO का बहुत बुरा उपयोग है क्योंकि कोड को बाहरी स्क्रिप्ट द्वारा हाइलाइट नहीं किया जा सकता है, उदाहरण के लिए प्रिज्म जैसे । और यह भी, यह सामग्री की ऊंचाई और चौड़ाई को फिट नहीं करता है, जैसे <xmp>करता है, या कोई अन्य blockतत्व करता है .. मैं इसे केवल एक वास्तविक समाधान के रूप में सुझाता नहीं हूं, केवल एक सैद्धांतिक के रूप में।

— vsync

@vsync, हाँ यह पाठ्यक्रमों के लिए घोड़े हैं (और मैंने आपको एक upvote btw दिया है)। मैं अपनी आवश्यकताओं के लिए textarea का उपयोग करता हूं। मैंने xmp की कोशिश की और याद नहीं कर पा रहा हूँ कि मुझे अपनी आवश्यकताओं के लिए xmp असंतोषजनक क्यों लगा। बेशक इसकी पदावनति स्थिति निश्चित रूप से हतोत्साहित करती है। जब मुझे इनलाइन उपयोग के लिए हाइलाइट करने और CODE करने की आवश्यकता होती है, तो मैं PRE का उपयोग करता हूं। मैं कल्पना नहीं कर सकता कि प्रिज्म एक एक्सएमपी के भीतर कैसे हाइलाइट करता है - कुछ सीएसएस विज़ार्ड?

— www-0av-Com

मैं इस बारे में निश्चित नहीं हूं। हाँ, यह काम करता है, लेकिन 3.2 से हटा दिया गया और 5 में पूरी तरह से हटा दिया गया? जबकि कई टैग ब्राउज़र से पूरी तरह से हटाए नहीं गए हैं - <blink>एक उदाहरण है - मैं भविष्य में प्रूफ होने के लिए किसी भी चीज के लिए इसका उपयोग करने के बारे में चिंतित हूं।

— स्पेसर GIF

Answer 6

TextArea पर विचार करें

Google के माध्यम से इसे खोजने वाले और अपने स्निपेट के प्रदर्शन को प्रबंधित करने के बेहतर तरीके की तलाश में लोगों को भी विचार करना चाहिए <textarea>जो चौड़ाई / ऊंचाई, स्क्रॉलिंग आदि पर बहुत अधिक नियंत्रण देता है। ध्यान दें कि @vsync ने पदावनत किए गए टैग का उल्लेख किया है <xmp>, मुझे लगता <textarea readonly>है कि यह एक उत्कृष्ट प्रतिशोध है इसके अंदर कुछ भी भागने की आवश्यकता के बिना HTML प्रदर्शित करने के लिए (जहां को छोड़कर)</textarea> भी प्रकट हो सकता है)।

उदाहरण के लिए, नियंत्रित लाइन रैपिंग के साथ एकल लाइन प्रदर्शित करने के लिए, <textarea rows=1 cols=100 readonly> अपने html या आदि को टैब और CrLf सहित किसी भी वर्ण पर विचार करें</textarea> ।

<textarea rows=5 cols=100 readonly>Example text with Newlines,
tabs & space,
  html tags etc <b>displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</textarea>

सभी की तुलना करने के लिए ...

<h2>Compared: TEXTAREA, XMP, PRE, SAMP, CODE</h2>
<p>Note that CSS can be used to override default fixed space fonts in each or all these.</p>
    
    
<textarea rows=5 cols=100 readonly>TEXTAREA: Example text with Newlines,
tabs & space,
  html tags etc <b>displayed natively</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;</textarea>

<xmp>XMP: Example text with Newlines,
tabs & space,
  html tags etc <b>displayed natively</b>.
    However, note that &amp; (&) will not act as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</xmp>

<pre>PRE: Example text with Newlines,
tabs & space,
  html tags etc <b>are interpreted, not displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</pre>

<samp>SAMP: Example text with Newlines,
tabs & space,
  html tags etc <b>are interpreted, not displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</samp>

<code>CODE: Example text with Newlines,
tabs & space,
  html tags etc <b>are interpreted, not displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</code>

Answer 7

प्रिज्म पर विचार करें ।js: https://prismjs.com/#examples

यह <pre><code>काम करता है और आकर्षक है।