এইচটিএমএলে HTML স্নিপেটগুলি প্রদর্শন করুন

208

কিভাবে আমি প্রতিটি প্রতিস্থাপন ছাড়াই একটি ওয়েব পেজ HTML স্নিপেটগুলি দেখাতে পারেন <সঙ্গে <এবং >সঙ্গে >?

অন্য কথায়, আপনি কি ক্লোজিং ট্যাগটিকে আঘাত না করা পর্যন্ত এইচটিএমএল রেন্ডার না করার জন্য কোনও ট্যাগ রয়েছে ?

html tags

— স্টিভেন
সূত্র

95

না , নেই। এইচটিএমএল যথাযথভাবে, কিছু অক্ষর থেকে পালানোর কোনও উপায়ই কম নয়:

& যেমন &
< যেমন <

(ঘটনাচক্রে, পালানোর দরকার নেই >তবে প্রতিযোগিতার কারণে লোকেরা প্রায়শই এটি করে))

এবং অবশ্যই আপনাকে ফলাফলকে ঘিরে রাখা উচিত, পালিয়ে যাওয়া এইচটিএমএল কোডের মধ্যে <pre><code>…</code></pre>(ক) সাদা স্থান এবং লাইন বিরতি সংরক্ষণ করুন এবং (খ) কোডের উপাদান হিসাবে চিহ্নিত করুন।

আপনার কোডটি কোনও <textarea>বা (অবনমিত) <xmp>উপাদানটিতে মোড়ানো করার মতো অন্যান্য সমস্ত সমাধান ভেঙে যাবে । ¹

এক্সএইচটিএমএল যে এক্সএমএল যেমন ব্রাউজারে ঘোষিত হয় (মাধ্যমে HTTP- র Content-Typeহেডার - নিছক সেটিং একটি! DOCTYPEহয় যথেষ্ট নয় ) অন্যথায় একটি CDATA বিভাগ ব্যবহার করতে পারে:

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

তবে এটি কেবল এক্সএমএলে কাজ করে, এইচটিএমএল নয়, এমনকি এটি কোনও বুদ্ধিমান সমাধান নয়, কারণ কোডটি অবশ্যই ক্লোজিং ডিলিমিটার ধারণ করে না ]]>। এমনকি এক্সএমএল এমনকি সহজতম, সবচেয়ে শক্তিশালী সমাধান পলায়ন মাধ্যমে হয়।

পয়েন্টে ¹ কেস:

কোড স্নিপেট দেখান

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>

স্নিপেট প্রসারিত করুন

— কনরাড রুডল্ফ
সূত্র

খুশী হলাম। সুতরাং যে এইচটিএমএল স্ট্যান্ডার্ড অংশ? নাকি এটি আরও গভীর, এক্সএমএল-স্ট্যান্ডার্ডের অংশের মতো?

— আইয়ুব

7

এইচটিএমএলে, এটি রেন্ডার হবে `এখানে]]>`

— ডল্ফ

3

হ্যাঁ, এই একটি ভাল উত্তর, কিন্তু ভুলবেন না প্রতিস্থাপন করতে >সঙ্গে >

— অ্যালান

2

@ অ্যালান আমি এটিও করেছি, তবে এটি আসলে প্রয়োজনীয় নয় : কেবলমাত্র <এবং &প্রতিস্থাপন করা দরকার, >এইচটিএমএলের অভ্যর্থনাবিহীন বৈধ।

— কনরাড রুডলফ

1

@ সামাওয়াটকিন্স তবে আপনার সমাধানটি আমার চেয়ে সহজ কিছু নয় । আপনি যা পালাতে হবে তা সবেমাত্র পরিবর্তন করেছেন , এবং আপনি স্বীকার করেছেন যে আপনার সমাধান হ্যাকি। এটি সঠিকভাবে করার চেয়ে আক্ষরিক কোনও লাভ নেই। এটি একটি সঠিক সমাধান সহ একটি সমাধান সমস্যা। হ্যাকের দরকার নেই, যদি না আপনার পুরো সেটআপটি হ্যাক হয়।

— কনরাড রুডলফ

161

এইচটিএমএলের জন্য চেষ্টা করা এবং সত্য পদ্ধতি:

