اضافة كود لبلوجر هو احيانا يكون صعب لان ببساطة يمكن ان يختلط بالصفحه ، او ان يكون الكود طويلاً فلا يستطيع الزائر نسخه بسهوله ، هنا تأتي فائدة صندوق الاكواد او 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-html | html | HTML |
| language- | csh | CSS |
| language-js | js | Javascript |
| language-xml | xml | XML |
| language-xhtml | xhtml | XHTML |
| language-c | c | C |
| language-cpp | cpp | C++ |
| language-cs | cs | C# |
| Language-php | php | PHP |
| language-py | py | Python |
| language-java | java | Java |
| language-rb | rb | Ruby |
| language-perl | perl | Perl |
اما لتحديد نوع لغة البرمجه فقم بتغيير Language-html برمز لغة البرمجه كما في الجدول بالاعلي
- للمساعدة والاستفسارات : التعليقات !
مـعـايـنة
لماذا يجب استخدام محول الاكواد
ردحذفكي لا يتم ترجمة الاكواد عند وضعها وتصبح مدمجة مع التدوينة, أي أننا نقوم بتحولها كي تظهر على شكل حروف وأرقام الخ...
حذفإرسال تعليق
يرجى الالتزام بسياسة التعليقات لدينا ليتم نشر تعليقك . وشكرا