سيو بلوجر: تضمين اكواد syntax highlighter فى بلوجر

0

سيو بلوجر: تضمين اكواد 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 قم بفتحه بالمتصفح سيظهر لك محول الأكواد كما بالصورة التاليه :

سيو بلوجر: تضمين اكواد syntax highlighter فى بلوجر

هذا الملف تبقيه فى جهازك بحيث عندما تريد وضع كود فى أى مشاركه على مدونتك ترجع له وتقوم بقتحه ووضع الكود بعد تحديد نوعه ثم يتم توليد الكود وتنسخ الناتج وتضعه بالمشاركه على حسب الخطوات المرتبه بالصوره السابقه.
ثانيا: اذا لم ترد أن تحتفظ بمولد الأكواد على جهازك ،  هنا صفحه خاصه بالكود تستطيع استخدامها فى تركيب الأكواد ولكن لابد من تحويل الكود اولا عبر أى موقع من مواقع تحويل الأكواد وانا اخترت لكم هذا الموقع الرائع والسهل ،تستطيع الدخول للموقع من الرابط التالى :
ادخل للموقع من هنا
وبعد تحويل الكود أنسخ الكود المحول ثم اذهب لأسفل الصوره:
ثم حدد نوع الكود المراد لصقه بالمشاركه سواء HTML أو CSS … الخ ثم مكان الكلام المظلل باللونالأحمر ضع الكود المحول ثم انسخ كامل الكود … صورةللأكواد من البرنامج.

سيو بلوجر: تضمين اكواد syntax highlighter فى بلوجر

هذه هى مجموعة الاكواد جاهزه ماعليك الا اختيار الكود المناسب ونسخه ووضع الكود بداخله ثمه لصقه فى صفحة المقاله بمدونتك فى وضعية HTML لاتنس هذا مهم جدا

أكواد التضمينالمعاينة
كود التضمين لعرض شفرة برمجية بـ لغة HTML<pre title=”HTML” data-codetype =”HTMLku”><code class=”language-markup”> …مكان وضع الكــــــود… </code></pre>
كود التضمين لعرض شفرة برمجية بـ لغة CSS <pre title=”CSS” data-codetype =”CSSku”><code class=”language-css”>
…مكان وضع الكــــــود…
</code></pre>
كود التضمين لعرض شفرة برمجية بـ لغة Javascript<pre title=”Javascript” data-codetype =”JavaScriptku”><code class=”language-javascript”> …مكان وضع الكــــــود… </code></pre>
كود التضمين لعرض شفرة برمجية بـ لغة jQuery<pre title=”jQuery” data-codetype =”JQueryku”><code class=”language-javascript”> …مكان وضع الكــــــود… </code></pre>
كود التضمين لعرض شفرة برمجية بـدون Highlighter تظليل النص<pre title=’CODE’><code> …مكان وضع الكــــــود… </code></pre>
،وهكذا كرر الطريقه لأى كود ولكن المهم تحويله قبل المشاركه.

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

سيو بلوجر: تضمين اكواد syntax highlighter فى بلوجر

اتمنى ان اكون قد وضعت مشاركه بها فائده لك
مع خالص تحياتى

اترك تعليق

يرجي التسجيل لترك تعليقك

شكرا للتعليق

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More