نحوه اضافه کردن قطعه کد با استفاده از گوتنبرگ در وردپرس

تقریباً همه وبلاگ نویسان، سازندگان محتویات یا توسعه دهندگان فناوری گاهی اوقات نیاز دارند که کدهای برجسته شده را در وبلاگ خود نمایش دهند. این خود می تواند سردرد باشد. با این حال، برجسته کردن یک یا چند خط در این قطعه نیز ممکن است ضروری باشد، و این عملکرد متأسفانه بخشی از اکثر ادغام‌های کد نیست. خوشبختانه افزونه SyntaxHighlighter Evolved وجود دارد. ما به شما نشان خواهیم داد که چگونه از آن استفاده کنید تا کد را تا حد امکان تمیز و خوانا نگه دارید.

SyntaxHighlighter تکامل یافته است

نصب و فعال سازی افزونه ساده است. می توانید آن را در مخزن پلاگین های WP.org پیدا کنید اما اطمینان حاصل کنید که این کار به خوبی انجام شده است الکس میلز (Viper007 باند)، زیرا در واقع ، نتایج زیادی وجود دارد. ما می دانیم که قابل اعتماد و به روز است. علاوه بر این ، این مورد دارای یک بلوک ویژه برای ویرایشگر گوتنبرگ است. نیازی به ذکر پارامترهایی نیست که به شما امکان شخصی سازی تجربه خود را می دهد ، که باعث می شود انتخاب ما برای این نوع کارها باشد.

در منو پارامترهای از داشبورد وردپرس خود ، مورد جدیدی پیدا می کنید به نام نحو برجسته . پیش بروید و بر روی آن کلیک کنید. در آنجا می توانید هر چیز کوچکی را که برای تعبیه قطعه ها در سایت وردپرس خود نیاز دارید ، تنظیم کنید.

تنظیمات SyntaxHighlighter

صفحه تنظیمات افزونه نسبتا ساده است. یکی از عناصر خاصی که ما در مورد این افزونه دوست داریم این است که تعداد زیادی سفارشی سازی در مورد نحوه نمایش کد در سایت خود دریافت می کنید. می توانید کلاس های CSS را به جاسازی اضافه کنید، padding شماره خط را تنظیم کنید، انتخاب کنید تم رنگ، از برگه‌های هوشمند و شکسته‌های خط استفاده کنید و تصمیم بگیرید که چگونه زبان برنامه‌نویسی در سرتاسر سایت جداگانه بارگذاری شود.

ما می خواهیم سه پارامتر خاص را تعریف کنیم که بیشتر مردم باید بدانند.

نسخه پلاگین ، شماره خط و اندازه برگه

اولین مورد این است که کدام نسخه از افزونه را بارگیری می کنید. اگرچه افزونه در مخزن به روز است ، می توانید بین نسخه های 2.x و 3.x افزونه را انتخاب کنید ، بسته به نحوه نمایش کد شما بستگی دارد. هر دو از امنیت بالایی برخوردار هستند ، اما هر یک از آنها ویژگیهای خاصی را ارائه می دهند که دیگری از آنها برخوردار نیست (در زمان نوشتن مقاله).

اگر کاربران مهمترین کد شما را کپی کنند ، نسخه 3.x این کار را انجام می دهد. با این حال ، اگر مورد شما بیشتر از ابزار واقعی برای نمایش مفید است ، ممکن است خط جدید در نسخه 2.x برای شما بهتر باشد ، زیرا شما را از استفاده از میله های پیمایش بی نیاز می کند. برای قطعه های کد بزرگ.

سپس باید اعداد خط را نشان دهید یا نه. برای تعداد زیادی کد و آموزش ، شماره خط بسیار ارزشمند است. با این حال ، هنگامی که قطعه های کوتاه دارید ، لازم نیست که به طور دائم آنها را به عنوان خط 1 و 2 برچسب بزنید. حذف آنها می تواند ظاهر کد را به طور قابل توجهی بهبود بخشد.

