افزونه کدر | هایلایتر سینتکس برای المنتور | Coder – Syntax Highlighter for Elementor

افزونه Coder – Syntax Highlighter for Elementor کدر پلاگین هایلایتر سینتکس جهت افزودن ابزارک نمایش کد زبان های برنامه نویسی مانند php و… برای المنتور است. این افزونه یک پلاگین ساده و منعطف برای برجسته کردن سینتکس وردپرس برای المنتور است که بر اساس کتابخانه سبک وزن و قوی prism.js است. حتی تنظیمات اولیه ویجت کدر یک ظاهر کد زیبا، جداب و خوانا را ارائه می دهد. این برنامه از بیش از 200 زبان برنامه نویسی، اسکریپت و نشانه گذاری ریاضی با بیش از 30 تم سبک مختلف پشتیبانی می کند. علاوه بر این، می‌توانید به راحتی از منابع خارجی مانند BitBucket یا GitHub با استفاده از URL به صفحه کد اضافه کنید.

افزونه Coder – Syntax Highlighter for Elementor دارای ویژگی سفارشی سازی استایل بلوک کد، علامت زبان و دکمه کپی است و می توانید فونت ها، رنگ ها، حاشیه ها، پس زمینه ها و غیره را سفارشی سازی کنید. در این افزونه قابلیت فعال/غیرفعال کردن شماره خط، هایلایت خط، نمایش نامرئی ها و… وجود دارد که با توجه به نیاز خود هریک را می توانید فعال و یا غیرفعال کنید. این افزونه دارای بیش از 30 قالب از جمله روز/شب، سایه های بنفش، متریال تاریک، دراکولا و غیره برای بلوک کد است تا قالب جذاب برای بلوک کد انتخاب و اعمال کنید و می توانید کد منبع ( آدرس، ویرایشگر ) را انتخاب کنید.

ویژگی های افزونه کدر | هایلایتر سینتکس برای المنتور | Coder – Syntax Highlighter for Elementor

• ویجت مطمئناً یک ابزار مناسب برای کسانی است که کد می نویسند و خوانندگان، زیرا می توان آن را به راحتی در صفحه محتوا شناسایی کرد، در نتیجه باعث صرفه جویی در زمان و افزایش خوانایی می شود. بسیاری از ویژگی‌ها به بهبود و تطبیق بلوک کد با توجه به وظایف خاص کمک می‌کنند: شماره خطوط، برجسته کردن خطوط خاص، نمایش پیش‌نمایش درون خطی رنگ‌ها در شیت‌های سبک، افزودن دکمه کپی کد و موارد دیگر.
  ویجت Coder می تواند برای انواع مختلف سایت های وردپرس مرتبط با توسعه، دوره ها یا آموزش، اسناد، مدیریت، یا حتی تحقیقات ریاضی یا علمی مفید باشد.

• پس از نصب افزونه Coder – Syntax Highlighter for Elementor، آماده استفاده است و نیازی به هیچ گونه سوت و زنگ ندارد. تنظیمات ساده و انعطاف پذیر به شما امکان می دهد ویژگی های لازم را فعال/غیرفعال کنید و تم ها، رنگ ها، فونت ها، پس زمینه را تغییر دهید و گزینه های دیگر را مدیریت کنید.
• یکی از ویژگی های جالب این است که تشخیص دهد آیا کاربر از سیستم درخواست کرده است که از تم رنگی روشن یا تیره استفاده کند و بلوک کد را با تنظیمات تنظیم کند. همه اینها را می توان مستقیماً از رابط المنتور پیکربندی کرد و نیازی به دانش کد اضافی ندارد.

• افزونه Coder – Syntax Highlighter for Elementor به طور استثنایی با تمام مرورگرهای مدرن سازگار است. مهم نیست که کاربران کدام مرورگر سایت شما را مشاهده می کنند: Chrome، Firefox، Opera، Safari یا Edge. همه چیز در همه دستگاه ها و در همه مرورگرها عالی به نظر می رسد.
• در حال حاضر بیش از 200 زبان پشتیبانی می شود
• بیش از 30 تم سبک جالب
• تکه‌های BitBucket / مخازن BitBucket
• GitHub Gists / مخازن GitHub
• زبان نشانه گذاری ریاضی گنجانده شده است

