Dindent(일명 "HTML beautifier")는 개발 및 테스트를 위해 HTML을 들여쓰기합니다. 템플릿 엔진에서 생성된 마크업을 읽는 데 어려움을 겪는 사람들을 위한 것입니다.
Dindent는 들여쓰기 이상으로 출력을 삭제하거나 조작하지 않습니다.
악성 코드를 제거하거나 문서가 표준을 준수하는지 확인하려는 경우 다음 대안을 고려하십시오.
개발 환경에서 코드를 들여쓰기해야 하는 경우 앞서 언급한 라이브러리가 마크업 수정을 시도한다는 점에 유의하세요(주된 목적은 들여쓰기이며 부산물입니다).
HTML을 구문 분석하기 위해 정규식을 사용하지 않는 데는 그럴 만한 이유가 있습니다. 그러나 DOM 파서는 전체 HTML 문서를 다시 작성합니다. 누락된 태그를 추가하고, 열린 블록 태그를 닫거나, 유효한 HTML이 아닌 모든 항목을 제거합니다. 이것이 Tidy가 하는 일, DOM 등입니다. 이 동작은 HTML 출력을 디버깅할 때 바람직하지 않습니다. 정규식 기반 파서는 문서를 다시 작성하지 않습니다. 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 >Dindent는 다음 요소를 "인라인"으로 식별합니다.
이는 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.* "
}
}
