ইনলাইন এবং ব্লক কোড স্নিপেটের জন্য <কোড> বনাম <pre> বনাম <স্যাম্পে>

Question

আমার সাইটে কিছু ইনলাইন কোড (" foo()ফাংশনটি ব্যবহার করার সময় ...") এবং কিছু ব্লক স্নিপেট থাকবে। এগুলি এক্সএমএল হতে থাকে এবং খুব দীর্ঘ লাইন থাকে যা আমি ব্রাউজারকে মোড়কে পছন্দ করি (যেমন, আমি ব্যবহার করতে চাই না <pre>)। আমি ব্লক স্নিপেটগুলিতে সিএসএস বিন্যাসও রাখতে চাই।

দেখে মনে হচ্ছে যে আমি <code>উভয়ের জন্যই ব্যবহার করতে পারি না , কারণ যদি আমি এটির (সাথে display: block;) সিএসএস ব্লক বৈশিষ্ট্যগুলি রাখি তবে এটি ইনলাইন স্নিপেটগুলি ভেঙে দেবে।

আমি কৌতূহল করছি মানুষ কী করে। <code>ব্লক, এবং <samp>ইনলাইন জন্য ব্যবহার করবেন ? ব্যবহার <code><blockquote>বা অনুরূপ কিছু?

অন্যান্য ব্যবহারকারীরা এটি বজায় রাখার কারণে আমি ক্লাসগুলি এড়িয়ে প্রকৃত এইচটিএমএলকে যথাসম্ভব সহজ রাখতে চাই।

Comments

গুগল ক্রোম ব্যবহার করুন এবং রিক স্ট্রহলের ব্লগটি পরিদর্শন করুন: weblog.west-wind.com/posts/2016/ay/23/… তারপরে তার স্টাইলশীট বৈশিষ্ট্যগুলি ব্যবহার করুন। তার কোড স্নিপেটগুলি খুব পরিষ্কার এবং অনুলিপি / পড়ার পক্ষে সহজ।

— JoshYates1980

<pre>বৈশিষ্ট্য ও আচরণ শব্দ হিসাবে মনে রাখা যেতে পারে "প্রাক cisely"

— SNR

Answer 1

ব্যবহারের <code>ইনলাইন কোড যে মোড়ানো যাবে এবং <pre><code>ব্লক কোডের জন্য মোড়ানো না যে। <samp>নমুনা আউটপুট জন্য , তাই আমি নমুনা কোড উপস্থাপন করতে এটি ব্যবহার করা এড়াতে চাই (যা পাঠক ইনপুট করতে পারেন )। স্ট্যাক ওভারফ্লো এটিই করে।

(আরও ভাল, যদি আপনি বজায় রাখা সহজ চান তবে ব্যবহারকারীদের নিবন্ধগুলি মার্কডাউন হিসাবে সম্পাদনা করতে দিন, তবে তাদের ব্যবহারের কথা মনে রাখতে হবে না <pre><code>))

এইচটিএমএল 5 " preউপাদানটিতে" এর সাথে একমত :

প্রাক উপাদান পূর্বরূপযুক্ত পাঠ্যের একটি ব্লকের প্রতিনিধিত্ব করে, যেখানে কাঠামোগুলি উপাদানগুলির পরিবর্তে টাইপোগ্রাফিক কনভেনশনগুলি দ্বারা প্রতিনিধিত্ব করে।

প্রাক উপাদানগুলি ব্যবহার করা যেতে পারে এমন কয়েকটি ক্ষেত্রে উদাহরণ:

• কম্পিউটার কোডের টুকরোগুলি সহ, সেই ভাষার কনভেনশন অনুসারে কাঠামোর নির্দেশিত।

[...]

কম্পিউটার কোডের একটি ব্লকের প্রতিনিধিত্ব করতে, প্রাক উপাদানটি একটি কোড উপাদান সহ ব্যবহার করা যেতে পারে; কম্পিউটার আউটপুট একটি ব্লক প্রতিনিধিত্ব করতে প্রাক উপাদান একটি স্যাম্প উপাদান সঙ্গে ব্যবহার করা যেতে পারে। একইভাবে, কেবিডি উপাদানটি ব্যবহারকারীকে প্রবেশ করতে হবে এমন পাঠ্যকে নির্দেশ করতে একটি প্রাক উপাদানটির মধ্যে ব্যবহার করা যেতে পারে।

নিম্নলিখিত স্নিপেটে কম্পিউটার কোডের একটি নমুনা উপস্থাপন করা হয়েছে।

<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

