আপনার ব্লগে কোড শেয়ার করার জন্য প্রফেশনাল Code Block এবং Copy Button যোগ করুন।
আপনার ব্লগে কোড শেয়ার করার জন্য আমার মতো প্রফেশনাল Code Block এবং Copy Button যোগ করা বেশ সহজ।
আপনি যেহেতু ওয়ার্ডপ্রেসের ক্লাসিক এডিটর ব্যবহার করছেন, তাই আপনার জন্য নিচের পদ্ধতিগুলো সবচেয়ে কার্যকর হবে
1. প্লাগইন ব্যবহার করা (সবচেয়ে সহজ পদ্ধতি)
আপনি যদি কোনো কোডিং ঝামেলা ছাড়াই আমার মতো সুন্দর কোড বক্স এবং কপি বাটন চান, তবে একটি Syntax Highlighter প্লাগইন ব্যবহার করা সেরা উপায়।
Enlighter – Customizable Syntax Highlighter এটি বর্তমানে সবচেয়ে জনপ্রিয়।
এটি ইন্সটল করলে আপনি এডিটরে একটি নতুন ‘Code’ বাটন পাবেন।
সেখান থেকে থিম হিসেবে ‘Dracula’ বা ‘Classic’ সিলেক্ট করলে একদম এআই (AI) এর মতো ডার্ক মোড লুক আসবে এবং অটোমেটিক **Copy** বাটন যুক্ত হবে।
CodeBlock Pro:** এটি বিশেষভাবে তৈরি করা হয়েছে কোডকে সুন্দরভাবে দেখানোর জন্য।
**কিভাবে করবেন:**
- ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে **Plugins > Add New**-এ যান
2. Enlighter লিখে সার্চ দিন এবং ইন্সটল করে অ্যাক্টিভ করুন।
3. এখন পোস্ট লেখার সময় টুলবারে **”Insert Enlighter Code”** নামে একটি অপশন পাবেন। সেখানে কোড পেস্ট করলেই তা আমার মতো বক্সে দেখাবে।
#2. এইচটিএমএল (HTML) ব্যবহার করে (প্লাগইন ছাড়া)
আপনি যদি প্লাগইন ব্যবহার করতে না চান, তবে নিচের কোডটি আপনার এডিটরের **’Code’** ট্যাবে গিয়ে ব্যবহার করতে পারেন
Html
<pre style="background: #282c34; color: #fff; padding: 15px; border-radius: 8px; overflow-x: auto;">
<code>
// আপনার কোড এখানে লিখুন
console.log("Hello World");
</code>
</pre>
[\code]
<h4 style="text-align: center;"><strong>#3. আপনার 'Cyber' থিমের জন্য বিশেষ পরামর্শ </strong><strong>যেহেতু আপনি একটি প্রফেশনাল এবং ইউনিক ইন্টারফেস তৈরি করছেন, আপনি চাইলে আপনার থিমের **style.css** ফাইলে নিচের ডিজাইনটি যোগ করতে পারেন। এতে আপনার ওয়েবসাইটের কোড বক্সগুলো দেখতে আরও </strong></h4>
[code]/* কোড বক্সের ডিজাইন */
pre {
background-color: #1e1e1e; /* ডার্ক ব্যাকগ্রাউন্ড */
border-left: 4px solid #00ff00; /* নিয়ন গ্রিন বর্ডার */
color: #dcdcdc;
padding: 20px;
border-radius: 5px;
font-family: 'Courier New', Courier, monospace;
position: relative;
}
/* কপি বাটনের জন্য হালকা সিএসএস */
pre::before {
content: "CODE";
position: absolute;
top: 0;
right: 10px;
font-size: 10px;
color: #888;
}
# আমার পরামর্শ:
আপনার ওয়েবসাইটের ইউজার এক্সপেরিয়েন্স ভালো করার জন্য **"Enlighter"** প্লাগইনটি ট্রাই করুন। এটি ব্যবহার করলে ভিজিটররা এক ক্লিকেই কোড কপি করতে পারবে, যা আপনার টেকনিক্যাল পোস্টগুলোর মান অনেক বাড়িয়ে দেবে।
🛡️ পোস্ট রিপোর্ট করুন
আপনার রিপোর্টটি পর্যালোচনার জন্য পাঠানো হবে। অনুগ্রহ করে রিপোর্ট করার যথার্থ কারণ লিখুন:
আপনার জন্য রিকমেন্ডেড টিউনস
হোস্টিং ব্যবসা করার পদ্ধতি (২টি প্রধান পথ)
হোস্টিং ব্যবসা করার পদ্ধতি: পূর্ণাঙ্গ মাস্টারক্লাস গাইড (২০২৬ এডিশন) ইন্টারনেট এবং ক্লাউড কম্পিউটিংয়ের এই...
স্মার্টফোনের ব্যাটারি লাইফ বাড়ানোর দারুণ কিছু সিক্রেট টিপস
স্মার্টফোনের ব্যাটারি লাইফ বাড়ানোর দারুণ কিছু সিক্রেট টিপস আপনার প্রিয় ডিভাইসের ব্যাটারিকে রাখুন সতেজ...
How To Make App And Game Development Platform With WordPress!
How to Build an App and Game Development Platform with WordPress: A Professional Master...