logo标签列表

寻求：命令行HTML5美化工具

htmlcommand-lineindentationpretty-print
76

招聘要求

一款在Linux下运行的命令行HTML5美化工具。

输入

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

输出

纯洁美观。代码会被适当地缩进，有足够的换行，并处理好其中的空白符。与其在网页浏览器中查看它，你更希望直接在你的网站上呈现代码。

嫌疑人

  • tidy的功能太多（它甚至改变了我的文档类型！），而且它无法很好地处理HTML5。也许有一种方法可以使它合作，而不改变任何东西吗？
  • vim的功能太少了。它只能缩进。我想要一个能添加和删除换行符，并处理标签内空白符的程序。

生死未卜！

这不应该是超级用户的问题吗？ - Jonno_FTW
16
我认为你对这个网站选得很对。不确定SU有多少人实际上使用HTML，更不用说HTML5了。 - Tim Post
1
我曾经遇到过同样的问题，最终编写了一个新的 Ruby 库，不需要编译任何第三方工具（我在使用 Rails 时遇到了 Tidy 的问题），并且专注于 HTML5，而不是 XML、XHTML 或 HTML 4。它还不完美，但在我使用它的所有项目中都表现良好。请查看 http://jarijokinen.com/html5-beautifier。 - Jari Jokinen
2
使用XHTML5，您可以执行“xmllint --format”命令。 - Janus Troelsen
你也可以monkeypatch HTML5多语言文档：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。这应该适用于第一行有doctype但没有xml-prolog的输入文档，并以相同的样式输出。 - Janus Troelsen
4个回答
27
3
截至2014年7月，该项目似乎已经停滞了两年。 - eradman
2
截至2015年4月，它似乎还活着。尽管您仍需要通过拉取git存储库自己构建二进制文件。 - Parthian Shot
2
截至2016年6月，您可以在OSX上使用Homebrew进行安装。 - HellaMad
1
截至2017年7月，你可以在Debian上执行apt-get install tidy。 - djangonaut
19

我怀疑只要使用正确的命令行参数，Tidy就可以正常工作。

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

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

根据您想要“美化”的内容，您可能可以得到不错的结果。如果Tidy无法识别某些元素，则可能无法执行一些更高级的操作，例如重写HTML内容以消除虚假元素或将它们组合在一起。

14
粗略估计一下，如何使用 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，并且我只从 http://www.w3schools.com/html5/html5_reference.asp 中复制了几个新标签到列表中，猜测哪些是块级元素/内联元素，因此请根据需要进行调整）。 - Stobor
这似乎是最好的选择。也要赞扬Stobor！ - blinry
这是一个不错的开始，但还需要更多。例如，新的输入元素属性/值（type="date"）。 - dave1010
2
我在这里遇到了两个问题。--doctype "<!DOCTYPE HTML>" 和 --sort-attributes alpha 由于某些原因无法正常工作。 - Ankur
我也曾经努力让Tidy工作起来。我在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 yes --sort-attributes alpha --vertical-space yes。 - aaaaaa
9

以下内容是从我使用 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);
2
如果你使用Haml作为你的nanoc过滤器，那么你的HTML代码将会自动排版。你可以设置选项以输出HTML5格式。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接