需要：命令行HTML5美化器[关闭]答案

【问题标题】：Wanted: Command line HTML5 beautifier [closed]需要：命令行HTML5美化器[关闭]
【发布时间】：2010-04-17 07:41:50
【问题描述】：

通缉

在 Linux 下运行的命令行 HTML5 美化器。

输入

乱码、丑陋的 HTML5 代码。可能是多个模板的结果。你不爱它，它不爱你。

输出

纯美。代码很好地缩进，有足够的换行符，关心它的空格。与其在网络浏览器中查看，不如直接在您的网站上显示代码。

嫌疑人

tidy 做的太多了（哎呀，它改变了我的文档类型！），它不适用于 HTML5。也许有办法让它合作而不改变任何东西？
vim 做的太少了。它只是缩进。我希望程序添加和删除换行符，并使用标签内的空格。

死或活！

【问题讨论】：

这不是超级用户的问题吗？
我会说你有合适的网站。不确定 SU 上有多少人实际使用 HTML，更不用说 HTML5。
我遇到了同样的问题，最终编写了一个新的 Ruby 库，它不需要编译任何第三方实用程序（我在让 Tidy 使用 Rails 时遇到了问题）并且只关注 HTML5，不是 XML、XHTML 或 HTML 4。它还不完美，但在我使用过的所有项目中都运行良好。请看jarijokinen.com/html5-beautifier
使用 XHTML5 你可以做到xmllint --format
您还可以对 HTML5 多语言文档进行monkeypatch：echo '<!doctype html>'; (echo "<?xml version='1.0' ?>"; tail -n +2 < index.html) | xmllint --format - | sed -re 's/(<script[^>]*)\/>/\1><\/script>/g' | tail -n+2。这应该适用于第 1 行具有 doctype 但没有 xml-prolog 的输入文档。以相同的样式输出。

标签： html command-line indentation pretty-print

【解决方案1】：

HTML Tidy 由 w3c 分叉，现在支持 HTML5 验证。

https://github.com/w3c/tidy-html5

【讨论】：

截至 2014 年 7 月，该项目似乎已经停滞了两年
截至 2015 年 4 月，它似乎还活着。虽然您仍然需要通过拉 git repo 自己从源代码构建二进制文件。
自 2016 年 6 月起，您可以在 OSX 上使用 Homebrew 进行安装。
截至 2017 年 7 月，您可以在 Debian 上apt-get install tidy

【解决方案2】：

我怀疑 tidy 可以使用正确的命令行参数。

http://tidy.sourceforge.net/docs/quickref.html

您可以指定任意 doctype 并添加新的块、内联和空标签，并打开和关闭许多 tidy 的清理选项。

根据您希望它“美化”的内容，您可能会得到不错的结果。它可能无法执行一些更高级的操作，例如重写 html 内容以消除虚假元素或组合它们，如果它无法识别它们。

【讨论】：

粗略猜测，tidy -as-xhtml --input-xml --tidy-mark no -indent --indent-spaces 4 -wrap 0 --new-blocklevel-tags article,header,footer --new-inline-tags video,audio,canvas,ruby,rt,rp --doctype "<!DOCTYPE HTML>" --break-before-br yes --sort-attributes alpha --vertical-space yes 怎么样（免责声明 - 我没有使用过 html5，我只是通过猜测哪些是块从 w3schools.com/html5/html5_reference.asp 复制了一些新标签到列表中/inline，所以请酌情调整。）
这似乎是最好的选择。也向 Stobor 致敬！
这是一个好的开始，但还需要更多。例如。新的输入元素属性/值（type="date"）。
我在这里的 2 个选项有问题。 --doctype "<!DOCTYPE HTML>" 和 --sort-attributes alpha 由于某种原因无法正常工作
我也很难让工作变得整洁。我在 ubuntu 14.10 上得到的选项是： tidy --tidy-mark no -indent --indent-spaces 4 -wrap 0 --new-blocklevel-tags 'article,header,footer' --new-inline-tags 'video, audio,canvas,ruby,rt,rp' --break-before-br 是 --sort-attributes alpha --vertical-space 是

【解决方案3】：

从我使用 HTML5 的实时网站复制而来，由于这个 sn-p，该网站在所有页面上都被验证为正确的 HTML5（在这种情况下是 PHP，但对于所使用的任何语言，选项和逻辑都是相同的）：

    $options = array(
        'hide-comments' => true,
        'tidy-mark' => false,
        'indent' => true,
        'indent-spaces' => 4,
        'new-blocklevel-tags' => 'article,header,footer,section,nav',
        'new-inline-tags' => 'video,audio,canvas,ruby,rt,rp',
        'new-empty-tags' => 'source',
        'doctype' => '<!DOCTYPE HTML>',
        'sort-attributes' => 'alpha',
        'vertical-space' => false,
        'output-xhtml' => true,
        'wrap' => 180,
        'wrap-attributes' => false,
        'break-before-br' => false,
    );

    $buffer = tidy_parse_string($buffer, $options, 'utf8');
    tidy_clean_repair($buffer);
    // Fix a tidy doctype bug
    $buffer = str_replace('<html lang="en" xmlns="http://www.w3.org/1999/xhtml">', '<!DOCTYPE HTML>', $buffer);

【讨论】：

要使用<audio> 标签，它使用空的<source> 标签，我发现你还需要这个配置选项：'new-empty-tags' => 'source'
谢谢，@WesC，我相应地编辑了我的答案。

【解决方案4】：

如果您使用Haml 作为您的 nanoc 过滤器，您的 html 将自动打印漂亮。您可以将 html5 输出设置为选项。

【讨论】：