এটি সম্ভবত সঠিক উপায় হতে পারে তবে আমি এখনও এটি নির্বোধ বলে মনে করি। এইচটিএমএল-ডেভেলস একটি <code>ট্যাগের প্রয়োজনীয়তার পূর্বে জানতে পেরেছিল , তবে সিদ্ধান্ত নিয়েছে যে আমরা কেবল কখনও একটি লাইন লিখতে চাই? বা আমার অনুমান, কারণ তারা দুটি ট্যাগ রাখতে চায় নি, একটি ব্লক এবং একটি ইনলাইন? তবুও ... <code>সিএসএস দিয়ে ব্লক-স্তর তৈরিতে কী সমস্যা ? আমি ভেবেছিলাম আমাদের "সিমেন্টিক" এইচটিএমএল লেখার কথা ছিল। <code>ভাল এবং শব্দার্থক, কিন্তু <pre>খুব বেশি না।

— এমপেন

আমি একমত নই পূর্বরূপযুক্ত পাঠ্যের বিপরীতটি আপনার নথিতে কেবল সাদামাটা পুরাতন পাঠ্য। <code>সিএসএসের সাহায্যে ব্লক-স্তর তৈরি করা অযৌক্তিক। এইচটিএমএল 5 এ এই প্রস্তাব দেওয়া হয় ।

— জোশ লি

সমস্যাটি <pre>হ'ল এটি হোয়াইটস্পেস প্রসেসিংয়ের পাশাপাশি পরিবর্তন করে: সমস্ত স্থান সংরক্ষণ করা হয়, এবং মোড়ক বন্ধ করা হয়। এটি বন্ধ করার কোনও উপায় না থাকলে?

— স্টিভ বেনেট

সিএসএসে @ স্টিভ বেনেট, আপনি white-space: normal;কোডের জন্য কেন এটি করবেন তা দেখতে আমি ব্যর্থ। এছাড়াও এই <pre><code>জিনিসটি নির্বোধ, <pre>@ জ্লেদেভ দ্বারা উল্লিখিত ট্যাগটিকে "কম্পিউটার কোড" (এবং অন্যান্য জিনিস) হিসাবে মানগুলিতে খুব স্পষ্টভাবে সংজ্ঞায়িত করা হয়েছে। আপনি কি <code>আরও ভাল নাম বলে মনে করেন ? দুঃখিত যে এটি আরও শব্দার্থক করে তোলে না। ট্যাগটির সাথে একই রকম ঘটনা রয়েছে <address>, এটি সত্যই "লেখক" এর মতো শোনাচ্ছে না, তবে স্ট্যান্ডার্ডটি বলেছে এটি যা এর জন্য তাই তাই।

— srcspider

-1। ওপির কেন্দ্রীয় প্রশ্নটি কীভাবে সেই মোড়কে ব্লক স্নিপেটগুলি সম্পন্ন করতে পারে। আপনি ইনলাইন কোড, সেইসাথে ব্লক কোডকে সম্বোধন করেছেন যা অবশ্যই মোড়ানো উচিত নয় , তবে এটি অপের প্রাথমিক প্রশ্নের সমাধান করে না।

— আসাদ সাইদুদ্দিন

Answer 2

আমি সম্পূর্ণরূপে মিস করেছি এমন কিছু: এর মোড়কবিহীন আচরণ <pre>CSS এর মাধ্যমে নিয়ন্ত্রণ করা যায়। সুতরাং এটি আমার সন্ধানের সঠিক ফলাফলটি দেয়:

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

হ্যাঁ, আমিও তাই ভাবতে শুরু করি। আমি ক্লাস ছাড়াই সমাধানের জন্য জিজ্ঞাসা করেছি, তবে দেখে মনে হচ্ছে এটি ভাল নেই।

— স্টিভ বেনেট

@ স্টিভ: <code>সর্বাধিক সাধারণ ব্যবহারের ক্ষেত্রে ক্লাস ছাড়াই ডিফল্ট ব্লকটি সংজ্ঞায়িত করা মূল বিষয় main তারপরে যে কোনও অস্বাভাবিক কাজটি করতে চাইলে কেবল ক্লাস যুক্ত করা দরকার। অন্য কোনও উপায়ে এটি করা এখনও ব্যবহারকারীকে অতিরিক্ত টাইপ করতে বলবে। এইভাবে ব্যবহারকারী একে সম্পূর্ণ আলাদা কাঠামো ব্যবহার না করে একটি বিশেষ ট্যাগ যুক্ত করার কথা ভাবতে পারেন।

— slebetman

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

---

