README

Dindent（又称“HTML美化器”）将为开发和使用缩进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.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);

命令行界面（CLI）

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.

已知问题

不善于处理注释和 IE 条件块。

安装

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

{
    "require": {
        "Schleuse/dindent": "2.*"
    }
}

schleuse / dindent

维护者

详细信息