সোর্স কোড

একটি সাধারণ টেক্সট উইজেটে কোড পেস্ট করুন এবং এটি একটি অপঠনযোগ্য ব্লক রেখে বিন্যাসকে স্ট্রিপ করে। দ্য সোর্স কোড উইজেট ইন এলিমেন্টরের জন্য মাস্টার অ্যাডঅন এটি ঠিক করে: এটি সঠিক সিনট্যাক্স হাইলাইটিং, লাইন নম্বর, একটি ভাষা থিম এবং একটি অনুলিপি বোতাম সহ আপনার কোড দেখায়, যাতে পাঠকরা এক ক্লিকে একটি স্নিপেট ধরতে পারে৷।

এটি টিউটোরিয়াল, ডকুমেন্টেশন এবং ডেভেলপার ব্লগের জন্য তৈরি করা হয়েছে, যেখানে আপনাকে পিএইচপি, জাভাস্ক্রিপ্ট, সিএসএস, এইচটিএমএল বা অন্য কোনো ভাষা পরিষ্কারভাবে দেখাতে হবে। আপনি কোড পেস্ট করুন, একটি ভাষা এবং থিম চয়ন করুন এবং কপি বোতাম সেট করুন, সবই এলিমেন্টর প্যানেল থেকে। নীচে প্রতিটি সেটিং মাধ্যমে একটি রান আছে।

সোর্স কোড উইজেট কি করে #

উইজেটটি কোডের একটি ব্লক নেয় এবং আপনার চয়ন করা ভাষার উপর ভিত্তি করে রঙ-কোডেড সিনট্যাক্স হাইলাইটিং সহ এটি রেন্ডার করে। এটি লাইনগুলিকে নম্বর দিতে পারে, বেশ কয়েকটি সম্পাদক থিমের মধ্যে একটি প্রয়োগ করতে পারে এবং একটি কপি-টু-ক্লিপবোর্ড বোতাম যোগ করতে পারে যা নিশ্চিত করে যে কোডটি কখন অনুলিপি করা হয়েছে।

এটিতে তিনটি ট্যাব রয়েছে: কোড, ভাষা এবং অনুলিপি বোতামের জন্য সামগ্রী, ধারক এবং বোতামের চেহারার জন্য শৈলী এবং সাধারণ এলিমেন্টর বিকল্পগুলির জন্য উন্নত৷।

আপনি শুরু করার আগে #

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
• আপনি যে কোড স্নিপেটটি প্রদর্শন করতে চান।

সোর্স কোড উইজেট কিভাবে যোগ করবেন #

Elementor এডিটরে, খুলুন উপাদান প্যানেল এবং অনুসন্ধান করুন সোর্স কোড, অথবা মাস্টার অ্যাডঅন বিভাগে স্ক্রোল করুন। এটি আপনার পৃষ্ঠায় টেনে আনুন। এটি একটি নমুনা স্নিপেট দিয়ে লোড হয় যাতে আপনি এখনই হাইলাইটিং দেখতে পারেন।

আপনার কোড যোগ করুন এবং একটি ভাষা চয়ন করুন #

খোলা বিষয়বস্তু ট্যাব। দ্য সোর্স কোড বিভাগে সবকিছু ধারণ করে। আপনার স্নিপেট পেস্ট করুন সোর্স কোড বক্স, তারপর এটির উপরে ভাষা এবং থিম সেট করুন।

• কোড: হাইলাইট করার ভাষা, যেমন পিএইচপি, জাভাস্ক্রিপ্ট, সিএসএস বা এইচটিএমএল। এটি কীভাবে রঙগুলি প্রয়োগ করা হয় তা সেট করে।
• থিম: ব্লকের রঙের স্কিম (নীচে আচ্ছাদিত)।
• সোর্স কোড: স্নিপেট নিজেই, AI বিকল্পের সাথে লিখুন যদি আপনার একটি দ্রুত উদাহরণের প্রয়োজন হয়।

একটি থিম চয়ন করুন #

দ্য থিম ড্রপডাউন কোড ব্লকের রঙের স্কিম সেট করে। এতে ডিফল্ট, ডার্ক, ফাঙ্কি, ওকাইডিয়া, টোয়াইলাইট, কোয়, সোলারাইজড লাইট, টুমরো এবং একটি কাস্টম বিকল্প রয়েছে, যাতে আপনি ব্লকটিকে একটি হালকা বা অন্ধকার পৃষ্ঠার সাথে মেলাতে পারেন।

ভাষা এবং থিম একসাথে পরিবর্তন করা প্রতিটি স্নিপেটকে সঠিক চেহারা দেয়। এখানে ডার্ক থিমের একটি জাভাস্ক্রিপ্ট স্নিপেট রয়েছে।

কপি বোতাম সেট আপ করুন #

কপি বোতামটি টিউটোরিয়ালের জন্য উইজেটকে উপযোগী করে তোলে। কোড বক্সের নীচে এটির জন্য নিয়ন্ত্রণ রয়েছে।

