عرض الاكواد البرمجية بأسلوب متاريال
بالإضافة إلى تجميل مظهر الكود في منشور مدونة ، تعتزم Syntax Highlighter أيضًا تسهيل التعرف على نوع الكود الذي يوفره المؤلف من خلال الكود. يتم توفير تأثيرات بناء الجملة الأخرى لتوفير الراحة عند قراءة محتويات محتوى المدونة والقلم أو نسميها سيشعر المشرف بالمزيد من الاحتراف في تقديم مقالات تعليمية في مدوناتهم.
ما هي أداة تمييز بناء الجملة؟
إن Syntax Highlighter هو برنامج نصي يمكن أن يجعل رمز البرمجة أكثر حيوية في الأصل. يمكننا رؤية رمز اللون إذا كانت المدونة تحتوي على برامج تعليمية وتشارك نصائح حول المدونات التي تحتوي على HTML ، ونصوص جافا سكريبت ، وما إلى ذلك.
إن أعمال Syntax مثيرة للاهتمام تمامًا كما هو الحال مع Blockquote ولكن الفرق هو أنه بالنسبة لميزة Blackquote ، فإن لون النص هو لون واحد فقط. لتغيير اللون وفقًا للرمز الأصلي يجب أن يتم يدويًا ، ولكن مع هذا البناء لم تعد بحاجة إلى تغيير الرموز إلى ألوان يدوية ، سيغير لونه تلقائيًا وفقًا للرمز المحدد.
طريقة التركيب
- تتوجة الي المظهر ثم تعديل HTML ثم قم بالبحث عن /head وقم بوضع الكود فوقة .
<style type='text/css'>
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}
</style>- قم بالبحث عن /body وقم بوضع الكود فوقة .
<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>- الان في الموضوع الذي تريد اضافة فية الاكواد وقم بالانتقال من التأليف الي html .
<pre><code>The code</code></pre>
تعليقات
إرسال تعليق