افزودن برجستهسازی نحو به قطعه کد میتواند خوانایی را بهبود بخشد و پستهای وبلاگ را جذابتر کند، بهویژه در موضوعات فنی. در این راهنما، شما را از طریق مراحل پیادهسازی یک شمعدان نحوی کد خاص در وبلاگ بلاگر خود راهنمایی میکنیم.
چرا از برجسته کردن نحو کد استفاده کنیم؟
- خوانایی بهبود یافته: اگر قطعات کد به درستی برجسته شده باشند، خواندن و درک آنها راحت تر است.
- تعامل بهتر: کدهایی که به خوبی قالب بندی شده اند می توانند خوانندگان را برای مدت طولانی تری در صفحه شما نگه دارند و تعامل را افزایش دهند.
- ظاهر حرفه ای: برجسته کردن نحو به وبلاگ شما ظاهری زیبا و حرفه ای می بخشد.
مراحل افزودن برجسته سازی نحو کد در بلاگر
این مراحل را برای اجرای برجسته سازی نحو در سایت بلاگر خود دنبال کنید:
1. یک نحو را انتخاب کنید
برای این آموزش استفاده خواهیم کرد Prism.jsبرجسته سازی نحوی سبک و مدرن که از انواع زبان های برنامه نویسی پشتیبانی می کند. می توانید آن را در Prism.js پیدا کنید.
2. به الگوی بلاگر خود دسترسی داشته باشید
- به Blogger بروید و وبلاگ خود را انتخاب کنید.
- رفتن به موضوع و کلیک کنید HTML را ویرایش کنید.
3. CSS و جاوا اسکریپت Prism.js را اضافه کنید
قبل از بسته شدن </head>
پیوندهای زیر را برای فعال کردن Prism.js اضافه کنید:
<!-- Prism.js CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.css" rel="stylesheet" />
<!-- Prism.js JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.js"></script>
4. قطعات کد را بپیچید
در پست های وبلاگ خود، قطعه کد را به طور مناسب بپیچید <pre>
و <code>
برچسب ها در اینجا یک مثال است:
<pre><code class="language-js">
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
5. افزودن CSS سفارشی (اختیاری)
شما می توانید ظاهر بلوک های کد را با افزودن CSS خود سفارشی کنید. به عنوان مثال، برای تغییر رنگ پسزمینه یا سبک فونت، این را به آن اضافه کنید <style>
بخش در قالب شما:
pre {
background: #f5f5f5;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
}
code {
font-family: monospace;
}
6. ذخیره و بررسی کنید
پس از ایجاد تغییرات، کلیک کنید ذخیره کنید دکمه در ویرایشگر HTML. به وبلاگ خود بروید و یک پست جدید ایجاد کنید یا یک پست موجود را ویرایش کنید تا برجسته سازی نحو را بررسی کنید.
نمونه ای از یک قطعه کد کامل
در اینجا قطعه کد کامل باید در پست شما به نظر برسد:
<pre><code class="language-html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
</code></pre>
نتیجه گیری
اجرای برجستهسازی نحو کد در وبلاگ بلاگر شما میتواند نمایش قطعه کد را تا حد زیادی بهبود بخشد. با دنبال کردن مراحل ذکر شده در بالا، تجربه جذاب و حرفه ای تری برای خوانندگان خود ایجاد خواهید کرد.
به کمک نیاز دارید؟
اگر سؤالی دارید یا با اضافه کردن برجسته کردن نحو به مشکل برخوردید، در زیر نظر خود را بنویسید!