পরীক্ষা করা: (এনবি: নীচে একটি data:ইউআরআই প্রোটোকল / স্কিম ব্যবহার করে একাধিক স্কুরাল দেওয়া হয়েছে , সুতরাং পরীক্ষার জন্য ইউআরএল বারে কাটা এবং আটকানো হলে সংরক্ষণ করার জন্য %0Aএনএল ফর্ম্যাট কোডগুলি অত্যাবশ্যক - সুতরাং 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

(অপ্রচলিত) ট্যাগটি ব্যবহার করে যেমন এইচটিএমএল কোডটি দেখান <xmp>:

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

এটি অত্যন্ত দুঃখজনক যে এই ট্যাগটি হ্রাস করা হয়েছে, তবে এটি ব্রাউজারগুলিতে এখনও কাজ করে না, এটি একটি খারাপ গাধা ট্যাগ। এটির ভিতরে কিছু পালাতে হবে না। কি আনন্দ!

---

ট্যাগটি ব্যবহার করে যেমন এইচটিএমএল কোডটি দেখান <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

আমি অবশ্যই কিছু অনুভব করছি, তবে দৃশ্যত, ওয়ার্ডপ্রেস / পিএইচপি টেম্পলেটগুলিতে কাঁচা এইচটিএমএল কোড (ডিবাগিং উদ্দেশ্যে) কেবলমাত্র এটিই দেখানোর উপায় আমি খুঁজে পেয়েছি ...

— স্পহাক্কা

@ স্পটক্কা (& vsync), আমার উত্তরটি এখানে দেখুন <textarea readonly>যা একইভাবে ব্যবহার করে, বর্তমানটি ব্যবহার করে এবং আপনি যদি চান চান তবে আরও নিয়ন্ত্রণ রয়েছে বলে পরামর্শ দিন।

— www-0av-Com

@ ব্যবহারকারী 1863152 - উদাহরণ হিসাবে প্রিজমের মতো কোডটি বাহ্যিক স্ক্রিপ্ট দ্বারা হাইলাইট করা যায় না বলে এটি একটি টেক্সারিয়া আইএমএইচওর খুব খারাপ ব্যবহার । এবং এছাড়াও, এটি সামগ্রীর উচ্চতা এবং প্রস্থের সাথে ফিট করে না, যেমন <xmp>করে বা অন্য কোনও blockউপাদান দেয় না .. আমি এটিকে আসল সমাধান হিসাবে প্রস্তাব করব না, কেবল তাত্ত্বিক হিসাবে one

— vsync

@ ভিসিঙ্ক, হ্যাঁ এটি কোর্সের জন্য ঘোড়া (এবং আমি আপনাকে একটি বিটিডব্লিউ দিয়েছি)। আমি আমার প্রয়োজনে টেক্সারিয়া ব্যবহার করি। আমি এক্সএমপি চেষ্টা করেছিলাম এবং কেন আমার প্রয়োজনের জন্য আমি এক্সএমপিটিকে অসন্তুষ্ট করেছিলাম তা মনে করতে পারছি না। অবশ্যই এর অবচিত অবস্থা অবশ্যই নিরুৎসাহিত করে। যখন আমি ইনলাইন ব্যবহারের জন্য হাইলাইট এবং কোড করতে চাই তখন আমি পিআরই ব্যবহার করি। আমি ভাবতে পারি না প্রিজম কীভাবে একটি এক্সএমপির মধ্যে হাইলাইট করে - কিছু সিএসএস উইজার্ড্রি?

— www-0av-Com

আমি এই সম্পর্কে খুব নিশ্চিত নই। হ্যাঁ, এটি কাজ করে তবে ৩.২ থেকে অবহেলিত হয়েছে এবং 5-এ সম্পূর্ণ মুছে ফেলা হয়েছে? ব্রাউজারগুলি থেকে অনেকগুলি ট্যাগ পুরোপুরি সরানো হয়নি -<blink> এর একটি উদাহরণ - আমি ভবিষ্যতের প্রুফ হওয়ার প্রয়োজন এমন কোনও কিছুর জন্য এটি ব্যবহার করার বিষয়ে উদগ্রীব হব।

— স্পেসার জিআইএফ

Answer 6

টেক্সটরিয়া বিবেচনা করুন

লোকেরা গুগলের মাধ্যমে এটি সন্ধান করছে এবং তাদের স্নিপেটের প্রদর্শন পরিচালনা করার জন্য আরও ভাল উপায় খুঁজছেন তাদেরও বিবেচনা করা উচিত <textarea>যা প্রস্থ / উচ্চতা, স্ক্রোলিং ইত্যাদির উপর অনেক বেশি নিয়ন্ত্রণ দেয় Not উল্লেখ্য যে @vsync অবহেলিত ট্যাগটির উল্লেখ করেছেন <xmp>, আমি দেখতে পাই <textarea readonly>একটি দুর্দান্ত বিকল্প এটির ভিতরে কিছু এড়িয়ে চলার প্রয়োজন ছাড়াই এইচটিএমএল প্রদর্শনের জন্য (যেখানে </textarea>উপস্থিত থাকতে পারে তা বাদ দিয়ে )।

উদাহরণস্বরূপ, নিয়ন্ত্রিত লাইন মোড়ক সহ একটি একক লাইন প্রদর্শন করতে, বিবেচনা করুন <textarea rows=1 cols=100 readonly> আপনার এইচটিএমএল বা ইত্যাদি করুন যাতে ট্যাবস এবং সিআরএলএফ সহ কোনও অক্ষর রয়েছে </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

প্রিজম.জেএস: https://prismjs.com/# উদাহরণ বিবেচনা করুন

এটি <pre><code>কাজ করে এবং আকর্ষণীয়।