و سپس وجود دارد اندازه زبانه هنوز جنجالی است این گزینه به طور پیش فرض به 4 رسیده است ، اما می توانید آن را به هر شماره دلخواه تغییر دهید. از جمله مقدار صحیح 2. (بله ، متوجه می شویم که هیچ مقدار صحیحی وجود ندارد. ما فقط 2 فاصله برای برگه ها دوست داریم.)

کد و کد کوتاه شما

اگر به پایین صفحه بروید پارامترهای ، یک پیش نمایش کد بزرگ و همچنین تعداد زیادی پارامتر کد کوتاه مشاهده خواهید کرد. وقت شما برای گذر از طریق آنها صرف می شود ، فقط برای اینکه ببینید تمام افزونه ها برای به نمایش گذاشتن قطعه های شما چه کاری می توانند انجام دهند. همچنین ، هر تغییری که در صفحه نمایش کد در تنظیمات بالا ایجاد کرده اید ، در اینجا منعکس می شود. پس مطمئن شوید که پس از تغییر هر یک از گزینه ها ، گزینه save را بزنید.

در حالی که برخی از مردم بزرگترین طرفدار کد کوتاه نیستند زیرا می توانند شما را به برخی از پلاگین ها متصل کنند ، ما فکر می کنیم این موارد ارزش استفاده را دارند زیرا هوشمند هستند و به راحتی به خاطر سپرده می شوند. اگر هیچ چیز دیگری نیست ، باید دو مورد را بخاطر بسپارید و سپس افزونه در بهترین حالت برای شما کار خواهد کرد.

ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>

یا برخی از تغییرات. اگر می توانید به یاد داشته باشید ، در مورد کارهای مختلفی که می توانید با این افزونه انجام دهید ، اطمینان دارید. در حالی که می توانید از شناسه های طولانی استفاده کنید ، افزونه SyntaxHighlighter به اندازه کافی خوب ساخته شده است تا کار شما ساده شود.

از کدهای کوتاه استفاده کنید

هر جا که بتوانید کد کوتاهی را ارائه دهید، می توانید از آنها استفاده کنید. که در DIVI یا ویرایشگر کلاسیک، می توانید از ماژول Text یا ویرایشگر TinyMCE استفاده کنید و فقط کد را بین کدهای کوتاه قرار دهید. با توجه به نحوه عملکرد تب Visual، پیشنهاد می کنیم از تب استفاده کنید متن برای نگه داشتن این قالب بندی کاراکترهای خاص.

اگر شما یک کاربر Gutenberg / Block Editor هستید ، همه چیز به همین سادگی است. برای اینکار می توانید از بلوک متن استفاده کنید. حتی ساده تر ، بلوک HTML سفارشی. مانند بالا ، کد را در برچسب های کد کوتاه جایگذاری کنید.

بهتر از این ، بلوک SyntaxHighlighter Evolution خود است. نصب پلاگین شامل بلوک Gutenberg خود است. بنابراین اگر کد کوتاه نیستید و نمی خواهید با این تنظیمات سر و صدا کنید ، مجبور نیستید. فقط بلوک زیر را پیدا کنید قالب بندی و آن را در پیام یا صفحه خود وارد کنید.

مهم نیست که چگونه کد را وارد کنید ، همان رندر را در قسمت جلوی سایت وردپرس خود مشاهده خواهید کرد.

خلاصه

به دلایل زیادی ممکن است لازم باشد قطعه هایی را به مخاطبان خود ارائه دهید. شاید شما برای مشکلات رایج که مخاطب می تواند استفاده کند و هر طور که دوست دارد از آن استفاده کند ، آموزش می نویسید یا راه حل ارسال می کنید؟ اما گاهی اوقات یکپارچه سازی GitHub فقط تجربه مورد نظر شما را برای کاربران فراهم نمی کند. این زمانی است که شما به پلاگین مانند SyntaxHighlighter Evolution نیاز دارید. 

فقط با چند کلیک ، با کمی سفارشی سازی و یک بلوک یا کد کوتاه از گوتنبرگ ، مخاطبان شما بدون مشکل کاوش کد شما را بررسی می کنند.