(2) عـنـصـر الــ (<pre>) HTML

بعد أن كنا قد تعرافنا على العنصر "pre" في موضوع سابق، أردت اليوم أن أطرح عليكم طريقة متقدمة نسبيا لكيفية التعامل معه بتنسيق الـ CSS لجعله ملائم و توافق لما نريد.

الفكرة، هي جعل الكود بداخل العنصر أكثر أناقة و تنظيم بإضافة بعض الخصائص على كل سطر مميز.
يتم هذا من خلال عنصر" HTML span" نضيفه لكل سطر مع تخصيصه. عند الإنتهاء، سنرى الكود و كأنه بداخل محرر نصوص محترم.

سنقوم أولا بإنشاء ملف بامتداد "html." (سميه ما شئت) و نضع بداخله الكود HTML.
كود HTML:
<!doctype html>
<html lang="en">

 <head>
 
 <meta charset="utf-8">
 
 <title>The HTML element "pre"</title>
 
 <link href="pre.css" rel="stylesheet">
 
 </head>
 
 <body>
 <div class="pre-content">
 <pre><code>
 &lt;!doctype html>
 &lt;html lang="en">
 &lt;head>
 &lt;meta charset="utf-8">
 &lt;meta name="viewport" content="width=device-width">
 &lt;title>The "pre" html element&lt;/title>
 &lt;/head>
 &lt;body
 &lt;!-- I am an HTML body content -->
 &lt;div class="navbar">
 &lt;a href="!#home">Home&lt;/a>
 &lt;a href="!#news">News&lt;/a>
 &lt;a href="!#contact">Contact&lt;/a>
 &lt;/div>
 
 &lt;?php
 // I am a PHP body content
 echo 'Hello World';
 ?>
 
 &lt;script>
 // I am a JavaScript body content
 const btn = document.querySelector('#get-code');
 &lt;/script>
 &lt;/body>
 &lt;/html>
 </code></pre>
 </div>
 </body>
</html>
كما لحظنا، تم استدعاء ملف التنسيق "pre.css" و هو الملف المسؤول عن تنصيق الكل.

كود PHP:

@charset "UTF-8"; * { box-sizing: border-box; } .pre-content { display: table; width: auto; margin: 16px auto; padding-right: 25px; background-color: #f8f8f8; border-radius: 4px; border: 1px solid rgb(124, 7, 154); clear: both; overflow: auto; } @media screen and (max-width: 768px) { .pre-content { width: 600px; padding: 0; } } pre { display: table-cell; /* display: flex; align-items: flex-start; justify-content: flex-start;*/ color: #141414; overflow: auto; } pre > code span.html { color: rgb(9, 9, 236); } pre > code span.php { color: rgb(250, 8, 16); } pre > code span.script { color: rgb(149, 59, 7); } pre > code span.attr { color: rgb(56, 107, 7); } pre > code span.doc{ color: rgb(216, 134, 7); } pre > code span.const{ color: rgb(193, 8, 150); } pre > code span.var{ color: rgb(100, 8, 193); } pre, pre > code { direction: ltr; white-space: pre-wrap; word-spacing: normal; -moz-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } code, pre { background-color: #f8f8f8; font: 15px/20px Consolas,Lucida Console,Menlo,Monaco,monospace; z-index: 0; text-shadow: none; margin: 0; padding: 0; }

بعد حفظ الملف و تشغيله ستجد إن شاء الله ما يسرك

مــتــابــعــة طــيــبــة

تسجيل الدخول

(2) عـنـصـر الــ (<pre>) HTML

Chokri.Z مشرف موقع أكتب كود

نماذج جاهزه تخلصك من شغل ساعات ، تقدر تعدّل عليها مثل ماتريد (2)

كيفية إضافة مؤثرات لعنصر (2)

متابعه لموضوع الـ Dark Web وايه الـ Business الجديد ؟ (2)

عـنـصـر الــ (<pre>) HTML

تسجيل الدخول

(2) عـنـصـر الــ (<pre>) HTML

Chokri.Z مشرف موقع أكتب كود

نماذج جاهزه تخلصك من شغل ساعات ، تقدر تعدّل عليها مثل ماتريد (2)

كيفية إضافة مؤثرات لعنصر (2)

متابعه لموضوع الـ Dark Web وايه الـ Business الجديد ؟ (2)

عـنـصـر الــ (<pre>) HTML

عمليات بحث مفيدة