• ویژگی شماره گذاری خطوط
• تابع خطوط خاص را انتخاب کنید
• تم های برجسته نحو در دسترس گنجانده شده است
• ویژگی Treeview
• در دکمه کلیپ بورد کپی کنید
• تغییر تم پویا برای روز/شب
• فونت ها، رنگ ها، حاشیه ها، پس زمینه ها و غیره قابل تنظیم
• تنظیمات پاسخگویی
• کاملاً SEO Friendly
• شامل فایل قابلمه (pot file) برای ترجمه سریع به هر زبانی
• ایده آل برای جهت RTL
• نصب سریع و روان
• سبک و سریع
• همه مرورگرهای اصلی کروم، فایرفاکس، سافاری، اپرا و اج را پشتیبانی می کردند
• آسان برای استفاده و سفارشی کردن با رابط کاربری مدرن

دیگر ویژگی های افزونه کدر | هایلایتر سینتکس برای المنتور | Coder – Syntax Highlighter for Elementor

• یک بلوک کد با برجسته کردن نحو اضافه کنید
  Coder (که در بسته Selection “Code” نامیده می شود) یک پلاگین ساده و قابل انعطاف وردپرس است که بر اساس یک کتابخانه سبک وزن و مستحکم prism.js برای المنتور طراحی شده است. حتی تنظیمات اولیه ویجت Coder یک ظاهر کد زیبا و خوانا را ارائه می دهد. این برنامه از بیش از 200 زبان برنامه نویسی، اسکریپت و نشانه گذاری ریاضی برای برجسته کردن نحو با بیش از 30 تم سبک مختلف پشتیبانی می کند.
• صفحه ای را با استفاده از المنتور باز یا ایجاد کنید و ویجت را با استفاده از ویرایشگر المنتور به صفحه ای بکشید تا سفارشی سازی شروع شود. در قسمت سمت چپ ویرایشگرها، می توانید ویجت را به سبک سایت خود سفارشی کنید. هر یک از تب ها گروه خاصی از تنظیمات را ارائه می دهند:
  محتوا
  سبک
  پیشرفته

• برگه محتوا
  در برگه Content ویجت برجسته سازی نحو، می توانید کد یا منبع کد را وارد کنید و همچنین تمام ویژگی های موجود را مدیریت کنید.
• تنظیمات کد منبع
  بخش انتخاب زبانی که برای کادر کد استفاده می شود با برجسته سازی نحو، درج کد یا منبع آن.
• منبع
  دو نوع کد منبع موجود است:
• ویرایشگر – یک قسمت متنی برای وارد کردن/چسب کردن کد. این گزینه بهتر است در مواقعی استفاده شود که نیاز به اضافه کردن بخش بزرگی از کد یا قطعه آماده شده دارید، زیرا هر گونه ویرایش در متن منطقه خیلی راحت نیست.
• URL – فیلدی برای وارد کردن پیوند به فایل با کد. می‌توانید یک URL داخلی به قطعه‌های کد، URL به فایل‌های BitBucket، GitHub، localhost یا سایر سایت‌ها اضافه کنید. تنها شرط استفاده از URL این است که CORS باید در سایتی که می‌خواهید کد را از آن دریافت کنید فعال باشد زیرا فایل‌ها با XMLHttpRequest واکشی می‌شوند. علاوه بر این، اگر می خواهید از مخزن استفاده کنید، باید عمومی باشد تا کد در بلوک Elementor ظاهر شود.

• زبان
  زبانی را که برای کد استفاده می کنید انتخاب کنید تا نحو به درستی برجسته شود. این افزونه از بیش از 200 زبان پشتیبانی می کند، تمام لیست را در اینجا پیدا کنید
• شماره خطوط
  تغییر جهت فعال/غیرفعال کردن نمایش شماره گذاری خطوط.
• برجسته خط
  ضامن برای فعال/غیرفعال کردن برجسته کردن خطوط خاص. می توانید یک خط خاص، محدوده خطوط یا لیست خطوطی که با کاما از هم جدا شده اند را برجسته کنید.
• نمایش نامرئی ها
  تغییر جهت فعال/غیرفعال کردن نمایش کاراکترهای مخفی مانند برگه ها و خطوط شکست.
• اتصال دهنده خودکار
  این گزینه URL ها و ایمیل های موجود در کد را به لینک های قابل کلیک تبدیل می کند. پیوندهای Markdown را در نظرات تجزیه می کند.

