web-dev-qa-db-ja.com

募集:コマンドラインHTML5美化

募集

Linuxで実行されるコマンドラインHTML5ビューティファイアー。

入力

文字化けしたいHTML5コード。おそらく複数のテンプレートの結果。あなたはそれを愛していない、それはあなたを愛していない。

出力

純粋な美しさ。コードはきれいにインデントされ、十分な改行があり、空白に注意します。 Webブラウザーで表示するのではなく、Webサイトに直接コードを表示したいと思います。

容疑者

  • tidyはあまりにも多く(つまり、私のdoctypeを変更します!)、HTML5ではうまく機能しません。多分それを協力させて、変更しないようにする方法があります何でも
  • vimは少なすぎる。インデントするだけです。プログラムで改行を追加および削除し、タグ内の空白を操作したい。

DEAD OR ALIVE!

74
blinry

HTML Tidyはw3cによって分岐され、現在はHTML5検証をサポートしています。

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

26
mhansen

正しいコマンドラインパラメーターを使用してきちんと動作するようにできると思います。

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

任意のdoctypeを指定して、新しいブロック、インライン、空のタグを追加したり、多くの整理オプションをオンまたはオフにしたりできます。

「美化」するものによっては、おそらく適切な結果を得ることができます。おそらく、HTMLコンテンツを書き換えて偽の要素を排除したり、それらを認識しない場合はそれらを結合するなど、より高度なことを行うことはできないでしょう。

このスニペットのおかげで、すべてのページで適切なHTML5として検証されたHTML5を使用してライブWebサイトからコピーしました(この場合は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);
9
Philipp

Nanoc-filterとして Haml を使用すると、htmlが自動的にきれいに印刷されます。オプションとしてhtml5出力を設定できます。

2
Dan Brendstrup