এর &সাথে চরিত্রটি প্রতিস্থাপন করুন&
এর <সাথে চরিত্রটি প্রতিস্থাপন করুন<
এর >সাথে চরিত্রটি প্রতিস্থাপন করুন>
HTMLচ্ছিকভাবে আপনার এবং এইচটিএমএল নমুনা <pre>এবং / অথবা <code>ট্যাগগুলি ঘিরে ।

— Dolph
সূত্র

17

টিপ: এইচটিএমএল কোড প্রতিস্থাপনের গতি বাড়ানোর জন্য আপনি 'টেক্সটএফএক্স' এক্সটেনশন সহ নোটপ্যাড ++ ব্যবহার করতে পারেন। পাঠ্যটি চিহ্নিত করুন, মেনুতে যান> টেক্সটএফএক্স> টেক্সটএফএক্স রূপান্তর> এনকোড এইচটিএমএল (& <> ") → হয়ে গেছে

— কাই নোক

2

এমন কোনও জাভাস্ক্রিপ্ট লাইব্রেরি আছে কি যে কোনও সুযোগেই এটি করতে পারে?

— অ্যান্ডারসন গ্রিন

9

এটি এই প্রশ্নের উত্তর দেয় না, যা "প্রতিস্থাপনের প্রয়োজন ছাড়াই ..." বলেছিল। এছাড়াও, ">" প্রতিস্থাপন করা অপ্রয়োজনীয়।

— Jukka K. Korpela

2

এবং আদেশও গুরুত্বপূর্ণ। নিশ্চিত করুন যে আপনি &প্রথমটি এবং <তারপরে হ্যান্ডেল করেছেন ।

— টোলগা ইভিসিমন

151

সবচেয়ে ভালো উপায়:

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

সিনট্যাক্স হাইলাইটিং কোড (প্রো কাজের জন্য):

রংধনু (খুব নিখুঁত)

আপনার জন্য সেরা লিঙ্ক:

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/

এইচটিএমএল মধ্যে উত্স কোড হাইলাইট কিভাবে?

— এরফান সাফারপুর
সূত্র

4

উত্তরে ব্যবহৃত উপাদানগুলি প্রশ্নটিকে মোটেই সম্বোধন করে না: তারা ট্যাগ << "ব্যাখ্যা শুরু করে না।

— Jukka K. Korpela

7

developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp বলেছেন, " এই উপাদানটি ব্যবহার করবেন না HTML এটি HTML3.2-এর পরে অবচিত করা হয়েছে এবং ধারাবাহিকভাবে কার্যকর করা হয়নি It এটি সম্পূর্ণরূপে সরানো হয়েছিল HTML5 এ ভাষা। "

— নিক রাইস

50

কোড প্রদর্শনের জন্য একটি নির্লজ্জ পদ্ধতির ধরণ এটি একটি টেক্সেরিয়ায় অন্তর্ভুক্ত করবে এবং অক্ষম বৈশিষ্ট্য যুক্ত করবে যাতে এটি সম্পাদনাযোগ্য নয়।

<textarea disabled> code </textarea>

আশা করি যে কেউ কোনও জিনিস সহজ করার সহজ উপায় অনুসন্ধানে সহায়তা করবে ..

— Krunal
সূত্র

7

কেবলমাত্র পাঠ্যই অক্ষম হওয়ার চেয়ে ভাল বৈশিষ্ট্য হতে পারে যাতে আপনি এর মধ্যে পাঠটি হাইলাইট করতে পারেন। এছাড়াও সম্ভবত এমন একটি শৈলী যুক্ত করা যা এটি কোনও বৈশিষ্ট্য থেকে সজ্জিত করে যা এটিকে ইনপুট উপাদানগুলির মতো দেখায়, যদিও তা গৌণ।

— তারকুইন

2

দুর্দান্ত সমাধান। ধন্যবাদ

— এপিত জন ইসমাইল

1

এম্পারস্যান্ডগুলি এখনও ব্যাখ্যা করা হবে। যেমন & nbsp; একটি আসল অ-ব্রেকিং স্পেস হিসাবে রেন্ডার করা হবে। তবে ভাল উত্তর তা সত্ত্বেও এটি আমি কিছু করতে চাই তার পক্ষে আদর্শ।

— নিক রাইস

1

আমি অনেক উপায়ে চেষ্টা করেছি, এবং এটিই আমার পক্ষে কাজ করে। অনেক ধন্যবাদ.

— উইলিয়াম হাউ

25

অননুমোদিত কিন্তু FF3 এবং IE8 কাজ করে।

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

প্রস্তাবিত:

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

— s_hewitt
সূত্র

14

আমি <xmp>ঠিক এটি ব্যবহার করেছি : http://jsfiddle.net/barnameha/hF985/1/

— barnameha
সূত্র

1

এটি

— হ্রাস করা

12

অবহেলিত <xmp>ট্যাগটি মূলত তা করে তবে এটি আর এক্সএইচটিএমএল অনুমানের অংশ নয়। এটি এখনও সমস্ত বর্তমান ব্রাউজারে থাকা সত্ত্বেও কাজ করা উচিত।

এখানে আরেকটি ধারণা, একটি হ্যাক / পার্লার ট্রিক, আপনি কোডটি এমনভাবে একটি টেক্সটরিয়ায় রাখতে পারেন:

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

কোনও পাঠ্য অঞ্চলে এর মতো কোণ বন্ধনী এবং কোড লাগানো অবৈধ এইচটিএমএল এবং বিভিন্ন ব্রাউজারগুলিতে অপরিজ্ঞাত আচরণের কারণ হবে। ইন্টারনেট এক্সপ্লোরারে এইচটিএমএলকে ব্যাখ্যা করা হয়, যেখানে মজিলা, ক্রোম এবং সাফারি এটিকে ব্যাখ্যা ছাড়াই ছেড়ে দেয়।

আপনি যদি এটি সম্পাদনযোগ্য না করে দেখতে এবং অন্যরকম দেখতে চান তবে আপনি CSS ব্যবহার করে সহজেই এটি স্টাইল করতে পারেন। একমাত্র সমস্যাটি হ'ল ব্রাউজারগুলি বাক্সটির আকার পরিবর্তন করতে নীচে-ডান কোণে সেই ছোট্ট ড্র্যাগ হ্যান্ডেল যুক্ত করবে। অথবা বিকল্পভাবে, পরিবর্তে একটি ইনপুট ট্যাগ ব্যবহার করে দেখুন।

আপনার টেক্সেরিয়ায় কোড ইনজেক্ট করার সঠিক উপায়টি এই পিএইচপি এর মতো সার্ভার সাইড ভাষা ব্যবহার করা উদাহরণস্বরূপ:

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

তারপরে এটি এইচটিএমএল ইন্টারপ্রেটারকে বাইপাস করে এবং সমস্ত ব্রাউজারগুলিতে ধারাবাহিকভাবে টেক্সারিয়াতে অপরিবর্তিত পাঠ্য রাখে।

এগুলি ছাড়া, একমাত্র উপায় হ'ল স্থির এইচটিএমএল বা সার্ভার-সাইড পদ্ধতি যেমন .NET এর এইচটিএমএল এনকোড () ব্যবহার করে যদি এই জাতীয় প্রযুক্তি ব্যবহার করা হয় তবে কোডটি থেকে নিজেকে মুক্তি দেওয়া।

— GShenanigan
সূত্র

1

এটি একটি ভয়াবহ ধারণা। যদি এটি গতিশীল এইচটিএমএল প্রদর্শিত হয় এবং কেউ নিম্নলিখিতটি করেছেন। <? পিএইচপি প্রতিধ্বনি '</ spxt> </script> সতর্কতা (hello' হ্যালো ওয়ার্ল্ড \ '); </script> <textarea>'; />। অতএব আপনার কোডটি এক্সএসএসের পক্ষে ঝুঁকিপূর্ণ।

— গ্যারি ড্রসেলা

পিএইচপি হ'ল সার্ভার-সাইড, সুতরাং এটি ব্রাউজার দ্বারা দেখা ফলাফল পরিবর্তন করে না। এটি বিশেষত এইচটিএমএল ইন্টারপ্রেটারকে বাইপাস করে না।

— রবার্ট সিমার

এটিকে ইনপুট বাক্সের মতো দেখতে না দেওয়ার জন্য আমি টেক্সারিয়া বিন্যাস পছন্দ করি। মোড়ক কমাতে আমি 100% প্রস্থও যুক্ত করেছি:<textarea disabled="true" style="border: none;background-color:white; width:100%">

— ড্যান কিং

@ গ্যারিড্রোসেলা যদি আপনি <script> ট্যাগগুলিকে তেতেরিয়ায় প্রবেশ করান তবে সেগুলি & lt তে রূপান্তরিত হয়; এবং & জিটি; স্বয়ংক্রিয়ভাবে, তাই কোনও স্ক্রিপ্ট কখনও কার্যকর হয় না

— নীলজাইকে

6

এইচটিএমএলে? না।

এক্সএমএল / এক্সএইচটিএমএল? আপনি একটি CDATAব্লক ব্যবহার করতে পারে ।

— cletus
সূত্র

6

এটি খুব সহজ .... এই এক্সএমপি কোডটি ব্যবহার করুন

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

— কমলেশ
সূত্র

6

আমি অনুমান করি:

আপনি 100% বৈধ HTML5 লিখতে চান
আপনি কোড স্নিপেট (প্রায়) আক্ষরিক এইচটিএমএল রাখতে চান
- বিশেষ করে <পালানোর দরকার নেই

আপনার সমস্ত বিকল্প এই গাছটিতে রয়েছে:

এইচটিএমএল সিনট্যাক্স সহ
- পাঁচ ধরণের উপাদান রয়েছে
- যাদের "সাধারণ উপাদান" বলা হয় (যেমন <p>)
  - আক্ষরিক থাকতে পারে না <
  - এটি পরবর্তী ট্যাগ বা মন্তব্যের শুরু হিসাবে বিবেচিত হবে
- অকার্যকর উপাদান
  - তাদের কোন বিষয়বস্তু নেই
  - আপনি আপনার এইচটিএমএল একটি ডেটা অ্যাট্রিবিউটে রাখতে পারেন (তবে এটি সমস্ত উপাদানের ক্ষেত্রে সত্য)
  - অন্য কোথাও ডেটা সরাতে জাভাস্ক্রিপ্টের দরকার পড়বে
  - ডাবল-কোটেড বৈশিষ্ট্যগুলিতে, "এবং &thing;পালাতে হবে: "এবং &thing;যথাক্রমে
- কাঁচা পাঠ্য উপাদান
  - <script>এবং <style>শুধুমাত্র
  - এগুলি কখনই দৃশ্যমান হয় না
  - তবে জাভাস্ক্রিপ্টে আপনার পাঠ্য এম্বেড করা সম্ভব হবে
  - জাভাস্ক্রিপ্ট ব্যাকটিক্স সহ বহু-লাইন স্ট্রিংয়ের অনুমতি দেয়
  - এটি তখন গতিশীল sertedোকানো যেতে পারে
  - একটি আক্ষরিক প্রবেশ </scriptকোথাও অনুমতি দেওয়া হয় না<script>
- অব্যয়যোগ্য কাঁচা পাঠ্য উপাদান
  - <textarea>এবং <title>শুধুমাত্র
  - <textarea> কোড মোড়ানোর জন্য একজন ভাল প্রার্থী
  - </html>সেখানে লেখা সম্পূর্ণ আইনী
  - আইনী না হ'ল </textareaসুস্পষ্ট কারণে সাবস্ট্রিং
    - এই বিশেষ ক্ষেত্রে </textareaবা অনুরূপ এড়াতে
  - &thing; পালাতে হবে: &thing;
- বিদেশী উপাদান
  - ম্যাথএমএল এবং এসভিজি নেমস্পেসের উপাদানগুলি
  - কমপক্ষে এসভিজি আবার এইচটিএমএল এম্বেড করার অনুমতি দেয় ...
  - এবং সেখানে সিডিএটিএ অনুমোদিত হয়, সুতরাং এটির সম্ভাবনা রয়েছে বলে মনে হয়
এক্সএমএল সিনট্যাক্স সহ
- Konrad এর উত্তর দ্বারা আবৃত

দ্রষ্টব্য: >কখনই পালানোর দরকার নেই। এমনকি সাধারণ উপাদানগুলিতেও নয়।

— রবার্ট সিমার
সূত্র

1

আমি আপনার উত্তরের ব্যাপক পদ্ধতির পছন্দ করি। কয়েকটি সংশোধন: <script>এবং <style>দৃশ্যমান উপস্থাপন করা যেতে পারে, কেবল এটিকে জাভাস্ক্রিপ্ট হিসাবে কার্যকর করতে না চাইলে এবং এর <body>সাথে কিছু রেখে দিন। আমি মনে করি এটি একটি দুর্দান্ত কৌশল, শিক্ষিত প্রোগ্রামিং এবং শিক্ষার পক্ষে ভাল। এছাড়াও এখনও প্রধান ব্রাউজারগুলিতে প্রয়োগ করা হয়, যদিও এটি অবনতিযুক্ত। style="display: block; white-space: pre;"type="text/html"<xmp>

— স্যাম ওয়াটকিন্স

মজাদার. @ সামা ওয়াটকিন্স <xmp>বৈধ এইচটিএমএল 5 নয়, তবে আপনার অন্যান্য কৌশলটি সঠিক দেখাচ্ছে!

— রবার্ট সিমার

5

যদি আপনার লক্ষ্যটি একই কোডে আপনি অন্য কোথাও চালাচ্ছেন এমন কোডের একটি অংশ দেখানো হয় তবে আপনি টেক্সট কনটেন্টটি ব্যবহার করতে পারেন (এটি খাঁটি-জেএস এবং ভাল সমর্থিত: 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;

ফলাফলটিতে মাল্টি-লাইন ফর্ম্যাটিং পেতে, আপনাকে CSS স্টাইল সেট করতে হবে "সাদা-স্থান: প্রাক;" টার্গেট ডিভের উপর এবং প্রতিটিটির শেষে "\ r \ n" ব্যবহার করে স্বতন্ত্রভাবে লাইনগুলি লিখুন।

এখানে একটি ডেমো রয়েছে: https://jsfiddle.net/wphps3od/

এই পদ্ধতির টেক্সটরিয়া ব্যবহার করার সুবিধা রয়েছে: কোডটি টেক্সারিয়ায় যেমন হয় তেমন পুনরায় ফর্ম্যাট করা যায় না। (বিষয়গুলি  সম্পূর্ণ কোনও টেক্সেরিয়ায় সরানো হয়)

— টিমোথি কানস্কি
সূত্র

জাভাস্ক্রিপ্ট এবং DOM এপিআই ব্যবহার করার জন্য এটি আমাদের পক্ষে নিরাপদ করার জন্য এটি বেশ সুন্দর একটি পদ্ধতির। আমরা এটি <template>এমন কোনও কিছুর সাথে ব্যবহার করতে পারি যা সাধারণত রেন্ডার হয় না।

— স্যাম ওয়াটকিন্স

3

শেষ পর্যন্ত সবচেয়ে ভাল (যদিও বিরক্তিকর) উত্তর হ'ল "পাঠ্যটি এড়ানো"।

তবে অনেকগুলি পাঠ্য সম্পাদক রয়েছে - বা এমনকি একা একা মিনি ইউটিলিটিস - যা এটি স্বয়ংক্রিয়ভাবে করতে পারে। সুতরাং আপনি যদি না চান তবে আপনাকে কখনই ম্যানুয়ালি পলায়ন করা উচিত নয় (যদি না এটি পালানো এবং পালানো কোডের মিশ্রণ না হয় ...)

দ্রুত গুগল অনুসন্ধান আমাকে এটিকে দেখায়, উদাহরণস্বরূপ: http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

— স্টিফেন আর
সূত্র

3

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

আমার জন্য ভাল কাজ করে ..

" Alexander'sপরামর্শকে মাথায় রেখে , এখানে কেন আমি মনে করি এটি একটি ভাল পদ্ধতি"

যদি আমরা কেবল সহজ চেষ্টা করি তবে এটি <textarea>সর্বদা কার্যকর না হতে পারে যেহেতু বন্ধ করার textareaট্যাগগুলি ভুলভাবে প্যারেন্ট ট্যাগটি বন্ধ করে দিতে পারে এবং পিতামাতার নথিতে বাকী এইচটিএমএল উত্স প্রদর্শন করতে পারে যা বিশ্রী দেখায়।

htmlentitiesসমস্ত প্রযোজ্য অক্ষর যেমন < >HTML সত্তাগুলিতে রূপান্তর করে যা ফাঁসের কোনও সম্ভাবনা দূর করে elim

এই পদ্ধতির উপকারিতা বা ঘাটতি বা একই ফলাফল অর্জনের আরও ভাল উপায় হতে পারে, তবে দয়া করে মন্তব্য করুন কারণ আমি তাদের কাছ থেকে শিখতে চাই :)

— অনুপম
সূত্র

2

যদিও এই কোডটি প্রশ্নের উত্তর দিতে পারে, কীভাবে এবং কেন এটি সমস্যার সমাধান করে তা সম্পর্কিত অতিরিক্ত প্রসঙ্গ সরবরাহ করলে উত্তরের দীর্ঘমেয়াদী মান উন্নত হবে।

— আলেকজান্ডার

1

আপনি যদি htmlentities () এর মতো ব্যবহার করে থাকেন তবে <textarea> অপ্রয়োজনীয় হয়ে যায়। কেবল একটি ডিভ বা কিছুতে রাখুন। ওপি প্রস্তাব দেয়নি যে তারা যদিও পিএইচপি ব্যবহার করছে।

— নিক রাইস

@ নিক হ্যাঁ, আমার মতে টেক্সারিয়া প্রাকৃতিক পাত্রে কাজ করে কারণ এটি স্বয়ংক্রিয়ভাবে স্ক্রোলবার এবং স্টাফ যুক্ত করবে যা অন্যথায় স্টাইলিংয়ের দরকার হয় যদি আমরা কিছু ভাগ করে রাখি তবে ..

— অনুপম

2

কাঁচা পাঠ্য সন্নিবেশ করতে আপনি পিএইচপি এর মতো একটি সার্ভার সাইড ল্যাঙ্গুয়েজ ব্যবহার করতে পারেন:

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

— kta
সূত্র

2

এটি একটি সহজ কৌশল এবং আমি এটি সাফারি এবং ফায়ারফক্সে চেষ্টা করেছি

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

এটি এর মতো দেখাবে:

আপনি এটি এখানে সরাসরি দেখতে পাবেন

— Ramtin
সূত্র

2

আসলে এটি করার একটি উপায় আছে। এটির সীমাবদ্ধতা (এক) রয়েছে তবে এটি 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>

দয়া করে আমাকে ব্যাখ্যা করুন সবার আগে, সাধারণ এইচটিএমএল মন্তব্য কাজটি করে, পুরো ব্লকটি ব্যাখ্যা করা থেকে বাঁচাতে। আপনি এটিতে যে কোনও ট্যাগ সহজেই যুক্ত করতে পারেন, সেগুলি সব উপেক্ষা করা হবে। ব্যাখ্যা থেকে অবহেলিত, কিন্তু এর মাধ্যমে এখনও উপলব্ধ innerHTML! তাই যা বাকী রয়েছে তা হ'ল বিষয়বস্তুগুলি পাওয়া এবং পূর্ববর্তী এবং অনুবর্তী মন্তব্য টোকেনগুলি ফিল্টার করা।

(মনে রাখবেন - সীমাবদ্ধতা ব্যতীত) আপনি ভিতরে এইচটিএমএল মন্তব্য রাখতে পারবেন না, যেহেতু (কমপক্ষে আমার ক্রোমে) এর নীড় বাঁধাই সমর্থিত নয় এবং খুব প্রথম '->' শোটি শেষ করবে।

ভাল, এটি একটি বাজে সামান্য সীমাবদ্ধতা, তবে কিছু ক্ষেত্রে এটি কোনও সমস্যা নয়, যদি আপনার পাঠ্য এইচটিএমএল মন্তব্য মুক্ত থাকে। এবং, একটি নির্মাণের পরে পালানো আরও সহজ, তারপরে একটি সম্পূর্ণ গোছা।

এখন, সেই অদ্ভুত LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJoস্ট্রিংটি কী? এটি হ্যাশের মতো একটি এলোমেলো স্ট্রিং, ব্লকটিতে ব্যবহারের সম্ভাবনা নেই এবং এর জন্য ব্যবহার করা হয়? এখানে প্রসঙ্গটি, কেন আমি এটি ব্যবহার করেছি। আমার ক্ষেত্রে, আমি একটি ডিআইভির বিষয়বস্তু নিয়েছি, তারপরে এটি শোডাউন মার্কডাউন দিয়ে প্রক্রিয়া করেছি এবং তারপরে আউটপুটটিকে অন্য ডিভের জন্য বরাদ্দ করা হয়েছে। এইচটিএমএল ফাইলে মার্কডাউন ইনলাইন লিখতে এবং একটি ব্রাউজারে খোলার জন্য ধারণাটি ছিল, এটি ফ্লাই-অন-ফ্লাইতে রূপান্তরিত করবে। সুতরাং, আমার ক্ষেত্রে, <!--রূপান্তরিত হয়ে যায় <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, "");

