قرار دادن تکه کد در مطالب بدون افزونه و ویرایشگر بلوکی

وندا نوژن

اگر از وب‌سایت وردپرسی استفاده می‌کنید، قطعا سریع‌ترین و بهینه‌ترین روش برای قرار دادن تکه کد یا همان اسنیپت در مطالب، استفاده از افزونه‌هایی مثل Enlighter – Customizable Syntax Highlighter است. اگر از ویرایشگر بلوکی یا همان ویرایشگر گوتبرگِ وردپرس استفاده می‌کنید هم چنین قابلیتی به صورت پیش‌فرض با نام SyntaxHighlighter Code درنظر گرفته شده است.

اما اگر بخواهید بدون نصب افزونه و با استفاده از ویرایشگر کلاسیک (که شخصا هنوز به آن وفادارم!) تکه کدی را در مطالب قرار بدهید، چه؟

برای اینکار شما باید از یک ساختار کلی تبعیت کنید. به این ترتیب که ابتدا کدهای خود را بین تگ‌های <pre> و <code> قرار بدهید و سپس در قسمت «ویرایشگر متنی» در محل مناسب قرار دهید.

<pre><code>
<!-- کدهای شما -->
</code></pre>

اما این روش آنقدرها هم که در نگاه اول به نظر می‌رسد ساده نیست و کمی چالشی می‌شود. چرا؟ اگر شما طبق همین ساختار کدهای خود را در ویرایشگر متنی قرار دهید و بعد برای مشاهده‌ی نتیجه به قسمت ویرایشگر دیداری یا فرانت‌اند سایت بروید، اغلب با یکی از چند مشکل زیر مواجه می‌شوید:

الف. عدم نمایش کد

برای مثال در زیر کد یک فونت آیکون استفاده شده که نمایش داده نمی‌شود.

ب. اجرای کد

در مواردی کدها به جای آنکه به صورت کد نمایش داده شوند، اجرا می‌شوند. برای مثال در اینجا کد یک تصویر قرار داده شده، اما خود تصویر نمایش داده می‌شود.

ج. نمایش ناقص کدها

در مواردی برخی پارامترهای کد شما حذف و کد به شکل تکه پاره و ناقص نمایش داده می‌شود.

پس مشکل کار در کجاست؟

خود ساختار کلی قرار دادن تکه کد که در بالا اشاره شد درست است. منتها مشکل از آنجاست که در این کدهای شما، کاراکترهایی مثل < یا > یا “ وجود دارند که هنوز به عنوان المان‌های HTML تفسیر و شناخته می‌شوند. بنابراین خود این کاراکترها هم باید به چیزی از جنس HTML تبدیل شوند. یعنی مثلا کاراکتر < باید به &lt; تبدیل شود.

برای اینکار لازم نیست خودتان بنشینید و تک تک تبدیل‌ها را انجام دهید. بلکه خیلی ساده کافی است با استفاده از ابزارهای آنلاین (مثل این و این) عمل تبدیل را انجام بدهید.

حالا اگر کد تبدیل‌شده را بین <pre> و <code> قرار دهید و در ویرایشگر متنی مطلب قرار دهید، مشکل حل می‌شود.

منتها کدها در فرانت‌اند سایت به صورت راستچین درمی‌آیند. که برای حل این مساله هم کافیست خیلی ساده به آن استایل چپ‌چین بدهید:

<pre style=&quotdirection: ltr;&quot><code>

بنابراین ساختار صحیح کلی برای درج تکه کدها چنین چیزی می‌شود:

<pre style=&quotdirection: ltr;&quot><code>
<!--کدهای تبدیل‌شده شما -->
</code></pre>