صناديق لعرض أكوادك البرمجية بشكلين مختلفين مثل مدونة مستر أبو علي

قدم لكم اليوم شرح كيفية إضافة صناديق لعرض أكواد البرمجية بشكل رائع  بشكلين مختلفين لكي تتمكن بعرض أكوادك البرمجية بشكل رائع وجذاب ولكي أطيل عليكم نذهب إلي الشرح مباشرة.

شرح كيفية تركيب صناديق عرض الأكواد البرمجية الشكل الثاني:

أولا: قم بالبحث عن الوسم ]]></b:skin> ثم قم بوضع الكود التالي فوقة.

.s-code::-webkit-scrollbar{height:10px}.s-code::-webkit-scrollbar-track{-webkit-border-radius:100px;border-radius:100px}.s-code::-webkit-scrollbar-thumb{background-color:#444;-webkit-border-radius:100px;border-radius:100px}.s-code.t-HTML::-webkit-scrollbar-thumb:hover{background-color:#2AA4DA}.s-code.t-CSS::-webkit-scrollbar-thumb:hover{background-color:#0A9E6A}.s-code.t-JAVASCRIPT::-webkit-scrollbar-thumb:hover{background-color:#B58A33}.s-code.t-CODE::-webkit-scrollbar-thumb:hover{background-color:#CCC}.s-code{background-color:#222;clear:both;display:block;direction:ltr;width:100%;-webkit-border-radius:3px;border-radius:3px;overflow:hidden}.s-code:hover{overflow-x:scroll}.t-code{display:table-cell;vertical-align:top;width:100%;margin:0;white-space:normal}.t-code code{display:block;color:#ccc;font-size:14px;font-family:monospace!important;height:30px;padding:7px 20px;white-space:nowrap}.t-code code:nth-of-type(odd){background-color:#151515}.l-code{display:table-cell;vertical-align:top;min-width:40px;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none}.l-code em{display:block;font-style:normal;color:#fff;text-align:center;font-family:sans-serif!important;height:30px;line-height:1;padding-top:7px}.l-code em:nth-of-type(odd){background-color:rgba(255,255,255,0.1)}.s-code:before{display:table-caption;width:100%;padding:0 20px;font-family:monospace;font-size:24px;height:50px;padding-top:10px;font-weight:700}.t-HTML .l-code{background-color:#2AA4DA}.t-CSS .l-code{background-color:#0A9E6A}.t-JAVASCRIPT .l-code{background-color:#B58A33}.t-CODE .l-code{background-color:#444}.s-code.t-HTML:before{content:"< HTML >";border-bottom:2px solid #2AA4DA;color:#2AA4DA}.s-code.t-CSS:before{content:"< CSS >";border-bottom:2px solid #0A9E6A;color:#0A9E6A}.s-code.t-JAVASCRIPT:before{content:"< JAVASCRIPT >";border-bottom:2px solid #B58A33;color:#B58A33}.s-code.t-CODE:before{content:"< CODE >";border-bottom:2px solid #999;color:#999}.t-code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}

ثانيا: قم بالبحث عن الوسم </body> ثم قم بوضع الكود التالي فوقة.

<script type='text/javascript'>/*< {$(this)["addClass"]("acor-title-active")["siblings"](".acor-title")["removeClass"]("acor-title-active");$(this)["siblings"](".acor-content")["removeClass"]("acor-active");$(this)["next"]("div")["addClass"]("acor-active");});$(".s-code")["each"](function() {var _0x6717x3 = "";for(var _0x6717x4 = 1; _0x6717x4 < $(this)["find"](".t-code code")["length"] + 1; _0x6717x4++) {_0x6717x3 += "<em>" + _0x6717x4 + "</em>"};$(this)["prepend"]("<div class=\'l-code\'>" + _0x6717x3 + "</div>");});/*]]>*/</script>

والأن مع الجزء الأخير وهو كيفية أستخدام صناديق عرض الاكواد البرمجية في تدويناتك ،ولكي نسهل عليك الأمر أكثر وأكثر قمنا بتصم أداة لتوليد الأكواد أي ان كل ماعليك هو أن تضع أكوادك في هذه الأداة ثم أختيار لغة الأكواد ثم الضغط علي توليد الكود ، قم تقوم بنسخ الأكواد بعد توليدها وتضع في التدوينة وتأكد من الأكواد موجودة في خانة HTML ، وهذه صورة لاداة توليد الأكواد .

ملحوظة مهمة وهي أن هذه الأداة تقوم بتوليد الأكواد للشكل الأول فقط والشكل الثاني له أداة خاصة به.

شرح كيفية تركيب صناديق عرض الأكواد البرمجية الشكل الثاني:

أولا: قم بالبحث عن الوسم ]]></b:skin> ثم قم بوضع الكود التالي فوقة.

pre{margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#120e28;position:relative;padding:55px 15px 10px 15px;width:100%;tab-size:2;word-break:normal;-webkit-user-select:text;max-height:400px;color:#fff}pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#EEEEEE;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2),inset 0 0 0 1px #ccc}pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px;line-height:25px;height:46px;background-color:#EEEEEE;box-shadow:inset 0 0 0 1px #ccc}pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;left:0;padding:9px 14px;position:absolute;line-height:28px}pre code{display:block;background:none;border:none;color:#FFFFFF;padding:25px 20px 20px 20px;font-size:16px;white-space:pre;overflow:auto;text-align:right}.post blockquote,.post pre,.post code{-webkit-touch-callout:text;-webkit-user-select:text;-khtml-user-select:text;-ms-user-select:text;-moz-user-select:text}.comment_emo_list span{-webkit-touch-callout:text;-webkit-user-select:text;-khtml-user-select:text;-ms-user-select:text;-moz-user-select:text}

ثانيا: قم بالبحث عن الوسم </body> ثم قم بوضع الكود التالي فوقة.

<script type='text/javascript'>//<![CDATA[for(var pres=document.getElementsByTagName("pre"),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>

والأن مع الجزء الأخير وهو كيفية أستخدام صناديق عرض الاكواد البرمجية في تدويناتك ،ولكي نسهل عليك الأمر أكثر وأكثر قمنا بتصم أداة لتوليد الأكواد أي ان كل ماعليك هو أن تضع أكوادك في هذه الأداة ثم أختيار لغة الأكواد ثم الضغط علي توليد الكود ، قم تقوم بنسخ الأكواد بعد توليدها وتضع في التدوينة وتأكد من الأكواد موجودة في خانة HTML ، وهذه صورة لاداة توليد الأكواد .

ملحوظة مهمة وهي أن هذه الأداة تقوم بتوليد الأكواد للشكل الثاني فقط والشكل الأول له أداة خاصة به ، كما يمكنك أيضا أستخدام الشكلين في تدوينة واحدة بدون حدوث أي مشكلة مثلما أنا أقوم بعمل ذلك.

مولد الأكواد البرمجية الشكل الأول

مولد الأكواد البرمجية الشكل الثاني