Code
আপনার ব্লগে কোড শেয়ার করার জন্য প্রফেশনাল 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
CODE
<pre style="background: #282c34; color: #fff; padding: 15px; border-radius: 8px; overflow-x: auto;">
<code>
// আপনার কোড এখানে লিখুন
console.log("Hello World");
</code>
</pre>
[\code]<div class="ilybd-ad-slot">
<!-- ADSENSE CODE HERE -->
<div class="ad-placeholder">Advertisement</div>
</div>
<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!
10 / 100 Powered by Rank Math SEO SEO Score How to Build an App...
হোস্টিং ব্যবসা করার পদ্ধতি (২টি প্রধান পথ)
5 / 100 Powered by Rank Math SEO SEO Score হোস্টিং ব্যবসা করার পদ্ধতি: পূর্ণাঙ্গ...
২০২৬ সালের সেরা ৫টি এআই টুলস যা আপনার কাজকে সহজ করে...
13 / 100 Powered by Rank Math SEO SEO Score :{২০২৬ সালের সেরা ৫টি এআই...
