একটি সাধারণ টেক্সট উইজেটে কোড পেস্ট করুন এবং এটি একটি অপঠনযোগ্য ব্লক রেখে বিন্যাসকে স্ট্রিপ করে। দ্য সোর্স কোড উইজেট, একটি প্রো উইজেট ইন এলিমেন্টরের জন্য মাস্টার অ্যাডঅন, এটি ঠিক করে: এটি সঠিক সিনট্যাক্স হাইলাইটিং, লাইন নম্বর, একটি ভাষা থিম এবং একটি অনুলিপি বোতাম সহ আপনার কোড দেখায়, যাতে পাঠকরা এক ক্লিকে একটি স্নিপেট ধরতে পারে৷।
এটি টিউটোরিয়াল, ডকুমেন্টেশন এবং ডেভেলপার ব্লগের জন্য তৈরি করা হয়েছে, যেখানে আপনাকে পিএইচপি, জাভাস্ক্রিপ্ট, সিএসএস, এইচটিএমএল বা অন্য কোনো ভাষা পরিষ্কারভাবে দেখাতে হবে। আপনি কোড পেস্ট করুন, একটি ভাষা এবং থিম চয়ন করুন এবং কপি বোতাম সেট করুন, সবই এলিমেন্টর প্যানেল থেকে। নীচে প্রতিটি সেটিং মাধ্যমে একটি রান আছে।
সোর্স কোড উইজেট কি করে #
উইজেটটি কোডের একটি ব্লক নেয় এবং আপনার চয়ন করা ভাষার উপর ভিত্তি করে রঙ-কোডেড সিনট্যাক্স হাইলাইটিং সহ এটি রেন্ডার করে। এটি লাইনগুলিকে নম্বর দিতে পারে, বেশ কয়েকটি সম্পাদক থিমের মধ্যে একটি প্রয়োগ করতে পারে এবং একটি কপি-টু-ক্লিপবোর্ড বোতাম যোগ করতে পারে যা নিশ্চিত করে যে কোডটি কখন অনুলিপি করা হয়েছে।
এটিতে তিনটি ট্যাব রয়েছে: কোড, ভাষা এবং অনুলিপি বোতামের জন্য সামগ্রী, ধারক এবং বোতামের চেহারার জন্য শৈলী এবং সাধারণ এলিমেন্টর বিকল্পগুলির জন্য উন্নত৷।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- মাস্টার অ্যাডনস প্রো একটি সক্রিয় লাইসেন্স সহ ইনস্টল করা হয়েছে, যেহেতু সোর্স কোড একটি প্রো উইজেট। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- আপনি যে কোড স্নিপেটটি প্রদর্শন করতে চান।
সোর্স কোড উইজেট কিভাবে যোগ করবেন #
Elementor এডিটরে, খুলুন উপাদান প্যানেল এবং অনুসন্ধান করুন সোর্স কোড, অথবা মাস্টার অ্যাডঅন বিভাগে স্ক্রোল করুন। এটি আপনার পৃষ্ঠায় টেনে আনুন। এটি একটি নমুনা স্নিপেট দিয়ে লোড হয় যাতে আপনি এখনই হাইলাইটিং দেখতে পারেন।
আপনার কোড যোগ করুন এবং একটি ভাষা চয়ন করুন #
খোলা বিষয়বস্তু ট্যাব। দ্য সোর্স কোড বিভাগে সবকিছু ধারণ করে। আপনার স্নিপেট পেস্ট করুন সোর্স কোড বক্স, তারপর এটির উপরে ভাষা এবং থিম সেট করুন।
- কোড: হাইলাইট করার ভাষা, 75টির মধ্যে একটি, যেমন PHP, JavaScript, CSS, বা HTML। এটি কীভাবে রঙগুলি প্রয়োগ করা হয় তা সেট করে।
- থিম: ব্লকের রঙের স্কিম (নীচে আচ্ছাদিত)।
- সোর্স কোড: স্নিপেট নিজেই, AI বিকল্পের সাথে লিখুন যদি আপনার একটি দ্রুত উদাহরণের প্রয়োজন হয়।
একটি থিম চয়ন করুন #
দ্য থিম ড্রপডাউন কোড ব্লকের রঙের স্কিম সেট করে। এতে ডিফল্ট, ডার্ক, ফাঙ্কি, ওকাইডিয়া, টোয়াইলাইট, কোয়, সোলারাইজড লাইট, টুমরো এবং একটি কাস্টম বিকল্প রয়েছে, যাতে আপনি ব্লকটিকে একটি হালকা বা অন্ধকার পৃষ্ঠার সাথে মেলাতে পারেন।
ভাষা এবং থিম একসাথে পরিবর্তন করা প্রতিটি স্নিপেটকে সঠিক চেহারা দেয়। এখানে ডার্ক থিমের একটি জাভাস্ক্রিপ্ট স্নিপেট রয়েছে।
কপি বোতাম সেট আপ করুন #
কপি বোতামটি টিউটোরিয়ালের জন্য উইজেটকে উপযোগী করে তোলে। কোড বক্সের নীচে এটির জন্য নিয়ন্ত্রণ রয়েছে।
- কপি বোতাম সক্ষম করুন: কপি-টু-ক্লিপবোর্ড বোতামটি দেখান বা লুকান।
- লাইন নম্বর সক্রিয় করুন: বাম দিকের লাইন নম্বরগুলি চালু বা বন্ধ করুন।
- বোতাম দৃশ্যমানতা: বোতামটি সর্বদা বা শুধুমাত্র হোভারে দেখান।
- বোতামের অবস্থান: উপরের ডানদিকের মতো এটি একটি কোণে রাখুন।
- কপি বোতাম টেক্সট এবং পরে কপি বোতাম টেক্সট: একটি অনুলিপির আগে এবং পরে লেবেল, যেমন কপি কোড এবং কপি করা।
যখন একজন দর্শক বোতামে ক্লিক করেন, তখন অনুলিপিটি কাজ করেছে তা নিশ্চিত করতে লেবেলটি আপনার অনুলিপি করার পরে পাঠ্যে স্যুইচ করে।
কোড ব্লক শৈলী #
দ্য শৈলী ট্যাব বিভক্ত করা হয় ধারক এবং বোতাম, প্লাস নিদর্শন যখন বিনামূল্যে নিদর্শন এক্সটেনশন চালু করা হয়। দ্য ধারক বিভাগ কোড ব্লকের ফ্রেম নিয়ন্ত্রণ করে।
- উচ্চতা: ব্লকের উচ্চতা ক্যাপ করুন এবং দীর্ঘ কোড স্ক্রোল করতে দিন।
- প্যাডিং এবং মার্জিন: ব্লকের ভিতরে এবং চারপাশে ব্যবধান।
- বর্ডার টাইপ এবং বর্ডার ব্যাসার্ধ: রূপরেখা এবং বৃত্তাকার কোণ।
- শুধুমাত্র কাস্টম থিম: পটভূমি, টাইপোগ্রাফি, পাঠ্য রঙ এবং লাইন নম্বর রঙ। কাস্টম কীওয়ার্ড হাইলাইট না করে কোডটিকে এক রঙে দেখায়।
দ্য বোতাম বিভাগটি অনুলিপি বোতামটি স্টাইল করে: এর টাইপোগ্রাফি, পাঠ্যের রঙ, পটভূমির রঙ, প্যাডিং, সীমানা এবং ব্যাসার্ধ। কোন পৃথক হোভার রং আছে।
পৃষ্ঠায় ফলাফল #
প্রকাশ বা পূর্বরূপ এবং কোড রেন্ডার হাইলাইট, লাইন নম্বর এবং একটি কার্যকরী অনুলিপি বোতাম সহ। নীচে ডার্ক থিমের একটি CSS স্নিপেট রয়েছে যার বোতামটি তার অনুলিপি করা অবস্থা দেখাচ্ছে৷।
সাধারণ ব্যবহারের ক্ষেত্রে #
- টিউটোরিয়াল এবং কিভাবে পোস্ট করতে হয় শেয়ারিং কোড পাঠকরা অনুলিপি করতে পারেন।
- প্লাগইন এবং থিম ডকুমেন্টেশন কনফিগার বা হুক উদাহরণ সহ।
- বিকাশকারী ব্লগ পিএইচপি, জাভাস্ক্রিপ্ট বা সিএসএস-এ স্নিপেট দেখানো হচ্ছে।
- জ্ঞানের ভিত্তি কপি-পেস্ট কমান্ড সহ।
- ল্যান্ডিং পেজ একটি API কল বা এম্বেড কোড প্রদর্শন করা হচ্ছে।
সোর্স কোড উইজেটের সাথে কাজ করার জন্য টিপস #
- কোডের সাথে ভাষা মেলে। সঠিক কোড সেটিং হল যা হাইলাইটিংকে সঠিক করে তোলে।
- পৃষ্ঠার সাথে মানানসই একটি থিম চয়ন করুন। অন্ধকার বিভাগে একটি অন্ধকার থিম এবং সাদা পৃষ্ঠাগুলিতে একটি হালকা থিম ব্যবহার করুন৷।
- কপি বোতামটি দৃশ্যমান রাখুন। টিউটোরিয়ালের জন্য বোতামের দৃশ্যমানতা সর্বদা সেট করুন যাতে পাঠকরা এটি দেখতে পান।
- লম্বা স্নিপেটগুলির জন্য উচ্চতা ক্যাপ করুন। স্ক্রোল সহ একটি নির্দিষ্ট উচ্চতা পৃষ্ঠাটি দখল করা থেকে একটি দীর্ঘ ব্লক রাখে।
- পরিষ্কার বোতাম লেবেল লিখুন। কপি কোড এবং কপি পাঠকদের বলুন ঠিক কি ঘটেছে।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডঅনগুলিতে সোর্স কোড উইজেট কী?
এটি এলিমেন্টরের জন্য একটি মাস্টার অ্যাডনস প্রো উইজেট যা সিনট্যাক্স হাইলাইটিং, লাইন নম্বর, একটি ভাষা থিম এবং একটি কপি-টু-ক্লিপবোর্ড বোতাম সহ কোড প্রদর্শন করে। আপনি একটি স্নিপেট পেস্ট করুন, ভাষা এবং থিম চয়ন করুন এবং কপি বোতাম সেট করুন, সমস্ত এলিমেন্টর প্যানেল থেকে, কোন প্লাগইন বা শর্টকোডের প্রয়োজন নেই৷।
এটি কোন প্রোগ্রামিং ভাষা হাইলাইট করে?
আপনি পিএইচপি, জাভাস্ক্রিপ্ট, সিএসএস, এইচটিএমএল, পাইথন, এসকিউএল এবং YAML সহ কোড ড্রপডাউনে 75টি ভাষার মধ্যে একটি বেছে নিন। সিনট্যাক্স রঙগুলি কীভাবে প্রয়োগ করা হয় তা পছন্দটি সেট করে, তাই স্নিপেটটি কোড এডিটরে যেভাবে পড়বে তা পড়ে।
পাঠকরা কি এক ক্লিকে কোডটি কপি করতে পারবেন?
হ্যাঁ। কপি বোতাম সক্ষম করুন চালু করুন এবং ব্লকে একটি কপি-টু-ক্লিপবোর্ড বোতাম প্রদর্শিত হবে। আপনি এটির অবস্থান সেট করেন, যখন এটি দেখায়, এবং একটি অনুলিপির আগে এবং পরে পাঠ্য, যেমন কপি কোড এবং অনুলিপি, যা নিশ্চিত করে যে ক্লিকটি কাজ করেছে।
আমি কি কোড ব্লকে লাইন নম্বর দেখাতে পারি?
হ্যাঁ। কন্টেন্ট ট্যাবে সক্রিয় লাইন নম্বর টগল ব্লকের বাম দিকে নম্বর যোগ করে। তারা একটি টিউটোরিয়ালে একটি নির্দিষ্ট লাইন উল্লেখ করা সহজ করে তোলে এবং আপনি একটি পরিষ্কার চেহারার জন্য সেগুলি বন্ধ করতে পারেন।
আমি কি কোডের রঙের থিম পরিবর্তন করতে পারি?
হ্যাঁ। থিম ড্রপডাউন ডিফল্ট, ডার্ক, ফাঙ্কি, ওকাইডিয়া, টোয়াইলাইট, কয়, সোলারাইজড লাইট, টুমরো এবং কাস্টম অফার করে। একটি হালকা বা অন্ধকার পৃষ্ঠার সাথে মেলে একটি বেছে নিন, অথবা স্টাইল ট্যাবে আপনার নিজস্ব পটভূমি এবং পাঠ্যের রঙ সেট করতে কাস্টম ব্যবহার করুন। কাস্টম কীওয়ার্ড হাইলাইটিং ছাড়াই এক রঙে কোড দেখায়।
মোড়ানো #
সোর্স কোড উইজেট একটি কাঁচা স্নিপেটকে একটি পরিষ্কার, হাইলাইট করা ব্লকে পরিণত করে যা পাঠকরা এক ক্লিকে অনুলিপি করতে পারে। আপনার কোড পেস্ট করুন, ভাষা এবং থিম সেট করুন, লাইন নম্বর এবং কপি বোতাম চালু করুন, তারপর আপনার পৃষ্ঠার সাথে মেলে কন্টেইনারটি স্টাইল করুন। Elementor Pro এর কোড হাইলাইট উইজেটের সাথে তুলনা করার জন্য, দেখুন এলিমেন্টর কোড ব্লক উইজেট পৃষ্ঠা। কাঠামোগত বিষয়বস্তু উপস্থাপনের অন্য উপায়ের জন্য, দেখুন ডায়নামিক টেবিল উইজেট, সম্পূর্ণ ব্রাউজ করুন মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং চেক করুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
