اضافه کردن قابلیت Syntax Highlighter Code به سیستم وبلاگ بلاگر

 

Syntax Highlighter Code در پست های بلاگر شما می تواند به خوانندگان کمک کند تا کدهای نوشته شده توسط شما را بهتر درک کنند. علاوه بر این، به‌طور خودکار یک دکمه کپی برای هر متن هایلایت شده ای اضافه می‌کند که خوانندگان می‌توانند روی آن کلیک کنند و سپس کد را در اسناد خود جای‌گذاری کنند. ویرایشگر Syntax Highlighter Code نیز قابل تنظیم است .

Syntax Highlighter افزونه ای است که اکثر توسعه دهندگان و وبلاگ نویسان از آن استفاده می کنند ( مثلا درسیستم وردپرس و ... )، اما بصورت پیش فرض از بلاگر پشتیبانی نمی کند. اگر شما هم در شرایط مشابه هستید، این آموزش می تواند به شما کمک کند تا عملکرد Syntax Highlighter Code را در قالب های بلاگر خود با بارگذاری کد جاوا اسکریپت دریافت کنید.

بنابراین وقت آن است که با استفاده از دکمه کد یک برجسته کننده نحو بسازید و یاد بگیرید که چگونه برجسته سازی نحو را در پست های بلاگر اضافه کنید.

در اینجا، ابتدا یاد می گیریم که برجسته کننده Syntax چیست و چگونه کار می کند، و سپس خواهیم دید که چگونه می توانیم این را در بلاگر پیاده سازی کنیم.

Syntax Highlighter  چیست ؟

Syntax Highlighter یک ابزار مبتنی بر وب برای ایجاد کد هایلایت شده با نحو در بیش از 50 زبان (HTML، C، C++، جاوا، جاوا اسکریپت به Fortran و TeX) است. این ابزار به ویژه برای افرادی مفید است که در مورد برنامه نویسی در وبلاگ خود مطلب می نویسند و کد نمونه را به عنوان قطعه های برجسته نحوی یا کل برنامه به اشتراک می گذارند. 

Syntax Highlighter چگونه در بلاگر کار می کند؟

ایده پشت Syntax Highlighter ساده است. این برجسته‌کننده نحو، کد منبع پست وبلاگ شما را (چه در فرمت HTML یا Markdown) می‌گیرد و آن را قطعه قطعه در یک کامپایلر تغذیه می‌کند. خروجی کامپایلر طوری استفاده می شود که گویی متن پست شما است. این افزونه کلمات کلیدی را در کد منبع شناسایی می‌کند و آن‌ها را با برچسب‌های HTML، رنگ‌شده یا استایل‌دهی‌شده توسط CSS جایگزین می‌کند تا بلوک‌های کد برجسته‌شده با ظاهری زیبا ایجاد کند.

چگونه با دکمه کپی، برجسته کننده نحو را در بلاگر اضافه کنیم؟

برای افزودن Syntax Highlighter در بلاگر، باید دستورالعمل‌های گام به گام زیر  را دنبال کنید:

۱- در داشبورد بلاگر به قسمت theme بروید.

۲-  در قسمت theme برروی دکمه کناذی تم جاری کلیک کرده و به قسمت Edit HTML بروید.

۳- با استفاده از دکمه Ctrl+f عبارت زیر را جستجو کنید و سپس قطعه کد زیر  را کپی کرده و قبل از تگ انتهایی Paste کنید.

 ]]></b:skin>

 

.hljs {
            display: block;
            overflow-x: auto;
            padding: 0.5em;
            background: #1E1E1E;
            color: #DCDCDC;
            font-weight: normal;
            font-size: 1.15em !important;
        }

        .hljs-keyword,
        .hljs-literal,
        .hljs-symbol,
        .hljs-name {
            color: #569CD6;
        }

        .hljs-link {
            color: #569CD6;
            text-decoration: underline;
        }

        .hljs-built_in,
        .hljs-type {
            color: #4EC9B0;
        }

        .hljs-number,
        .hljs-class {
            color: #B8D7A3;
        }

        .hljs-string,
        .hljs-meta-string {
            color: #D69D85;
        }

        .hljs-regexp,
        .hljs-template-tag {
            color: #9A5334;
        }

        .hljs-subst,
        .hljs-function,
        .hljs-title,
        .hljs-params,
        .hljs-formula {
            color: #DCDCDC;
        }

        .hljs-comment,
        .hljs-quote {
            color: #57A64A;
            font-style: italic;
        }

        .hljs-doctag {
            color: #608B4E;
        }

        .hljs-meta,
        .hljs-meta-keyword,
        .hljs-tag {
            color: #9B9B9B;
        }

        .hljs-variable,
        .hljs-template-variable {
            color: #BD63C5;
        }

        .hljs-attr,
        .hljs-attribute,
        .hljs-builtin-name {
            color: #9CDCFE;
        }

        .hljs-section {
            color: gold;
        }

        .hljs-emphasis {
            font-style: italic;
        }

        .hljs-strong {
            font-weight: bold;
        }

        .hljs-bullet,
        .hljs-selector-tag,
        .hljs-selector-id,
        .hljs-selector-class,
        .hljs-selector-attr,
        .hljs-selector-pseudo {
            color: #D7BA7D;
        }

        .hljs-addition {
            background-color: #144212;
            display: inline-block;
            width: 100%;
        }

        .hljs-deletion {
            background-color: #600;
            display: inline-block;
            width: 100%;
        }

۴- با استفاده از Ctrl+f عبارت <body/> را سرچ کرده و قطعه کد زیر را به انتهای قسمت body اضافه میکنیم:

        
xml
        

            
        
     
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js'/>
    <script>hljs.initHighlightingOnLoad();</script>
           <script src='https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js'/>
<script>
  //<![CDATA[
setTimeout(function(){for(var e=document.querySelectorAll("pre>code"),o=0;o<e.length;o++)hljs.highlightBlock(e[o]);window.highlightJsBadge({contentSelector:".container",loadDelay:0,copyIconClass:"fa fa-copy",checkIconClass:"fa fa-check text-success",onBeforeTextCopied:function(e,o){return e}})},10);
//]]>
</script>
    

۵- حال میتوانید در پست خود با کپی قطعه کد زیر و paste کردن آن در متن نوشته خود ( در حالت HTML) کدهای خود را هایلایت کنید :

        
javascript
        

            
        
     

<div class="container" style="margin-top: 20px;">
<pre><code class="hljs" id="code"> <!--- Enter your Code --> </code></pre>
</div>

تتمه : اگر در مد html قرار بگیرید میتوانید با اضافه کردن تگ های <pre><code> در ابتدا و </pre></code> در انتهای قطعه کد ، کدهای خود را هایلایت کنید.

با تشکر از blogtriggers