How To make code box like This professional in blogger Hindi Me

Image
LuxTechZone 23 Dec, 2024


 Code box ka use isliye kiya jata hai kyunki ye developers aur content creators ke liye structured aur readable code dikhane ka ek professional aur user-friendly tarika hai. Yeh tool un blogs aur websites ke liye kaafi useful hai jaha coding-related tutorials, examples, ya documentation share ki jati hai.

Code Box Ka Use Karne Ke Fayde

  1. Code Readability Improve Karna

    • Code box code ko format aur structure me dikhata hai, jo users ke liye easily readable hota hai.
    • Syntax highlighting code ke alag-alag parts (tags, variables, functions) ko visually alag karta hai.

  2. Syntax Highlighting

    • Syntax highlighting important keywords (e.g., div, function, variables) ko alag color me dikhata hai, jo beginners ke liye code samajhna asaan banata hai.

  3. Copy-Paste Friendly

    • Code box me diya gaya code users easily select aur copy kar sakte hain bina design ya formatting ko effect kiye.

  4. Better Presentation

    • Blog posts me code ko simple text ke bajaye ek professional aur clean design me dikhata hai.

  5. Responsive Design

    • Code box scrollable hota hai, isliye long codes ke liye bhi user experience better hota hai.

  6. Error-Free Tutorials

    • Beginners ke liye step-by-step code explanation ke sath ek clean code box errors aur confusion avoid karta hai.

Kaha Use Hota Hai Code Box

  1. Programming Tutorials

    • Websites jaise Codecademy, freeCodeCamp, aur blogs jo coding sikhate hain, code box ka use karte hain.

  2. Documentation

    • Software ya frameworks (e.g., React, Angular, Laravel) ke official documentation me.

  3. Coding Examples

    • Developers ke blogs aur websites jaha code snippets share ki jati hain.

  4. Code Sharing Platforms

    • Platforms like GitHub, Stack Overflow, aur Pastebin ke liye code box standard design ka part hai.

Blogging Me Code Box Ka Use

Agar aap ek Blogger, WordPress, ya kisi aur platform par coding-related content share karte hain, to code box ka use aapke content ko:

  • Professional banata hai.
  • Beginners ke liye easily understandable banata hai.
  • SEO ke liye helpful hota hai, kyunki search engines code snippets ko identify karte hain.

Aapke readers ke liye ek proper code box professional aur engaging experience provide karta hai.

Blogger par aise code snippet box banane ke liye aap HTML aur CSS ka use kar sakte hain. Yeh steps follow karein:

Step 1: HTML Code Add Karein

Post editor me HTML view enable karke niche ka code paste karein:

<div class="code-box">
  <pre>
    <code>
      &lt;div class="product-grid"&gt;
        &lt;div class="product-item"&gt;
          &lt;img src="product-image.jpg" alt="Product"&gt;
          &lt;h3&gt;Product Name&lt;/h3&gt;
          &lt;p&gt;$Price&lt;/p&gt;
          &lt;button&gt;Buy Now&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    </code>
  </pre>
</div>

Step 2: CSS Styling Add Karein

  1. Blogger ke Theme Editor me jaayein.
  2. Edit HTML par click karein.
  3. Apne theme ke <style> tag ya CSS section me niche ka CSS code paste karein:
.code-box {
  background-color: #282c34;
  color: #61dafb;
  padding: 20px;
  border-radius: 5px;
  font-family: "Courier New", Courier, monospace;
  overflow-x: auto;
  white-space: pre-wrap;
}

.code-box pre {
  margin: 0;
}

.code-box code {
  display: block;
  font-size: 14px;
  line-height: 1.5;
}

Step 3: Save aur Preview Karein

  1. CSS changes save karein aur Blogger ka post preview karein.
  2. Aapka code box dark theme ke saath render hoga, aur HTML code usme properly format hoke dikhai dega.

Optional: Syntax Highlighting

Agar aap syntax highlighting chahte hain to third-party libraries jaise Prism.js ya Highlight.js ka use karein:

  1. Prism.js ya Highlight.js ke scripts ko apne theme me include karein: 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
  2. Code box me classes add karein: 
    <pre><code class="language-html">
  &lt;div class="product-grid"&gt;
  ...
  &lt;/div&gt;
</code></pre>

Isse code syntax highlighted aur professional dikhai dega.

