اضافة صندوق اكواد ملون بخمسة انماط في بلوجر
اضافة كود لبلوجر هو احيانا يكون صعب لان ببساطة يمكن ان يختلط بالصفحه ، او ان يكون الكود طويلاً فلا يستطيع الزائر نسخه بسهوله ، هنا تأتي فائدة صندوق الاكواد او syntax highlighter وهو الذي تضع فيه الاكواد سواء كانت HTML , CSS , JAVASCRIPT , PHP , C++ , XML .
اضافة كود لبلوجر هو احيانا يكون صعب لان ببساطة يمكن ان يختلط بالصفحه ، او ان يكون الكود طويلاً فلا يستطيع الزائر نسخه بسهوله ، هنا تأتي فائدة صندوق الاكواد او 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 برمز لغة البرمجه كما في الجدول بالاعلي
- للمساعدة والاستفسارات : التعليقات !
مـعـايـنة