HTML Code Box kese lagaye

वेबसाइट पर HTML Code दिखाने वाला Box कैसे लगाएं?

📌 Main Summary / मुख्य सारांश

वेबसाइट पर HTML Code दिखाने वाला Box कैसे लगाएं? हेलो दोस्तों!

1. हेलो दोस्तों! 👋

आज के इस आर्टिकल में हम आपको बताएंगे कि अपनी ब्लॉग या वेबसाइट पर HTML Code दिखाने वाला Box कैसे लगाया जाता है।

अगर आप अपनी वेबसाइट पर कोई HTML, CSS या JavaScript Code अपने विज़िटर्स को दिखाना चाहते हैं, ताकि वे उस Code को आसानी से Copy करके अपनी वेबसाइट पर इस्तेमाल कर सकें, तो इसके लिए आप एक सुंदर और उपयोगी Code Box लगा सकते हैं।

नीचे दिए गए Box में आप अपना HTML Code दिखा सकते हैं। विज़िटर उस Code को देखकर या Copy करके अपनी वेबसाइट पर इस्तेमाल कर सकते हैं।

HTML Code Box क्या होता है?

HTML Code Box एक ऐसा Box होता है जिसमें हम अपना HTML Code या अन्य Coding दिखाते हैं। इसका फायदा यह है कि Code सामान्य Article के Text से अलग दिखाई देता है और विज़िटर उसे आसानी से पहचान और Copy कर सकता है।

उदाहरण के लिए, अगर आप किसी वेबसाइट पर कोई HTML Widget या Tool का Code शेयर कर रहे हैं, तो आप उस Code को इसी तरह के Box में दिखा सकते हैं।

Code Box लगाने के लिए क्या करना होगा?

अगर आप अपने Blog Post या Page में ऐसा Code Box लगाना चाहते हैं, तो सबसे पहले अपना Blog Post/Page खोलें और HTML View में जाएं।

इसके बाद जिस जगह आपको Code Box दिखाना है, वहाँ नीचे दिया गया Code Paste करें।

2. Code Number 1

PASTE YOUR CODE HERE

ऊपर दिए गए Code में:

"PASTE YOUR CODE HERE"

की जगह अपना HTML Code डालना है।

3. उदाहरण के लिए:

<h1>Hello World</h1>

ध्यान रखें कि अगर आप HTML Code को Box के अंदर दिखाना चाहते हैं, तो कुछ HTML characters को "<" और ">" के रूप में लिखना पड़ सकता है। इससे Browser उस Code को चलाने के बजाय उसे Text की तरह दिखाएगा।

Blog Post लिखने के बाद Code Box कैसे लगाएं?

अगर आपका Blog Post पहले से लिखा हुआ है और अब आप उसमें Code Box जोड़ना चाहते हैं, तो आपको अपने Post/Page के HTML View में जाना होगा।

4. इसके बाद:

1. अपना Blog Post या Page खोलें। 2. HTML View पर जाएं। 3. जहाँ Code Box दिखाना है, वहाँ Cursor रखें। 4. ऊपर दिया गया Code Paste करें। 5. "PASTE YOUR CODE HERE" की जगह अपना Code डालें। 6. Post/Page को Preview करके देखें। 7. सब कुछ सही होने पर उसे Publish या Update कर दें।

किसी भी HTML Code को Box में कैसे दिखाएं?

अगर आप चाहते हैं कि कोई भी HTML Code आपके Article में Code Box के अंदर दिखाई दे, तो उस Code को ऊपर दिए गए Box के अंदर रखें।

इस तरह आपका Code सामान्य Paragraph से अलग दिखाई देगा और आपके वेबसाइट विज़िटर उसे आसानी से पढ़ और Copy कर सकेंगे।

5. जरूरी बात

अगर आप HTML Code को केवल दिखाना चाहते हैं, तो उसे सीधे HTML के रूप में डालने पर Browser उसे Execute कर सकता है। इसलिए Code को Text के रूप में दिखाने के लिए HTML characters को properly escape करना जरूरी है।

6. इस तरीके से आप अपने Blog पर:

- HTML Code - CSS Code - JavaScript Code - Widget Code - Tool Code - अन्य Website Codes

आसानी से अपने Readers के साथ Share कर सकते हैं।

7. निष्कर्ष

उम्मीद है कि अब आपको समझ आ गया होगा कि Blog या Website पर HTML Code दिखाने वाला Box कैसे लगाया जाता है।

इस Code Box की मदद से आप अपने Articles में किसी भी Coding को एक अलग और व्यवस्थित Box में दिखा सकते हैं, जिससे आपके Visitors के लिए Code को पढ़ना और Copy करना आसान हो जाता है।

अगर आपको यह जानकारी उपयोगी लगी हो, तो इस Article को अपने दोस्तों के साथ भी जरूर Share करें। 👍

SEO Title: वेबसाइट पर HTML Code दिखाने वाला Box कैसे लगाएं

Meta Description: वेबसाइट पर HTML Code दिखाने वाला Box कैसे लगाएं? हेलो दोस्तों! 👋 आज के इस आर्टिकल में हम आपको बताएंगे कि अपनी ब्लॉग या वेबसाइट पर HTML Code दिखाने वाला Bo

Keywords: code, html, box, अपन, आपक, सकत, अगर, blog, post, copy, page, paste, इसक, div, pre

HTML CODE

<div class="zub-code-box">
  <div class="zub-code-header">
    <span>HTML CODE</span>
    <button onclick="copyZubCode(this)" type="button">📋 Copy Code</button>
  </div>
  <pre><code id="zub-code-content">&lt;!-- PASTE YOUR HTML CODE HERE --&gt;
&lt;div&gt;
  Your HTML Code Here
&lt;/div&gt;</code></pre>
</div>
<style>
.zub-code-box {
  width: 100%;
  max-width: 900px;
  margin: 25px auto;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 5px 18px rgba(0,0,0,0.12);
  box-sizing: border-box;
}
.zub-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  background: #1f2937;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
}
.zub-code-header button {
  border: 0;
  padding: 8px 13px;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
}
.zub-code-header button:hover {
  opacity: 0.9;
}
.zub-code-box pre {
  margin: 0;
  padding: 18px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: #e5e7eb;
  background: #111827;
  font-family: Consolas, Monaco, monospace;
  font-size: 14px;
  line-height: 1.7;
}
.zub-code-box code {
  font-family: inherit;
}
@media (max-width: 600px) {
  .zub-code-header {
    font-size: 12px;
  }
  .zub-code-header button {
    padding: 7px 10px;
    font-size: 12px;
  }
  .zub-code-box pre {
    font-size: 12px;
    padding: 14px;
  }
}
</style>
<script>
function copyZubCode(button) {
  var codeBox = button.closest(".zub-code-box");
  var code = codeBox.querySelector("code").innerText;
  navigator.clipboard.writeText(code).then(function() {
    var oldText = button.innerText;
    button.innerText = "✅ Copied!";
    setTimeout(function() {
      button.innerText = oldText;
    }, 2000);
  }).catch(function() {
    var textArea = document.createElement("textarea");
    textArea.value = code;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("copy");
    document.body.removeChild(textArea);
    button.innerText = "✅ Copied!";
    setTimeout(function() {
      button.innerText = "📋 Copy Code";
    }, 2000);
  });
}
</script>