Aap Prism.js ka link aur script Blogger theme me add karna chahte hain, to yeh steps follow karein:

Step 1: Blogger Dashboard Mein Login Karein

  1. Blogger Dashboard par jaayein.
  2. Apne blog ka selection karein.

Step 2: Theme Editor Mein Jayein

  1. Left sidebar par Theme option par click karein.
  2. Customize ke niche Edit HTML option par click karein.

Step 3: Script Aur Link Ko Add Karein

  • Prism.js ke <link> aur <script> tags ko <head> section ke andar paste karein:
    1. <head> tag ko search karein (aap Ctrl+F ka use kar sakte hain).
    2. <head> ke andar niche ka code paste karein: 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

Step 4: Save Theme

  1. Changes save karne ke liye Save button par click karein.
  2. Ensure karein ki aapne galti se kisi aur code ko modify nahi kiya ho.

Step 5: Blog Post Me Code Snippet Ka Use Karein

  1. Blogger ke post editor me jaayein.
  2. Post ka HTML view enable karein aur apna code snippet paste karein: 
    <pre><code class="language-html">
&lt;div class="product-grid"&gt;
  &lt;div class="product-item"&gt;
    &lt;img src="product-image.jpg" alt="Product"&gt;
    &lt;h3&gt;Product Name&lt;/h3&gt;
    &lt;p&gt;$Price&lt;/p&gt;
    &lt;button&gt;Buy Now&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

Step 6: Preview Aur Publish Karein

  1. Post ko Preview karein aur ensure karein ki syntax highlighting sahi tarike se kaam kar rahi hai.
  2. Agar sab kuch theek hai to post ko publish karein.

Additional Tips

  • Prism.js ke themes customize karne ke liye Prism Themes se alag-alag CSS themes try karein.
  • Prism.js ke plugins ka use karke extra features (line numbers, copy button, etc.) add kar sakte hain.


Agar aap Prism.js ya koi bhi external script Blogger theme me add karne ki koshish kar rahe hain aur vo add nahi ho raha, to uska primary reason Blogger ka strict XML syntax aur code structure hota hai. Is problem ko fix karne ke liye yeh step-by-step solution follow karein:

1. Script Add Karne Ka Sahi Tarika

Blogger themes me <link> aur <script> tags ko XML-compliant format me add karna hota hai. Niche ka code try karein:

<b:include data='blog' name='all-head-content'/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

2. Steps to Add Code

  1. Login to Blogger Dashboard

    • Blogger dashboard me login karein aur apne blog ka selection karein.

  2. Edit Theme

    • Theme section par jaakar Edit HTML button par click karein.

  3. Find the <head> Section

    • Search bar me Ctrl + F ka use karke <head> tag search karein.

  4. Add Code in the <head> Section

    • <head> tag ke andar, <b:include data='blog' name='all-head-content'/> ke niche niche ka code paste karein:

      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

  5. Save the Theme

    • Changes save karne ke liye Save button par click karein.

3. Common Issues and Fixes

Issue 1: SAXParseException Error

  • Reason: <link> tag properly terminate nahi kiya gaya. Ensure karein ki <link> tag self-closing ho (<link ... />).
  • Solution: Code me niche diya gaya structure follow karein: 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"/>

Issue 2: Script Tags Blogger Theme Me Block Ho Rahe Hain

  • Reason: Blogger kuch scripts ko block kar deta hai agar wo galat jagah paste ho ya syntax galat ho.
  • Solution: Scripts ko <body> ke end me paste karein: 
    <b:section class='main' id='main'>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
</b:section>

Issue 3: Theme Save Nahi Ho Raha

  • Reason: Aapke paste kiye gaye code me kuch galat syntax ho sakta hai.
  • Solution: Code ka structure XML-compliant banayein, aur <link> aur <script> tags ko properly format karein.

4. Alternative: Use External Widget

Agar aap theme me script add nahi kar paa rahe hain, to Blogger ke Layout section me widget ke through add karein:

  1. Layout section me jaakar Add a Gadget par click karein.
  2. HTML/JavaScript widget select karein.
  3. Usme niche ka code paste karein: 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

Agar ab bhi code add nahi ho raha, to mujhe aapki theme ke specific section ka code provide karein, taaki main aur accurately guide kar sakoon.


Next Post Previous Post
No Comment
Add Comment
comment url