• نمایش زبان
  تغییر جهت فعال/غیرفعال کردن نمایش زبان مورد استفاده برای کادر کد با برجسته کردن نحو. این گزینه یک نشان با نام زبان در گوشه کادر اضافه می کند.
• رنگ درون خطی
  تغییر جهت فعال/غیرفعال کردن نمایش پیش‌نمایش رنگ در شیت‌ها. این خوانایی و درک کد را بهبود می بخشد.
• پیش نمایشگران
  ضامن فعال/غیرفعال کردن پیش‌نمایش برای نمایش زوایا، رنگ‌ها، شیب‌ها، کاهش و زمان.
• اسناد وب پلتفرم
  توکن ها را به اسناد WebPlatform.org پیوند می دهد. پیوندها در یک برگه جدید باز می شوند. این افزونه هنوز در نسخه بتا است. به عنوان مثال، با کلیک بر روی یک ویژگی در CSS، به مستنداتی مراجعه می کنید که در آن می توانیم اطلاعات بیشتری در مورد این ویژگی داشته باشیم.

• خط فرمان
  ضامن فعال/غیرفعال کردن نمایش خط فرمان با یک اعلان و به صورت اختیاری، خروجی/پاسخ از دستورات. ممکن است برای سایت‌هایی که اطلاعاتی درباره لینوکس، سیستم عامل مک یا تنظیمات مختلف سیستم دارند مفید باشد.
• در دکمه کلیپ بورد کپی کنید
  کلید فعال/غیرفعال کردن دکمه ای که با کلیک کردن، بلوک کد را در کلیپ بورد کپی می کند.
• دکمه دانلود
  کلید فعال/غیرفعال کردن یک دکمه برای دانلود فایل کد. اگر URL به عنوان کد منبع انتخاب شود، گزینه موجود است.
• بریس ها را مطابقت دهید
  این گزینه زمانی که مکان نما روی یکی از پرانتزها قرار می گیرد، جفت های مهاربند را برجسته می کند. به محض اینکه مکان نما از جفت پرانتز خارج شود، جلوه برجسته ناپدید می شود. علاوه بر این، می‌توانید براکت‌های رنگین کمان را برای برجسته کردن جفت براکت‌ها با رنگ‌های مختلف فعال کنید.
• برجسته تفاوت
  این گزینه کد داخل بلوک‌های متفاوت را برجسته می‌کند.
• تب استایل
  در برگه سبک‌های ویجت Coder، می‌توانید همه چیز مربوط به سبک بصری عناصر را پیکربندی کنید: تم سبک، رنگ‌ها، تایپوگرافی، پس‌زمینه، گرادیان‌ها و موارد دیگر.

بلوک کد

• موضوع – یکی از بیش از 30 تم سبک موجود را برای بلوک کد اعمال کنید.
• حالت تاریک/روشن – تشخیص دهید که آیا کاربر درخواست کرده است که سیستم از تم رنگی روشن یا تیره استفاده کند. اگر این گزینه فعال باشد، می‌توانید «موضوع حالت تاریک» را نیز از لیست انتخاب کنید.
• تایپوگرافی – این گروه از تنظیمات همه چیز را در مورد تایپوگرافی کنترل می کند: اندازه قلم، وزن فونت، ارتفاع خط، دکوراسیون و سایر پارامترها.
• نوع پس زمینه – این تنظیم پس زمینه بخش فعلی را تغییر می دهد. می توانید رنگ، گرادیان یا تصویر پس زمینه را انتخاب کنید.
• حداکثر ارتفاع – ارتفاع بلوک کد را در واحدهای مختلف (px، em، vh) برای دسکتاپ، تبلت یا تلفن مشخص کنید.
• حاشیه – این تنظیم اجازه می دهد تا حاشیه جعبه کد را در واحدهای مختلف (px، em، %) برای دسکتاپ، تبلت ها یا تلفن ها مدیریت کنید.
• Padding – این تنظیم امکان مدیریت padding جعبه کد را در واحدهای مختلف (px، em، %) برای دسک‌تاپ، تبلت‌ها یا تلفن‌ها می‌دهد.
• نوع حاشیه – یکی از انواع حاشیه موجود (یکپارچه، دوتایی، نقطه چین، چین دار، شیار) را برای بلوک فعلی انتخاب کنید و عرض، رنگ و شعاع را بر اساس نیاز خود تنظیم کنید. برای حذف حاشیه، «هیچ» را انتخاب کنید.
• Box Shadow – این تنظیم یک سایه از جعبه ایجاد می کند و می توان آن را با توجه به نیازهای شما با تعیین تغییر رنگ، تاری، افقی و عمودی تنظیم کرد.