— লিওনিড টিটোভ
সূত্র

1

এইচটিএমএল থেকে সমস্ত কিছু থেকে বাঁচার কয়েকটি উপায় রয়েছে , এগুলির কোনওটিই দুর্দান্ত নয়।

অথবা আপনি এমন একটি রাখতে পারেন iframeযা প্লেইন পুরানো পাঠ্য ফাইল লোড করে।

— বিসিএস
সূত্র

1

এটি বেশিরভাগ পরিস্থিতিতে সবচেয়ে ভাল পদ্ধতি:

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

আমি প্রথম ব্যক্তিকে ভোট দিয়েছিলাম যিনি এটির পরামর্শ দিয়েছেন তবে আমার সুনাম নেই। ইন্টারনেটে উত্তর খোঁজার চেষ্টা করা লোকের পক্ষে যদিও আমি কিছু বলতে বাধ্য হয়েছিলাম felt

— xdaxdb
সূত্র

1

এটি আমি এটি করেছিলাম:

$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";

— techiegirl
সূত্র

এই কোডটি এক্সএসএসের পক্ষে ঝুঁকিপূর্ণ। যে কেউ $ str = "</textarea> <textarea>" সেট করতে পারবেন

— গ্যারি ড্রোসেলা

হাইয়া, এটি সমস্যাটি ভালভাবে সমাধান করতে পারে ... তবে কীভাবে এবং কেন এটি কাজ করে সে সম্পর্কে আপনি যদি কিছুটা ব্যাখ্যা দিতে পারতেন তবে ভাল হবেন :) ভুলে যাবেন না - স্ট্যাকের ওভারফ্লোতে নতুন বৌসের স্তূপ রয়েছে এবং তারা শিখতে পারে আপনার দক্ষতা থেকে একটি বা দুটি - আপনার কাছে যা স্পষ্ট তা তাদের পক্ষে নাও হতে পারে।

