اضافة صناديق لعرض الاكواد البرمجية
اهلا بيكم يا شباب فى هذا الموصوع سوف نتطرق لشيء مهم لبعض الشيء وهو اضافة صناديق لعرض الاكواد البرمجية كا نعلم ان من المستحيل وضع الاكواد البرمجية في صفحة ويب وتظهر كما هيا بل يتم ارجمتها بواصطة المتصفح الي تنقيذ الكود البرمجي يتم استخدام الرمز المسبق على نطاق واسع بدلاً من Blockquote في المواقع . يفضل العديد من المدونين استخدام ما قبل لأن هذا هو صديقة لكبار المسئولين الاقتصاديين. ولكن لاستخدام الرمز المسبق ، يجب عليك إضافة جزء كبير من التعليمات البرمجية في مدونتك وأحيانًا يؤثر على وقت التحميل. ولكن هناك دائما طريقة بديلة موجودة. لذا في هذا الصندوق ، سأوضح لك كيفية إضافة رمز مسبق بسيط مع رموز Font Awesome. هذا يبدو احترافيًا. ويمكنك تقديم رمز القطعة بطرق مختلفة.
من خلال استخدام علامة اقتباس رتيبة فقط ، يمكنك لف الكود الخاص بك وتقديمه إلى زوارك ببساطة ولكن معظم تصميم علامة اقتباس غير ملفتة للنظر. ويتم استخدام الحظر لتسليط الضوء على الاقتباس فقط ولكن معظم المدون يستخدمه لعرض شفرتهم. ومع ذلك ، يمكننا تسليط الضوء على رمز القطعة المصغر بطريقة احترافية من خلال لفه داخل كود مسبق.
- يحتوي هذا الرمز المسبق على بعض الميزات الفريدة مثل -
- يمكنك تحديد ملف CSS و HTML و JavaScript
- سيتم عرض رمزك بطريقة احترافية.
- الرمز المسبق دائمًا ما يكون خاليًا من الأخطاء وصديقًا لمحركات البحث
- سيتم تمييز رمز القطعة بلون مختلف.
- يمكن للمستخدم بسهولة تحديد البرنامج النصي عن طريق النقر المزدوج على كتلة الرمز المسبق.
معاينة
طريقة التركيب
- اولان نتوجة الي المظهر ثم احرير او تعديل HTML ثم تقوم بالبحث عن /head وتقوم بوضع الكود فوقة اي قبلة .
<link href = '// netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel = 'stylesheet' />- تقوم بالبحث عن /b:skin وتقوم بوضع الكود فوقة اي قبل.
pre { background: #444444; white-space: pre; word-wrap: break-word; overflow: auto; } pre.code { margin: 20px 25px; border-radius: 4px; border: 1px solid #292929; position: relative; } pre.code label { font-family: sans-serif; font-weight: bold; font-size: 80%; color: #3C99F9; position: absolute; left: 1px; top: 15px; text-align: center; width: 60px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; pointer-events: none; } pre.code code { font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace; display: block; margin: 0 0 0 60px; padding: 15px 16px 14px; border-left: 1px solid #555; overflow-x: auto; font-size: 13px; line-height: 19px; color: #ddd; } pre::after { content: "double click to selection"; padding: 0; width: auto; height: auto; position: absolute; right: 18px; top: 14px; font-size: 12px; color: #ddd; line-height: 20px; overflow: hidden; -webkit-backface-visibility: hidden; transition: all 0.3s ease; } pre:hover::after { opacity: 0; visibility: visible; } pre.css code { color: #4899CE; } pre.html code { color: #EF662A; } pre.javascript code { color: #F4C22B; }- تقوم بالبحث عن /body وتقوم بوضع الكود فوقة اي قبل.
<script type='text/javascript'>
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>- والان عندما تريد وضع الصندوق تضع الاكواد مع تحويلهل.من هنا
<pre class='code html'><label><i class='fa fa-html5 fa-lg'></i> HTML</label><code>
Add HTML code here
</code></pre>
<pre class='code css'><label><i class='fa fa-css3 fa-lg'></i> CSS</label><code>
Add CSS code here
</code></pre>
<pre class='code javascript'><label><i class='fa fa-code fa-lg'></i> JS</label><code>
Add JavaScript code here
</code></pre>تحذيرلا يسمح باخذ المحتوي والا سوف يتم التبليغ عنك وسيتم حذف المقالة من طرف بلوجر بدون اخبارك
تعليقات
إرسال تعليق