• কপি বোতাম সক্ষম করুন: কপি-টু-ক্লিপবোর্ড বোতামটি দেখান বা লুকান।
• লাইন নম্বর সক্রিয় করুন: বাম দিকের লাইন নম্বরগুলি চালু বা বন্ধ করুন।
• বোতাম দৃশ্যমানতা: বোতামটি সর্বদা বা শুধুমাত্র হোভারে দেখান।
• বোতামের অবস্থান: উপরের ডানদিকের মতো এটি একটি কোণে রাখুন।
• কপি বোতাম টেক্সট এবং পরে কপি বোতাম টেক্সট: একটি অনুলিপির আগে এবং পরে লেবেল, যেমন কপি কোড এবং কপি করা।

যখন একজন দর্শক বোতামে ক্লিক করেন, তখন অনুলিপিটি কাজ করেছে তা নিশ্চিত করতে লেবেলটি আপনার অনুলিপি করার পরে পাঠ্যে স্যুইচ করে।

কোড ব্লক শৈলী #

দ্য শৈলী ট্যাব বিভক্ত করা হয় ধারক এবং বোতাম, প্লাস নিদর্শন (একটি প্রো বিকল্প)। দ্য ধারক বিভাগ কোড ব্লকের ফ্রেম নিয়ন্ত্রণ করে।

• উচ্চতা: ব্লকের উচ্চতা ক্যাপ করুন এবং দীর্ঘ কোড স্ক্রোল করতে দিন।
• প্যাডিং এবং মার্জিন: ব্লকের ভিতরে এবং চারপাশে ব্যবধান।
• বর্ডার টাইপ এবং বর্ডার ব্যাসার্ধ: রূপরেখা এবং বৃত্তাকার কোণ।

দ্য বোতাম বিভাগটি অনুলিপি বোতামটি স্টাইল করে: এর রঙ, টাইপোগ্রাফি, প্যাডিং এবং সীমানা, উভয় স্বাভাবিক এবং হোভার অবস্থায়।

পৃষ্ঠায় ফলাফল #

প্রকাশ বা পূর্বরূপ এবং কোড রেন্ডার হাইলাইট, লাইন নম্বর এবং একটি কার্যকরী অনুলিপি বোতাম সহ। নীচে ডার্ক থিমের একটি CSS স্নিপেট রয়েছে যার বোতামটি তার অনুলিপি করা অবস্থা দেখাচ্ছে৷।

সাধারণ ব্যবহারের ক্ষেত্রে #

• টিউটোরিয়াল এবং কিভাবে পোস্ট করতে হয় শেয়ারিং কোড পাঠকরা অনুলিপি করতে পারেন।
• প্লাগইন এবং থিম ডকুমেন্টেশন কনফিগার বা হুক উদাহরণ সহ।
• বিকাশকারী ব্লগ পিএইচপি, জাভাস্ক্রিপ্ট বা সিএসএস-এ স্নিপেট দেখানো হচ্ছে।
• জ্ঞানের ভিত্তি কপি-পেস্ট কমান্ড সহ।
• ল্যান্ডিং পেজ একটি API কল বা এম্বেড কোড প্রদর্শন করা হচ্ছে।

সোর্স কোড উইজেটের সাথে কাজ করার জন্য টিপস #

• কোডের সাথে ভাষা মেলে। সঠিক কোড সেটিং হল যা হাইলাইটিংকে সঠিক করে তোলে।
• পৃষ্ঠার সাথে মানানসই একটি থিম চয়ন করুন। অন্ধকার বিভাগে একটি অন্ধকার থিম এবং সাদা পৃষ্ঠাগুলিতে একটি হালকা থিম ব্যবহার করুন৷।
• কপি বোতামটি দৃশ্যমান রাখুন। টিউটোরিয়ালের জন্য বোতামের দৃশ্যমানতা সর্বদা সেট করুন যাতে পাঠকরা এটি দেখতে পান।
• লম্বা স্নিপেটগুলির জন্য উচ্চতা ক্যাপ করুন। স্ক্রোল সহ একটি নির্দিষ্ট উচ্চতা পৃষ্ঠাটি দখল করা থেকে একটি দীর্ঘ ব্লক রাখে।
• পরিষ্কার বোতাম লেবেল লিখুন। কপি কোড এবং কপি পাঠকদের বলুন ঠিক কি ঘটেছে।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

সোর্স কোড উইজেট একটি কাঁচা স্নিপেটকে একটি পরিষ্কার, হাইলাইট করা ব্লকে পরিণত করে যা পাঠকরা এক ক্লিকে অনুলিপি করতে পারে। আপনার কোড পেস্ট করুন, ভাষা এবং থিম সেট করুন, লাইন নম্বর এবং কপি বোতাম চালু করুন, তারপর আপনার পৃষ্ঠার সাথে মেলে কন্টেইনারটি স্টাইল করুন। কাঠামোগত বিষয়বস্তু উপস্থাপনের অন্য উপায়ের জন্য, দেখুন ডায়নামিক টেবিল উইজেট, সম্পূর্ণ ব্রাউজ করুন মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং চেক করুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।