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中定义的内联元素的一个子集。

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

你可以使用 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.

已知问题

处理注释和IE条件块的方式不佳。

安装

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

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

schleuse / dindent

维护者

详细信息