Is the Source Code widget free?

No. Source Code is part of Master Addons Pro. Elementor Pro users also have Elementor’s Code Highlight widget.

Can I hide the line numbers next to the code?

Yes. Set Enable Line Number to No for a cleaner block.

Where can I position the copy button?

Set Button Position to the top right or bottom right corner, and Button Visibility to Always or On Hover.

Which languages does the Source Code widget support?

75, picked in the Code dropdown. They include HTML, CSS, JavaScript, PHP, Python, Bash, SQL, JSON, YAML, Markdown, TypeScript, React JSX and TSX, Go, Java, Kotlin, Swift, Ruby, C, C++ and C#. Visitors can read and copy the code but cannot edit it.

Can I use my own color scheme instead of the pre-set themes?

Partly. Set Theme to Custom to choose the background, text color, line number color and typography in the Container style section. Keyword colors only come with the eight preset themes, so a Custom block shows code in one color unless you add your own CSS.

Can I highlight specific lines?

No. The widget has no line highlight option. Elementor Pro’s Code Highlight widget can highlight chosen lines if you need that.

সিনট্যাক্স হাইলাইটিং (প্রো) সহ এলিমেন্টর কোড ব্লক উইজেট

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

এলিমেন্টরে কিভাবে কোড ব্লক যোগ করবেন

সোর্স কোডের এলিমেন্টর এবং একজন সক্রিয় প্রয়োজন মাস্টার অ্যাডনস প্রো লাইসেন্স।

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

প্রতিটি সেটিং এর মধ্যে আচ্ছাদিত করা হয় সোর্স কোড উইজেট সেটিংস গাইড।

75টি ভাষা এবং 8টি Prism।js থিম

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

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

এলিমেন্টর প্রো কোড হাইলাইট বনাম মাস্টার অ্যাডঅন সোর্স কোড

Elementor Pro এর নিজস্ব কোড হাইলাইট উইজেট আছে। উভয়ই Prism।js ব্যবহার করে, তাই পছন্দটি আপনার প্রয়োজনীয় অতিরিক্তগুলিতে নেমে আসে।

বৈশিষ্ট্য	এলিমেন্টর প্রো কোড হাইলাইট	মাস্টার অ্যাডঅন সোর্স কোড
দাম	এলিমেন্টর প্রো প্রয়োজন	মাস্টার অ্যাডনস প্রো প্রয়োজন
ভাষা	37	75
থিম	6 (সলিড, ডার্ক, ওকাইডিয়া, সোলারাইজডলাইট, আগামীকাল, গোধূলি)	8 প্লাস কাস্টম রং
কপি বোতাম	ক্লিপবোর্ড সুইচে কপি করুন	কাস্টম টেক্সট, কপি করা টেক্সট, অলওয়েজ বা অন হোভার, দুই পজিশন, ফুল স্টাইলিং
লাইন নম্বর	হ্যাঁ	হ্যাঁ
হাইলাইট লাইন	হ্যাঁ	না
শব্দ মোড়ানো	হ্যাঁ	না
উচ্চতা এবং ফন্টের আকার	হ্যাঁ	কাস্টম থিম সহ উচ্চতা, প্লাস টাইপোগ্রাফি

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

কপি বোতাম এবং লাইন নম্বর

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

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

ধারক এবং বোতাম স্টাইলিং

দ্য ধারক বিভাগটি একটি উচ্চতা (1200px পর্যন্ত) এত দীর্ঘ স্নিপেট স্ক্রোল, প্লাস প্যাডিং, মার্জিন, সীমানা এবং ব্যাসার্ধ সেট করে। কাস্টম থিমের সাথে এটি একটি পটভূমি, টাইপোগ্রাফি, পাঠ্যের রঙ এবং লাইন নম্বরের রঙ যোগ করে। দ্য বোতাম বিভাগটি টাইপোগ্রাফি, পাঠ্যের রঙ, পটভূমির রঙ, প্যাডিং, সীমানা এবং ব্যাসার্ধ সহ অনুলিপি বোতামটি স্টাইল করে।

দীর্ঘ ফাইলগুলিতে উচ্চতা ক্যাপ করুন যাতে পৃষ্ঠাটি পাঠযোগ্য থাকে।
আপনার ব্র্যান্ডের রঙের সাথে বোতামের ব্যাকগ্রাউন্ড মেলে।
প্যাডিং যোগ করুন যাতে কোডটি ব্লকের প্রান্ত স্পর্শ না করে।

সোর্স কোডের জন্য প্রায়শই জিজ্ঞাসিত প্রশ্ন

সোর্স কোড সম্পর্কে ব্যবহারকারীদের সবচেয়ে বেশি জিজ্ঞাসিত প্রশ্নগুলি জানুন এবং এক জায়গায় উত্তরগুলি খুঁজুন৷।

সোর্স কোড উইজেট কি বিনামূল্যে?

নং সোর্স কোড এর অংশ মাস্টার অ্যাডনস প্রো। Elementor Pro ব্যবহারকারীদের কাছে Elementor এর কোড হাইলাইট উইজেটও রয়েছে।

আমি কি কোডের পাশের লাইন নম্বরগুলি লুকাতে পারি?

হ্যাঁ. সেট লাইন নম্বর সক্রিয় করুন একটি ক্লিনার ব্লকের জন্য না।

আমি কপি বোতামটি কোথায় রাখতে পারি?

সেট বোতাম অবস্থান উপরের ডান বা নীচে ডান কোণে, এবং বোতাম দৃশ্যমানতা টু অলওয়েজ বা অন হোভার।

সোর্স কোড উইজেট কোন ভাষা সমর্থন করে?

75, কোড ড্রপডাউনে বাছাই করা হয়েছে। এর মধ্যে রয়েছে HTML, CSS, JavaScript, PHP, Python, Bash, SQL, JSON, YAML, Markdown, TypeScript, React JSX এবং TSX, Go, Java, Kotlin, Swift, Ruby, C, C++ এবং C#। দর্শকরা কোডটি পড়তে এবং অনুলিপি করতে পারে কিন্তু এটি সম্পাদনা করতে পারে না।

আমি কি প্রি-সেট থিমের পরিবর্তে আমার নিজস্ব রঙের স্কিম ব্যবহার করতে পারি?

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

আমি কি নির্দিষ্ট লাইন হাইলাইট করতে পারি?

না। উইজেটে কোন লাইন হাইলাইট বিকল্প নেই। এলিমেন্টর প্রো এর কোড হাইলাইট উইজেট আপনার প্রয়োজন হলে নির্বাচিত লাইন হাইলাইট করতে পারে।