اضافة صندوق اكواد ملون بخمسة انماط في بلوجر




اضافة كود لبلوجر هو احيانا يكون صعب لان ببساطة يمكن ان يختلط بالصفحه ، او ان يكون الكود طويلاً فلا يستطيع الزائر نسخه بسهوله ، هنا تأتي فائدة صندوق الاكواد او syntax highlighter وهو الذي تضع فيه الاكواد سواء كانت HTML , CSS , JAVASCRIPT , PHP , C++ , XML .


خصائص الصندوق

  • يتوافر بخمسة انماط " اشكال " مختلفه ليتناسب مع لون المدونة فهناك اسود اذا كانت المدونة لون فاتح وابيض اذا كانت غامق ..
  • يتم تلوين الاكواد بحسب لغة البرمجه المستخدمه .
  • شكل مستجيب مع الشاشات
  • تم إنشاء الشفرة - بواسطة Google.
  • سهل الاستخدام.


شرح التركيب


توجة الي لوحة تحكم بلوجر > المظهر > تحرير HTML
ثم ضع هذا الكود فوق الوسم <body>

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

الآن يأتي دورك في اختيار اي نمط تود ان تركب


الشكل الاول


انسخ هذا الكود وضعه فوق الوسم </head>



<!-- ITHEIRC CODBOX THEME 1 -->
<style type="text/css">.str{color:#EC7600}.kwd{color:#93C763}.com{color:#66747B}.typ{color:#678CB1}.lit{color:#FACD22}.pln,.pun{color:#F1F2F3}.tag{color:#8AC763}.atn{color:#E0E2E4}.atv{color:#EC7600}.dec{color:purple}pre.prettyprint{border:0 solid #888}ol.linenums{margin-top:0;margin-bottom:0}.prettyprint{background:#000}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{color:#555;list-style-type:decimal}li.L1,li.L3,li.L5,li.L7,li.L9{background:#111}@media print{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006}.atn{color:#404}.atv{color:#060}}</style>


الشكل الثاني


انسخ هذا الكود وضعه فوق الوسم </head>



<!-- ITHEIRC CODBOX THEME 2 -->
<style type="text/css">code .str,pre .str{color:#65B042}code .kwd,pre .kwd{color:#E28964}code .com,pre .com{color:#AEAEAE;font-style:italic}code .typ,pre .typ{color:#89bdff}code .lit,pre .lit{color:#3387CC}code .pln,code .pun,pre .pln,pre .pun{color:#fff}code .tag,pre .tag{color:#89bdff}code .atn,pre .atn{color:#bdb76b}code .atv,pre .atv{color:#65B042}code .dec,pre .dec{color:#3387CC}code.prettyprint,pre.prettyprint{background-color:#000;border-radius:8px}pre.prettyprint{width:95%;margin:1em auto;padding:1em;white-space:pre-wrap}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>


الشكل الثالث


انسخ هذا الكود وضعه فوق الوسم </head>



<!-- ITHEIRC CODBOX THEME 3 -->
<style type="text/css">a,code.prettyprint a,pre.prettyprint a{text-decoration:none}code .str,pre .str{color:#fec243}code .kwd,pre .kwd{color:#8470FF}code .com,pre .com{color:#32cd32;font-style:italic}code .typ,pre .typ{color:#6ecbcc}code .lit,pre .lit{color:#d06}code .pun,pre .pun{color:#8B8970}code .pln,pre .pln{color:#f0f0f0}code .tag,pre .tag{color:#9c9cff}code .htm,pre .htm{color:plum}code .xsl,pre .xsl{color:#d0a0d0}code .atn,pre .atn{color:#46eeee;font-weight:400}code .atv,pre .atv{color:#EEB4B4}code .dec,pre .dec{color:#3387CC}code.prettyprint,pre.prettyprint{font-family:'Droid Sans Mono','CPMono_v07 Bold','Droid Sans';font-weight:700;font-size:9pt;background-color:#0f0f0f;-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;-khtml-border-radius:8px;border-radius:8px}pre.prettyprint{width:95%;margin:1em auto;padding:1em;white-space:pre-wrap}ol.linenums{margin-top:0;margin-bottom:0;color:#8B8970}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{code.prettyprint,pre.prettyprint{background-color:#fff}code .str,pre .str{color:#088}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#oc3;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#b66ff7;font-weight:700}code .htm,code .xsl,pre .htm,pre .xsl{color:#606;font-weight:700}code .atn,pre .atn{color:#c71585;font-weight:400}code .atv,pre .atv{color:#088;font-weight:400}}</style>



الشكل الرابع


انسخ هذا الكود وضعه فوق الوسم </head>



<!-- ITHEIRC CODBOX THEME 4 -->
<style type="text/css">.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}</style>



الشكل الخامس


انسخ هذا الكود وضعه فوق الوسم </head>



<!-- ITHEIRC CODBOX THEME 5 -->
<style type="text/css">pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>



بعد اختيار نمط

الخطوه الاخيره وهي استخدام الصندوق اثناء التدوين ، توجه للمشاركات وانشئ مشاركه
افتح تبويب HTML - الذي بجوار " تأليف "

ضع الكود التالي داخله


<pre class="prettyprint"><code class="language-html">YOUR CODE HRER</code></pre>




طريقة التعديل علي الكود واستخدامه



استبدل " YOUR CODE HERE " بالكود التي تريد وضعه فالصندوق ولكن يجب اولاً تحويل الكود
" استخدم محول اكواد الأثير -

محول الاكواد


-


الرمزالقيمهلغة البرمجه
language-htmlhtmlHTML
language-cshCSS
language-jsjsJavascript
language-xmlxmlXML
language-xhtmlxhtmlXHTML
language-ccC
language-cppcppC++
language-cscsC#
Language-phpphpPHP
language-pypyPython
language-javajavaJava
language-rbrbRuby
language-perlperlPerl

اما لتحديد نوع لغة البرمجه فقم بتغيير Language-html  برمز لغة البرمجه كما في الجدول بالاعلي

- للمساعدة والاستفسارات : التعليقات !


شاهد كيف تعمل الاضافة 

مـعـايـنة

ذات صلة


عـرض التعليقات
اخفاء التعليقات

يسعدنا تفاعلكم معنا,نرجو احترام الآداب العامة وعم نشر اي روابط اشهارية.
لإضافة كود قم بتحويله اولا بمحول الاكواد

إخلاء المسؤولية محول الأكواد ابلاغ عن رابط لايعمل