سيو بلوجر: تضمين اكواد syntax highlighter فى بلوجر
تضمين اكواد syntax highlighter فى بلوجر،كيف أضع أكواد html داخل المقالة فى مدونة بلوجر بشكل جميل ومنسق ،فهذه الاضافة الجميله بوضع أكواد HTML و CSS وغيرها داخل صندوق جميل ورائع ومنسقه ومرقمه وسهل جدا نسخها بدبل كلك عبر الماوس، فهى عبارة عن تركيب صندوق لتضمين الشفرة البرمجية لعرض الأكواد بالتنسيق الصحيح لها وتجنب الأخطاء بإختلاطها مع النصوص الأخرى كما تعطي للمستخدم فرصة لفهم ومراجعة ما يتم عرضه داخل الصندوق بغض النظر عن اللمسة الإحترافية التي تضفيها مثل هذه الملحقات على القالب.
فأنا أنصح أى مبرمج أو مدون على منصة بلوجر أن تتوفر بقالبه مثل هذه الأداة وأخص المدونين المهتمين بالشروحات البرمجية .
فهذه الإضافة الرائعه تسهل للقارىء التمييز بين أكواد CSS أو HTML أو Javascript المختلفه عبر شكل الكود ،حيث يظهر اسم الكود بأعلى الصندوق وايضا الترتيب لكامل الكود داخل الصندوق دون الخروج خارجه كما نراه فى بعض المدونات.
خطوات تركيب syntax highlighter فى بلوجر
قم بالدخول الى حسابك على بلوجر
إنتقل للمدونة …. ثم إلى المظهر …. ثم إضغط على تحرير HTML
في وسط أكواد القالب إضغط على F + Ctrl لإظهار مربع البحث …. ثم ابحث عن الكود التالى .
]]></b:skin>
اعلا الكود السابق أى فوقه ضع اكواد CSS التاليه :
/*=================================================== = Syntax Highlighter = ===================================================*/ /* CSS Prism Syntax Highlighter */ pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#2B303B;position:relative;max-height:500px;text-align:left;direction:ltr;} pre::before{font-size:16px;content:attr(title);position:absolute;top:0;background-color:#363c4a;padding:10px;left:0;right:0;color:#8790a1;text-transform:uppercase;display:block;margin:0 0 15px 0;font-weight:bold;} pre::after{content:'Double click to selection';padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:8px;color:#8790a1;line-height:20px;} pre:hover::after{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:-8px;visibility:visible;} pre code{display:block;background:none;border:none;color:#C0C5CE;direction:ltr;text-align:left;word-spacing:normal;padding:0 0;font-weight:bold;font:14px 'Consolas','Monaco',monospace,Courier,Courier New;} pre code .token.prolog{color:#777;} pre code .token.doctype{color:#777;} pre code .token.cdata{color:#777;} pre code .token.url{color:#ccc;} pre .language-css .token.string{color:#ccc;} pre .style .token.string{color:#ccc;} pre code .token.atrule{color:#009999;} pre code .token.atrule{color:#1baeb0;} pre code .token.regex{color:#ccc;} pre code .token.important{font-weight:bold;} pre code .token.entity{color:#759bb9;cursor:help;} pre code .namespace{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.8)";filter:alpha(opacity=0.8);opacity:.8;} pre code .token.tag,.language-markup .token.punctuation{color:#A3BE8C;} pre code .token.attr-name{color:#C0C5CE;} pre code .token.selector{color:#759bb9;} pre code .token.property{color:#759bb9;} pre code .token.comment{color:#8c919a;font-style:italic;} pre code .token.punctuation{color:#8FA1B3;} pre code .token.operator{color:#4d9bd8;} pre code .token.number,pre code .token.boolean{color:#cec768;} pre code .token.attr-value{color:#f79029;} pre code .token.string{color:#A3BE8C;} pre code .token.keyword{color:#94719c;font-style:italic;} code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;} pre code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;} /*======comments pre======*/ .comments pre{padding:10px 10px 15px 10px;background:#2c323c;} .comments pre::before{content:'Code';font-size:13px;position:relative;top:0;background-color:#f56954;padding:3px 10px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;font-weight:bold;border:none;} .comments pre::after{font-size:11px;} .comments pre code{color:#eee;} .comments pre.line-numbers{padding-left:10px;} /*=======line numbers========*/ pre.line-numbers{position:relative;padding-left:3.0em;counter-reset:linenumber;} pre.line-numbers > code{position:relative;} .line-numbers .line-numbers-rows{height:100%;position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.5em;width:3em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:0;} .line-numbers-rows > span{pointer-events:none;display:block;counter-increment:linenumber;} .line-numbers-rows > span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right;transition:350ms;} pre[data-codetype='HTMLku']:before{color:#f79029;} pre[data-codetype='CSSku']:before{color:#759bb9;} pre[data-codetype='JavaScriptku']:before{color:#d4b447;} pre[data-codetype='JQueryku']:before{color:#94719c;} /*=======transition=======*/ pre::after{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;} /*=======border radius=======*/ pre,.comments pre::before{border-radius:4px;-o-border-radius:4px;-ms-border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
قم بالبحث عن هذا الوسم
</body>
أعلاه مباشرة ضع هذا الكود :
<script type='text/javascript'>
/*<![CDATA[*/
/**
* Prism: Lightweight, robust, elegant syntax highlighting
* MIT license http://www.opensource.org/licenses/mit-license.php/
* @author Lea Verou http://lea.verou.me
*/
!function(){var o=/blang(?:uage)?-(?!*)(w+)b/i,y=self.Prism={languages:{insertBefore:function(e,t,a,n){var r=(n=n||y.languages)[e],i={};for(var s in r)if(r.hasOwnProperty(s)){if(s==t)for(var g in a)a.hasOwnProperty(g)&&(i[g]=a[g]);i[s]=r[s]}return n[e]=i},DFS:function(e,t){for(var a in e)t.call(e,a,e[a]),"[object Object]"===Object.prototype.toString.call(e)&&y.languages.DFS(e[a],t)}},highlightAll:function(e,t){for(var a,n=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),r=0;a=n[r++];)y.highlightElement(a,!0===e,t)},highlightElement:function(e,t,a){for(var n,r,i=e;i&&!o.test(i.className);)i=i.parentNode;if(i&&(n=(i.className.match(o)||[,""])[1],r=y.languages[n]),r){e.className=e.className.replace(o,"").replace(/s+/g," ")+" language-"+n,i=e.parentNode,/pre/i.test(i.nodeName)&&(i.className=i.className.replace(o,"").replace(/s+/g," ")+" language-"+n);var s=e.textContent.trim();if(s){var g={element:e,language:n,grammar:r,code:s=s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/u00a0/g," ")};if(y.hooks.run("before-highlight",g),t&&self.Worker){var l=new Worker(y.filename);l.onmessage=function(e){g.highlightedCode=c.stringify(JSON.parse(e.data)),g.element.innerHTML=g.highlightedCode,a&&a.call(g.element),y.hooks.run("after-highlight",g)},l.postMessage(JSON.stringify({language:g.language,code:g.code}))}else g.highlightedCode=y.highlight(g.code,g.grammar),g.element.innerHTML=g.highlightedCode,a&&a.call(e),y.hooks.run("after-highlight",g)}}},highlight:function(e,t){return c.stringify(y.tokenize(e,t))},tokenize:function(e,t){var a=y.Token,n=[e],r=t.rest;if(r){for(var i in r)t[i]=r[i];delete t.rest}e:for(var i in t)if(t.hasOwnProperty(i)&&t[i]){var s=t[i],g=s.inside,l=!!s.lookbehind||0;s=s.pattern||s;for(var o=0;o<n.length;o++){var c=n[o];if(n.length>e.length)break e;if(!(c instanceof a))if(s.lastIndex=0,u=s.exec(c)){l&&(l=u[1].length);var u,p=u.index-1+l,h=p+(u=u[0].slice(l)).length,d=c.slice(0,p+1),f=c.slice(h+1),m=[o,1];d&&m.push(d);var b=new a(i,g?y.tokenize(u,g):u);m.push(b),f&&m.push(f),Array.prototype.splice.apply(n,m)}}}return n},hooks:{all:{},add:function(e,t){var a=y.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=y.hooks.all[e];if(a&&a.length)for(var n,r=0;n=a[r++];)n(t)}}},c=y.Token=function(e,t){this.type=e,this.content=t};if(c.stringify=function(e){if("string"==typeof e)return e;if("[object Array]"==Object.prototype.toString.call(e)){for(var t=0;t<e.length;t++)e[t]=c.stringify(e[t]);return e.join("")}var a={type:e.type,content:c.stringify(e.content),tag:"span",classes:["token",e.type],attributes:{}};"comment"==a.type&&(a.attributes.spellcheck="true"),y.hooks.run("wrap",a);var n="";for(var r in a.attributes)n+=r+'="'+(a.attributes[r]||"")+'"';return"<"+a.tag+' class="'+a.classes.join(" ")+'" '+n+">"+a.content+"</"+a.tag+">"},self.document){var e=document.getElementsByTagName("script");(e=e[e.length-1])&&(y.filename=e.src,document.addEventListener&&!e.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",y.highlightAll))}else self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,n=t.code;self.postMessage(JSON.stringify(y.tokenize(n,y.languages[a]))),self.close()},!1)}(),Prism.languages.markup={comment:/<!--[wW]*?--(>|>)/g,prolog:/<?.+??>/,doctype:/<!DOCTYPE.+?>/,cdata:/<![CDATA[[wW]+?]]>/i,tag:{pattern:/</?[w:-]+s*[wW]*?>/gi,inside:{tag:{pattern:/^</?[w:-]+/i,inside:{punctuation:/^</?/,namespace:/^[w-]+?:/}},"attr-value":{pattern:/=(('|")[wW]*?(2)|[^s>]+)/gi,inside:{punctuation:/=/g}},punctuation://?>/g,"attr-name":{pattern:/[w:-]+/g,inside:{namespace:/^[w-]+?:/}}}},entity:/&#?[da-z]{1,8};/gi},Prism.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),Prism.languages.css={comment://*[wW]*?*//g,atrule:/@[w-]+?(s+.+)?(?=s*{|s*;)/gi,url:/url((["']?).*?1)/gi,selector:/[^{}s][^{}]*(?=s*{)/g,property:/(b|B)[a-z-]+(?=s*:)/gi,string:/("|')(?.)*?1/g,important:/B!importantb/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[{};:]/g},Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<|<)style[wW]*?(>|>)[wW]*?(<|<)/style(>|>)/gi,inside:{tag:{pattern:/(<|<)style[wW]*?(>|>)|(<|<)/style(>|>)/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}}),Prism.languages.javascript={comment:{pattern:/(^|[^])(/*[wW]*?*/|//.*?(r?n|$))/g,lookbehind:!0},string:/("|')(?.)*?1/g,regex:{pattern:/(^|[^/])/(?!/)([.+?]|.|[^/rn])+/[gim]{0,3}(?=s*($|[rn,.;})]))/g,lookbehind:!0},keyword:/b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)b/g,boolean:/b(true|false)b/g,number:/b-?(0x)?d*.?d+b/g,operator:/[-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}||?||?|*|//g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[];(),.:]/g},Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<|<)script[wW]*?(>|>)[wW]*?(<|<)/script(>|>)/gi,inside:{tag:{pattern:/(<|<)script[wW]*?(>|>)|(<|<)/script(>|>)/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}}),Prism.languages.java={comment:{pattern:/(^|[^])(/*[wW]*?*/|//.*?(r?n|$))/g,lookbehind:!0},string:/("|')(?.)*?1/g,keyword:/b(abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while)b/g,boolean:/b(true|false)b/g,number:/b0b[01]+b|b0x[da-f]*.?[da-fp-]+b|bd*.?d+[e]?[d]*[df]b|Wd*.?d+b/gi,operator:{pattern:/([^.]|^)([-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}||?||?|*|/|%|^|(<){2}|($gt;){2,3}|:|~)/g,lookbehind:!0},ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[];(),.:]/g};
//Line Number
$('pre').attr('class', 'line-numbers');Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)});
//SelectorAll
for(var pres=document.querySelectorAll("var,samp,strong,em,code,pre,kbd,blockquote,value,textarea"),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);
/*]]>*/
</script>
وبهذا تم تركيب الكود بمدونتك.
كيف تستخدم syntax highlighter فى بلوجر الان،أو ماهى الطريقه ؟
امامك الان خياران فى الاستخدام وهما:
أولا : اما تستخدم الملف التالى قم بتحميله على جهازك من الرابط التالى :
حمل من هنا
وبعد التحميل فك الضغط عن الملف تجد ملف اسمه Générateur.html قم بفتحه بالمتصفح سيظهر لك محول الأكواد كما بالصورة التاليه :
هذا الملف تبقيه فى جهازك بحيث عندما تريد وضع كود فى أى مشاركه على مدونتك ترجع له وتقوم بقتحه ووضع الكود بعد تحديد نوعه ثم يتم توليد الكود وتنسخ الناتج وتضعه بالمشاركه على حسب الخطوات المرتبه بالصوره السابقه.
ثانيا: اذا لم ترد أن تحتفظ بمولد الأكواد على جهازك ، هنا صفحه خاصه بالكود تستطيع استخدامها فى تركيب الأكواد ولكن لابد من تحويل الكود اولا عبر أى موقع من مواقع تحويل الأكواد وانا اخترت لكم هذا الموقع الرائع والسهل ،تستطيع الدخول للموقع من الرابط التالى :
ادخل للموقع من هنا
وبعد تحويل الكود أنسخ الكود المحول ثم اذهب لأسفل الصوره:
ثم حدد نوع الكود المراد لصقه بالمشاركه سواء HTML أو CSS … الخ ثم مكان الكلام المظلل باللونالأحمر ضع الكود المحول ثم انسخ كامل الكود … صورةللأكواد من البرنامج.
هذه هى مجموعة الاكواد جاهزه ماعليك الا اختيار الكود المناسب ونسخه ووضع الكود بداخله ثمه لصقه فى صفحة المقاله بمدونتك فى وضعية HTML لاتنس هذا مهم جدا
انا شخصيا افضل الطريقه الأولى أسهل واسرع .
اذا واجهتك اى مشكله بخصوص التركيب بقالب مدونتك أتمنى ان تضع المشكله بالردود لنتعاون على الحل ،ولكن اذا واجهتك أى مشكله فتقريبا سيكون السبب الرئيسى أكواد الاقتباس وغيرها فى القالب حاول ان تبحث عنها وتحذفها
والنتيجه ستكون شبيهه بالصوره التالية :
إقرأ أيضا : افضل اكواد الميتا تاج لبلوجر 2018 ضرورية جدا لسيو المدونة
اتمنى ان اكون قد وضعت مشاركه بها فائده لك
مع خالص تحياتى
مهندس مدنى واهوى التدوين عن #السيو للمواقع والمدونات المختلفه وتهيئتها لمحركات البحث ، وكذلك شرح ماهو السيو وماهى فائدتة لمدونات بلوجر وكذلك دروس حول بلوجر ونشر قوالب بلوجر الأجنبية والعربية وشروحات حول جوجل ادسنس .