رنگی نمایش دادن دستورات کد با PrismJs

کتابخانه های مختلفی برای رنگی کردن دستورات کد وجود دارد که معروف ترین ها کتابخانه PrismJs است که وب سایت های معروفی مثل smashingmagazine , alistapart , developer.mozilla , css-tricks , sitepoint , drupal , reactjs و stripe این کتابخانه PrismJs در پروژه های خود به کار گرفته است.

کتابخانه PrismJs برای رنگی کدها از تگ Pre و Code به کار می گیرد و کار این تگ ها نمایش دادن دستورات کد در وب است.

برای رنگی کردن دستورات کد کافیه فایل کتابخانه PrismJs را دانلود و فایل های prism.css و prism.js بین تگ <head> در پروژه خود فراخوانی کنید به این صورت است:

<html lang="en">
<head>
    <title>Cytus</title>
    <link href="themes/prism.css" rel="stylesheet" />
    <script src="prism.js"></script>
</head>
<body>
    <pre>
        <code class="language-html">
            p { color: red }
        </code>
    </pre>
</body>
</html>

با کد زیر می توانید با معرفی کردن کلاس نام برنامه نویسی دستورات کد را نمایش دهید:

<pre>
        <code class="language-html">
            p { color: red }
        </code>
</pre>

میتوانید با مشاهده مستندات کتابخانه PrismJs در رنگی کردن دستورات کد تغییراتی اعمال کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *