قم بإنشاء إطارات التعليمات البرمجية باستخدام Syntax Highlighter في منشورات بلوجر

غالبًا ما تجعل إطارات التعليمات البرمجية النص أسهل في الرؤية وأكثر ألوانًا اعتمادًا على القالب الذي تستخدمه مع مقالتك.

تعد أداة Syntax Highlighter أداة بديلة للاقتباس، ولكن طريقة عرضها في علامة الاقتباس بسيطة للغاية ولا تدعم عرض كود البرنامج النصي الملون، لذا فإن الحل هو استخدام أداة Syntax Highlighter Tool.

طريقة التثبيت

Css 1

قم بتثبيت CSS هناك العديد من البرامج التعليمية حول كيفية القيام بذلك، ولكن الطريقة التي أعرضها هنا بسيطة للغاية. العرض التوضيحي هو الإطار الذي يحتوي مباشرة على الكود الذي أستخدمه في هذه المقالة.

انتقل إلى بلوجر السمات تحرير HTML

قم بوضع كود CSS التالي أعلي هذا الوسم ]]></b:skin> أو ضعه داخل الوسم <style>...</style> وضعه فوق الوسم</body>

/* Syntax Highlighter */
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:300px}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

script 2

بعد ذلك، قم بلصق الكود أدناه فوق الوسم الإغلاق </head> لإكمال التثبيت.

<!-- Syntax Highlighter -->
<link href='//cdn.rawgit.com/isagalaev/highlight.js/cf4b46e5/src/styles/googlecode.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<!-- End Syntax Highlighter -->

html 3

عرض لعرض إطار يحتوي على تعليمات برمجية باستخدام أداة تمييز Syntax Highlighter الجميلة، ما عليك سوى استخدام الصيغة التالية:

<pre><code>يتم إدراج محتوى الكود هنا.</code></pre>

تذكر ان الكود بدون الوان اذا اردرت الكود الذي يدعم الالوان هنا

ملاحظة صغيرة لأولئك منكم الذين ليسوا على دراية كبيرة، نحن نقوم بتشفير الكود.

لتشفير التعليمات البرمجية قبل إدراجها في إطار التحرير، يمكنك استخدام أداة تشفير التعليمات البرمجية هنا: 

 من خلال الخطوات البسيطة المذكورة أعلاه، يمكنك إنشاء مربع تعليمات برمجية ملفت للنظر لمقالك باستخدام وظيفة Syntax Highlighter . إذا كان لديك أي أسئلة، يرجى ترك التعليق .