تبادل اعلاني جديد من الوليد نت مجانا

أدخل كلمات بحثك

كود اضافة صناديق لعرض الأكواد الى مدونة بلوجر
،،،،،،،،، لقد تم تغير اسم الموقع من موقع الوليد نت الي موقع الوليد نت 2 ,والرابط من alwalednet.blogspot.com الى alwalednet2.blogspot.com , , اتمنى ان ينال اعجابكم ×

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




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


 تستعمل صناديق syntax highlighter خصيصا في وضع الأكواد مثل Css و Html, Xml وغيرها بحيث توفر دعما يشمل النسخ بالضغط مرتين على الكود وتوضح كل اسم للوسوم مع تلوينه كما أن الاضافة تتوفر بأربعة ألوان زاهية

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

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>


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


كود اضافة صناديق لعرض الأكواد الى مدونة بلوجر كود اضافة صناديق لعرض الأكواد الى مدونة بلوجر Reviewed by دلع بنات on 2:51:00 ص Rating: 5
اظهار التعليقات
اخفاء التعليقات

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لاضافة كود حوله اولا بمحول الاكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
محول الأكوادمحول الأكواد الإبتساماتالإبتسامات

   
تجدونا هنا

إنضم إلينا


Join on this site

للحصول على كل جديد المدونة

Mohon Aktifkan Javascript!Enable JavaScript