سيقوم Dindent (المعروف أيضًا باسم "HTML beautifier") بوضع مسافة بادئة لـ HTML للتطوير والاختبار. مخصص لأولئك الذين يعانون من قراءة العلامات التي ينتجها محرك القالب.
لن يقوم Dindent بتعقيم مخرجاتك أو التلاعب بها بطريقة أخرى بما يتجاوز المسافة البادئة.
إذا كنت تريد إزالة تعليمات برمجية ضارة أو التأكد من أن مستندك متوافق مع المعايير، ففكر في البدائل التالية:
إذا كنت بحاجة إلى وضع مسافة بادئة للتعليمات البرمجية الخاصة بك في بيئة التطوير، فاحذر من أن المكتبات المذكورة سابقًا ستحاول إصلاح الترميز الخاص بك (هذا هو غرضها الأساسي؛ المسافة البادئة هي منتج ثانوي).
هناك سبب وجيه لعدم استخدام التعبير العادي لتحليل HTML. ومع ذلك، سيقوم محلل DOM بإعادة بناء مستند HTML بأكمله. سيضيف علامات مفقودة، أو يغلق علامات الحظر المفتوحة، أو يزيل أي شيء لا يمثل HTML صالحًا. هذا ما يفعله Tidy وDOM وما إلى ذلك. وهذا السلوك غير مرغوب فيه عند تصحيح أخطاء مخرجات HTML. لن يقوم المحلل اللغوي المستند إلى Regex بإعادة إنشاء المستند. سوف يقوم Dindent بإضافة المسافة البادئة فقط، دون التأثير على العلامات.
ما ورد أعلاه هو أيضًا السبب وراء عدم اعتبار Chrome DevTools بديلاً مباشرًا لـ Dindent.
$ indenter = new Gajus Dindent Indenter ();
$ indenter -> indent ( ' [..] ' ); في المثال أعلاه، [..] هو عنصر نائب لـ:
<!DOCTYPE html >
< html >
< head > </ head >
< body >
< script >
console . log ( 'te> <st' ) ;
function ( ) {
test ; < ! -- < a > -- >
}
</ script >
< div >
< script src =" //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js " > </ script >
< div > < table border =" 1 " style =" background-color: red; " > < tr > < td > A cell test! </ td >
< td colspan =" 2 " rowspan =" 2 " > < table border =" 1 " style =" background-color: green; " > < tr > < td > Cell </ td > < td colspan =" 2 " rowspan =" 2 " > </ td > </ tr > < tr >
< td > < input > < input > < input > </ td > </ tr > < tr > < td > Cell </ td > < td > Cell </ td > < td > Ce
ll </ td > </ tr > </ table > </ td > </ tr > < tr > < td > Test < span > Ce ll </ span > </ td > </ tr > < tr > < td > Cell </ td > < td > Cell </ td > < td > Cell </ td > </ tr > </ table > </ div > </ div >
</ body >
</ html >سوف يقوم Dindent بتحويله إلى:
<!DOCTYPE html >
< html >
< head > </ head >
< body >
< script >
console . log ( 'te> <st' ) ;
function ( ) {
test ; < ! -- < a > -- >
}
</ script >
< div >
< script src =" //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js " > </ script >
< div >
< table border =" 1 " style =" background-color: red; " >
< tr >
< td > A cell test! </ td >
< td colspan =" 2 " rowspan =" 2 " >
< table border =" 1 " style =" background-color: green; " >
< tr >
< td > Cell </ td >
< td colspan =" 2 " rowspan =" 2 " > </ td >
</ tr >
< tr >
< td >
< input >
< input >
< input >
</ td >
</ tr >
< tr >
< td > Cell </ td >
< td > Cell </ td >
< td > Ce ll </ td >
</ tr >
</ table >
</ td >
</ tr >
< tr >
< td > Test < span > Ce ll </ span > </ td >
</ tr >
< tr >
< td > Cell </ td >
< td > Cell </ td >
< td > Cell </ td >
</ tr >
</ table >
</ div >
</ div >
</ body >
</ html > يقبل مُنشئ Indenter الخيارات التالية التي تتحكم في المسافة البادئة:
| اسم | وصف |
|---|---|
indentation_character | الحرف (الحروف) المستخدمة للمسافة البادئة. الافتراضي هو 4 أحرف مسافة بيضاء. |
عناصر HTML هي إما عناصر "مضمنة" أو عناصر "على مستوى الكتلة".
يشغل العنصر المضمن فقط المساحة التي تحدها العلامات التي تحدد العنصر المضمن. يوضح المثال التالي تأثير العنصر المضمّن:
< p > This is an < span > inline </ span > element within a block element. </ p >يحتل عنصر مستوى الكتلة المساحة الكاملة للعنصر الأصلي (الحاوية)، وبالتالي يتم إنشاء "كتلة". تعرض المتصفحات عادةً عنصر مستوى الكتلة بسطر جديد قبل العنصر وبعده. يوضح المثال التالي تأثير عنصر مستوى الكتلة:
< div >
< p > This is a block element within a block element. </ p >
</ div >يحدد Dendent العناصر التالية على أنها "مضمنة":
هذه مجموعة فرعية من العناصر المضمنة المحددة في MDN.
يتم التعامل مع كافة العناصر الأخرى ككتلة.
يمكنك ضبط نوع العنصر على الحظر أو السطر باستخدام طريقة setElementType :
$ indenter = new Gajus Dindent Indenter ();
/**
* @param string $element_name Element name, e.g. "b".
* @param ELEMENT_TYPE_BLOCK|ELEMENT_TYPE_INLINE $type
* @return null
*/
$ indenter -> setElementType ( ' foo ' , Gajus Dindent Indenter :: ELEMENT_TYPE_BLOCK );
$ indenter -> setElementType ( ' bar ' , Gajus Dindent Indenter :: ELEMENT_TYPE_INLINE ); يمكن استخدام Dindent عبر البرنامج النصي CLI ./bin/dindent.php .
php ./bin/dindent.php
Indent HTML.
Options:
--input=./input_file.html
Input file
--indentation_character= " "
Character(s) used for indentation. Defaults to 4 whitespace characters.
--inline
A list of comma separated " inline " element names.
--block
A list of comma separated " block " element names.
Examples:
./dindent.php --input= " ./input.html "
Indent " input.html " file and print the output to STDOUT.
./dindent.php --input= " ./input.html " | tee ./output.html
Indent " input.html " file and dump the output to " output.html " .
./dindent.php --input= " ./input.html " --indentation_character= " t "
Indent " input.html " file using tab to indent the markup.
./dindent.php --input= " ./input.html " --inline= " div,p "
Indent " input.html " file treating < div > and < p > elements as inline.
./dindent.php --input= " ./input.html " --block= " span,em "
Indent " input.html " file treating < span > and < em > elements as block.الطريقة الموصى بها لاستخدام Dindent هي من خلال Composer.
{
"require" : {
"gajus/dindent" : " 2.0.* "
}
}