علامت زبان

• همیشه قابل مشاهده است – این گزینه به شما امکان می دهد همیشه یا هنگام نگه داشتن یک بلوک کد، نشانی را با نام زبان قابل مشاهده کنید.
• حاشیه – حاشیه علامت زبان را در واحدهای مختلف (px، em، %) برای دسک‌تاپ، تبلت‌ها یا تلفن‌ها مدیریت کنید.
• Padding – padding علامت زبان را در واحدهای مختلف (px، em، %) برای دسکتاپ، تبلت یا تلفن مدیریت کنید.
• رنگ جوهر – رنگ قلم و کدورت متن علامت را با استفاده از انتخابگر رنگ مشخص کنید.
• تایپوگرافی – این گروه از تنظیمات همه چیز را در مورد تایپوگرافی کنترل می کند: اندازه قلم، وزن فونت، ارتفاع خط، دکوراسیون و سایر پارامترها.
• نوع پس زمینه – این تنظیم پس زمینه بخش فعلی را تغییر می دهد. می توانید رنگ، گرادیان یا تصویر پس زمینه را انتخاب کنید.
• نوع حاشیه – یکی از انواع حاشیه موجود (یکپارچه، دوتایی، نقطه چین، چین دار، شیار) را برای بلوک فعلی انتخاب کنید و عرض، رنگ و شعاع را بر اساس نیاز خود تنظیم کنید. برای حذف حاشیه، «هیچ» را انتخاب کنید.
• Box Shadow – این تنظیم یک سایه از جعبه ایجاد می کند و می توان آن را با توجه به نیازهای شما با تعیین تغییر رنگ، تاری، افقی و عمودی تنظیم کرد.

دکمه کپی

• همیشه قابل مشاهده است – این گزینه به شما امکان می دهد دکمه کپی را همیشه یا هنگام نگه داشتن یک بلوک کد قابل مشاهده کنید.
• حاشیه – حاشیه دکمه کپی را در واحدهای مختلف (px، em، %) برای دسکتاپ، تبلت یا تلفن مدیریت کنید.
• Padding – padding دکمه کپی را در واحدهای مختلف (px، em، %) برای دسکتاپ، تبلت یا تلفن مدیریت کنید.
• ارتفاع نماد – ارتفاع دکمه کپی را مشخص کنید.
• رنگ جوهر – رنگ قلم و کدورت را برای دکمه کپی با استفاده از انتخابگر رنگ مشخص کنید.
• تایپوگرافی – این گروه از تنظیمات همه چیز را در مورد تایپوگرافی کنترل می کند: اندازه قلم، وزن فونت، ارتفاع خط، دکوراسیون و سایر پارامترها.
• نوع پس زمینه – این تنظیم پس زمینه بخش فعلی را تغییر می دهد. می توانید رنگ، گرادیان یا تصویر پس زمینه را انتخاب کنید.
• نوع حاشیه – یکی از انواع حاشیه موجود (یکپارچه، دوتایی، نقطه چین، چین دار، شیار) را برای بلوک فعلی انتخاب کنید و عرض، رنگ و شعاع را بر اساس نیاز خود تنظیم کنید. برای حذف حاشیه، «هیچ» را انتخاب کنید.
• Box Shadow – این تنظیم یک سایه از جعبه ایجاد می کند و می توان آن را با توجه به نیازهای شما با تعیین تغییر رنگ، تاری، افقی و عمودی تنظیم کرد.

تب پیشرفته

• تنظیمات در تب پیشرفته ویجت افزونه به شما این امکان را می دهد که به طور انعطاف پذیر هر چیزی را که به طراحی بسته بندی افزونه مربوط می شود پیکربندی کنید. تنظیمات این برگه کاملاً مشابه ویجت های اصلی المنتور است و برای کاربران با تجربه المنتور راحت خواهد بود.

ذخیره تغییرات

• فراموش نکنید که پس از تکمیل تنظیمات ویجت، تغییرات را ذخیره کنید. برای این کار بر روی دکمه Update در پایین صفحه کلیک کنید.