How To Make Code Box In Blogger

Blogger website me code box banana simple hai. Aap HTML aur CSS ka use karke apne blog me ek styled code box add kar sakte hain jisme aap apna code showcase kar saken. Niche step-by-step process diya gaya hai:

---

Step 1: Basic Code Box Add Karna

Agar aap ek simple code box banana chahte hain, to yeh HTML ka use karein:

<pre>
<code>
  // Yeh ek code snippet hai
  function sayHello() {
    console.log("Hello, world!");
  }
</code>
</pre>

Explanation:

• <pre> tag: Code ko original formatting me dikhata hai.
• <code> tag: Code content ko wrap karne ke liye use hota hai.

---

Step 2: Styled Code Box Add Karna

Agar aap ek styled code box banana chahte hain, to HTML aur CSS ka use karein:

HTML:

<pre class="code-box">
<code>
  // Yeh ek styled code snippet hai
  function greet(name) {
    return `Hello, ${name}!`;
  }
</code>
</pre>

CSS:

<style>
  .code-box {
    background-color: #f4f4f4;
    color: #333;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: 14px;
  }
</style>

Explanation:

• background-color: Box ka background set karta hai.
• border: Box ke liye border add karta hai.
• overflow-x: auto: Horizontal scrolling allow karta hai agar code zyada lamba ho.
• font-family: Monospace font use karta hai jo code ke liye ideal hota hai.

---

Step 3: Code Box Add Karna Blogger Me

1. Blogger dashboard par login karein.
2. Post Editor ya HTML/JavaScript Widget open karein.
3. Code ko HTML View me paste karein:
   • Pehle HTML aur CSS code paste karein.
   • Uske baad apne code content add karein.
4. Save karein aur changes publish karein.

---

Step 4: Syntax Highlighting (Advanced)

Agar aap syntax highlighting chahte hain, to external libraries jaise Prism.js ya Highlight.js ka use karein.

Example: Prism.js

1. Prism.js ka CDN link add karein:

   <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism.min.css" rel="stylesheet" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script>
   

2. Code ko specify karein:

   <pre class="language-javascript">
   <code>
     // Prism.js ke saath syntax highlighting
     const add = (a, b) => a + b;
   </code>
   </pre>
   

---

Step 5: Preview and Publish

1. Preview karke dekhein ki code box sahi dikh raha hai ya nahi.
2. Blog ko Publish karein.

---

Bonus Tips:

1. Mobile-Friendly Design: Code box ka width responsive banayein using max-width: 100%.
2. Readable Colors: Background aur text colors aise choose karein jo easily readable ho.
3. Reusability: CSS ko ek baar global theme me add karein taaki sabhi posts me use ho.