اضافة صناديق العرض الأكواد الى مدونة بلوجر

منذ مدة طلب مني بعض الإخوان منحهم كود الصناديق لعرض الاكواد الذي نستعمله بالمدونة طبعا قدمته للبعض التجريبه

تستعمل صناديق syntax highlighter تحديد في وضع الأكواد مثل Css و Html ، Xml بحيث بحيث بحيث بحيث X X X X النسخ النسخ النسخ النسخ النسخ النسخ النسخ النسخ النسخ النسخ النسخ النسخ النسخ النسخ النسخ النسخ النسخ النسخ النسخ النسخ النسخ كل كل كل كل كل كل كل كل كل كل كل كل كل كل كل كل كل كل كل كل كل كل كل كل كل كل كل

• معاينة

شرح طريقة التركيب

1. حرر القالب >> ابحث عن ]]> </ b: skin> وضع الكود التالي فوقه

/* CSS Pre-Code Syntax Highlighter */
pre {
padding: 50px 10px 10px 10px;
margin: .5em 0;
white-space: pre;
word-wrap: break-word;
overflow: auto;
background-color: #2c323c;
position: relative;
border-radius: 4px;
max-height: 500px;
font-family: sans-serif;
clear: both;
}

pre::before {
font-size: 16px;
content: attr(title);
position: absolute;
top: 0;
background-color: #eee;
padding: 10px;
left: 0;
right: 0;
color: #fff;
text-transform: uppercase;
display: block;
margin: 0 0 15px 0;
font-weight: bold;
text-align: left;
}

pre::after {
content: 'اضغط مرتين لنسخ الكود';
padding: 2px 10px;
width: auto;
height: auto;
position: absolute;
right: 8px;
top: 8px;
color: #fff;
line-height: 20px;
transition: all 0.3s ease-in-out;
}

pre:hover::after {
opacity: 0;
top: -8px;
visibility: visible;
}

code {
font-family: Consolas,Monaco,'
Andale Mono','Courier New',Courier,Monospace;
line-height: 16px;
color: #88a9ad;
background-color: transparent;
padding: 1px 2px;
font-size: 12px;
}

pre code {
display: block;
background: none;
border: none;
color: #e9e9e9;
direction: ltr;
text-align: left;
word-spacing: normal;
padding: 0 0;
font-weight: bold;
}

code .token.punctuation {
color: #ccc;
}

pre code .token.punctuation {
color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
color: #777;
}

code .namespace {
opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
color: #fafafa;
}

pre code .token.string {
color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
color: #ccc;
}

code .token.operator {
color: #1887dd;
}

code .token.atrule,code .token.attr-value {
color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
color: #1baeb0;
}

code .token.keyword {
color: #e13200;
font-style: italic;
}

code .token.comment {
font-style: italic;
}

code .token.regex {
color: #ccc;
}

code .token.important {
font-weight: bold;
}

code .token.entity {
cursor: help;
}

pre mark {
background-color: #ea4f4e!important;
color: #fff!important;
padding: 2px;
border-radius: 2px;
}

code mark {
background-color: #ea4f4e!important;
color: #fff!important;
padding: 2px;
border-radius: 2px;
}

pre code mark {
background-color: #ea4f4e!important;
color: #fff!important;
padding: 2px;
border-radius: 2px;
}

.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-radius: 4px;
border: none;
}

.comments pre::after {
font-size: 11px;
}

.comments pre code {
color: #eee;
}

.comments pre.line-numbers {
padding-left: 10px;
}

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='CSSku']:before {
background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
background-color: #ff3c41;
}

pre[data-codetype='JQueryku']:before {
background-color: #e5b460;
}


2. ضع الكود التالي فوق </ body>

<script src='//cdn.rawgit.com/iHussam/ar1web/master/preline.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
// Line Numbers
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)})
//<![CDATA[
// Selection
for(var pres=document.querySelectorAll("pre,kbd,blockquote,td"),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>
</b:if>


3. قم بحفظ العمل

* ما يتبقى عليك فقط وضع أحد الصناديق أو جميعها في موضوع بتبويب HTML بنسخ الأكواد التالية وحفظها عندك

<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">ضع هنا كود الـHTML</code></pre>
<pre data-codetype="CSSku" title="CSS"><code class="language-css">ضع هنا كود الـCss</code></pre>
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript">ضع هنا كود الـJavascript</code></pre>
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript">ضع هنا كود الـjQuery</code></pre>


* ملاحظة: ضع أي كود به وسوم <> عليك التوفيق أولا ثم وضعه بداخل الصندوق - محوّل الأكواد من هنا