الموضوع
اقرأ ايضًا
التعليقات
عن الكاتب
تعليمات
منذ مدة طلب مني بعض الإخوان منحهم كود الصناديق لعرض الاكواد الذي نستعمله بالمدونة طبعا قدمته للبعض وبما أنّ الطلب زاد عليه قررت أن أخصص هذه التدوينة للمدونين المهتمين بهذه الإضافة.
تستعمل صناديق syntax highlighter خصيصا في وضع الأكواد مثل Css و Html, Xml وغيرها بحيث توفر دعما يشمل النسخ بالضغط مرتين على الكود وتوضح كل اسم للوسوم مع تلوينه كما أن الاضافة تتوفر بأربعة ألوان زاهية كما سنشاهد بوضوح أكثر في المعاينة التالية
شرح طريقة التركيب
1. حرر القالب >> ابحث عن ]]></b:skin> وضع الكود التالي فوقه
* ما يتبقى عليك إلا وضع أحد الصناديق أو جميعها في موضوع بتبويب HTML بنسخ الأكواد التالية وحفظها عندك
تستعمل صناديق 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 != "index"'>
<script type='text/javascript'>
// Line Numbers
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span/>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),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>
* ملاحظة : لوضع أي كود به وسوم <> عليك بتحويله أولا ثم وضعه بداخل الصندوق - محول الأكواد من هنا
ملحوظة:
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
شكرا لك حسام على تقبل طلبي منك
ردحذفشكرا اخي كنت بحاجة لهادا الكود
ردحذفراع ارجو منك معرفت طريقة الاستعمل وشكراا
ردحذفأزال المؤلف هذا التعليق.
ردحذفتوجد مشكله عند ما اضع كود
ردحذفزى دا مثلا data:post.body يظهر المربع ولكن لا يظهر الكود
مبعرف سويه
ردحذف+ شكرا على الشرح
ردحذفالسلام عليكم اخي حسام لدي مشكلة وهوا ان القالب لايدعم تحديد ونسخ النصوص ملاحظة القالب هوا قالب رسالتي الخاص بك ممكن حل
ردحذفشكرا لك اخي الكريم
ردحذفشكرا اخي احبك في الله
ردحذف<blockquote class="tr_bq" style="text-align: center;">
ردحذف<span class="red"><span style="font-size: large;"><span style="color: #222222; font-family: &quot;arial&quot; , &quot;tahoma&quot; , &quot;helvetica&quot; , &quot;freesans&quot; , sans-serif;">يا جماعة🎉🎁 انا ربحت هاتف ايفون 7 مجانا💰 الهاتف جميل جدا , و 2 من اصدقائي ربحو , الموقع له مصداقية من جوجل لتربح هاتفك انت ايضا ادخل بسرعة إلى هدا الموقع 👈🔥</span><span style="color: #444444; font-family: &quot;roboto&quot; , &quot;helvetica&quot; , &quot;arial&quot; , sans-serif; text-align: start;"><a href="https://goo.gl/sj2P4c">https://goo.gl/sj2P4c</a></span><span style="color: #222222; font-family: &quot;arial&quot; , &quot;tahoma&quot; , &quot;helvetica&quot; , &quot;freesans&quot; , sans-serif;">🔥 و إربح هاتفك قبل إنتهاء العرض , الهاتف يصلك مجانا حتى المنزل 🔔 فقط جرب .</span></span></span></blockquote>
<div style="text-align: center;">
السلام عليكم هل يمكنني استعمال الصناديق للنصوص فقط
ردحذفمرحبا بك، اطلع على هذه التدوينة اخي الكريم :
حذفhttp://www.ar1web.co/2015/01/box-alert-css.html