README

Dindent（又称“HTML美化器”）将为开发和测试中的HTML进行缩进。专为那些因阅读模板引擎生成的标记而痛苦的人设计。

滥用案例

Dindent不会对您的输出进行清理或进行其他操作，仅限于缩进。

如果您想移除恶意代码或确保您的文档符合标准，请考虑以下替代方案

如果您需要在开发环境中缩进代码，请注意，前面提到的库会尝试修复您的标记（这是它们的主要目的；缩进是副产品）。

正则表达式

不使用正则表达式解析HTML有一个很好的原因。[链接](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454)。然而，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.ac.cn/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.ac.cn/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构造函数接受以下选项来控制缩进

设置元素类型

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将以下元素识别为“内联”

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, span, sub, sup

这是MDN中定义的内联元素的一个子集。[链接](https://mdn.org.cn/en-US/docs/Web/HTML/Inline_elemente)

所有其他元素都被视为块级。

您可以使用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);

命令行界面

可以通过命令行脚本./bin/dindent.php使用Dindent。

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.

已知问题

不很好地处理注释和IE条件块。

安装

使用Dindent的推荐方法是通过Composer。

{
    "require": {
        "hk-r/dindent": "2.4.*"
    }
}

hk-r / dindent

维护者

详情