— টেরিন পূর্ব

1

function escapeHTML(string)
    { 
        var pre = document.createElement('pre');
        var text = document.createTextNode(string);
        pre.appendChild(text);
        return pre.innerHTML;
}//end escapeHTML

এটি পালিয়ে যাওয়া এইচটিএমএল ফিরিয়ে দেবে

— গোবিন্দ সিং
সূত্র

1

আপনি চেষ্টা করতে পারেন:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

স্নিপেট প্রসারিত করুন

— ব্রেন্ডন
সূত্র

0

এটি প্রতিটি পরিস্থিতিতে কাজ নাও করতে পারে তবে একটি এর ভিতরে কোড স্নিপেট স্থাপন করা কোড textareaহিসাবে তাদের প্রদর্শন করবে।

আপনি টেক্সারিয়াকে সিএসএস দিয়ে স্টাইল করতে পারেন যদি আপনি এটি কোনও আসল পাঠের মতো দেখতে না চান।

— ড্রু থমাস
সূত্র

0

এটি কিছুটা হ্যাক, তবে আমরা এরকম কিছু ব্যবহার করতে পারি:

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>

স্নিপেট প্রসারিত করুন

সেই সিএসএসের সাহায্যে ব্রাউজারটি দেহের অভ্যন্তরে স্ক্রিপ্টগুলি প্রদর্শন করবে। এটি এই স্ক্রিপ্টটি কার্যকর করার চেষ্টা করবে না, কারণ এটির অজানা প্রকার রয়েছে text/html। <script>আপনি যদি একটি ক্লোজিং </script>ট্যাগ অন্তর্ভুক্ত না করতে চান তবে এটির অভ্যন্তরে বিশেষ অক্ষরগুলি রক্ষা করার দরকার নেই ।

আমি পৃষ্ঠার শরীরে এক্সিকিউটেবল জাভাস্ক্রিপ্ট প্রদর্শনের জন্য এই জাতীয় কিছু ব্যবহার করছি "একরকম" সাক্ষরতার প্রগতিতে "।

এই প্রশ্নে আরও কিছু তথ্য রয়েছে ট্যাগগুলি কখন দৃশ্যমান হওয়া উচিত এবং কেন তারা করতে পারে? ।

— স্যাম ওয়াটকিন্স
সূত্র

-1

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

— Preetika
সূত্র

-2

একটি দম্পতির উত্তরগুলির সংমিশ্রণ যা এখানে একসাথে কাজ করে:

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>

স্নিপেট প্রসারিত করুন

— bluejayke
সূত্র