HomeWordpress

ADD Code Snippet Without Plugin in WordPress Post

Like Tweet Pin it Share Share Email

wordpress add code without plugin

In my previous post aapne dekha ki kis tarah wordpress par aap post me Code snippet add karne ke liye plugins ka use kar sakte hain, lekin agar aapko bina plugin ke code snippet post me add karna ho to kaise karenge?




Agar aap frequent sabhi posts me code snippet add nahi karte, to aisi situation me aap plugin ka use nahi karna chahenge, aap manually code snippet post me add karna jyada pasand karenge.

Aap me se kayi log apne tutorial articles me regular code snippet ka use karte honge, but agar without plugin yah kaam karte hain to kayi html related errors aap face kar sakte hain.

Actually wordpress me manually code snippet add karne ke liye alag method hai.

Ok, then aaiye dekhte hain kaise wordpress me without plugin properly code snippet post me add karte hain.

How Add Code snippet in wordpress Post Without Plugin

WordPress me code snippet add karne ke liye <pre> and <code> tag ka use kiya jata hai jo normal text and code ko alag-alag separate karti hai.




Aap <pre> and <code> tags ko style karke ek perfect code block ka look bhi de sakte hain.

<pre> and <code> both alag-alag tag hain.

  • <pre> tag ka use code snippet ko normal text se alag karke block me show karne ke liye hota hai. Yah tag code snippet ko normal text se separate karti hai ji se html related errors face nahi hoti.
  • <code> tag ka use code ko add karne ke liye kiya jata hai
  • Aap kisi bhi tag ka use kar sakte hain. Visual mode me aap “preformatted <pre>” use kar sakte hain aur text mode me <code> ka use kar sakte hain.

Remember <pre> and <code> tag ka use karne se pahle aapko apna code format karna jaroori hai, kyunki code me “<” and “>” jaise character convert na karne se html errors post me show kar sakti hain.

Post Me Code Snippet Kaise Add kare?

Agar aap text mode me code paste kar rahe hain to sabse pahle apne code snippet ko Format kar le, aap Postable online tool par apna code paste kar format kar sakte hain aur formatted code copy karke post me add kar sakte hain.

Ok suppose mujhe below ad code apni post me show karna hai:-

<p class="red">

To main apni post me code ko format karke kuch is tarah se above code text mode me add karunga.

<pre>&lt;p class=&#34;red&#34;&gt;</pre>

Ab aap below image me dekh sakte hain mera code kis tarah se show kar raha hai.




add code snippet in wordpress post

Agar aap visual mode me code add kar rahe hain to aapko code snippet format karne ki jarurat nahi hai, bus code paste kare and select kare and Format me Preformatted select kare.

wordpress preformatted code add

Code box ko stylish kaise banaye?

By default agar aap pre tag ka use karke code snippet add karenge to uska look normal text ki tarah show hota hai.

Aap apne code box ka look change kar sakte hain, bus kuch CSS style add karna hai.

Meri post ke code block jaisa look dena chahte hain to apne Appearance » Edit CSS me below CSS style add kar sakte hain.




pre {
 display: block;
 padding: 9.5px;
 margin: 0 0 10px;
 font-size: 13px;
 line-height: 1.428571429;
 color: #333;
 background-color: #f5f5f5;
 border: 1px solid #ccc;
 border-radius: 4px;
}

Yah code add karne ke baad aapko sirf formatted code snippet apni post me add karna hai aur code ko select karke Format style me “preformatted” choose karna hai.

Note: Above code visual mode pre (preformatted) tag ke liye hai, text mode me use karne ke liye aap pre ki jagah code add kar sakte hain.

To is tarah se aap bina kisi plugin ke wordpress post me code snippet add kar sakte hain aur code box ko style look bhi de sakte hain.

Remember agar aapke code snippet kafi big hain then main recommend karunga use plugin or use online code pasting site, other wise small snippet coding ke liye aap above method use kar sakte hain.

Yah post thodi confuse karne wali hai, agar koi problem aap face kar rahe hain then comment karke pooch sakte hain, i will assist you.




Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *