Розшукується: Командний рядок HTML5 beautifier [закрито]

75

В даний час це питання не підходить для нашого формату запитань та відповідей. Ми очікуємо, що відповіді будуть підтверджені фактами, посиланнями чи експертизою, але це питання, швидше за все, вимагатиме дебатів, аргументів, опитування чи розширеного обговорення. Якщо ви вважаєте, що це питання можна покращити і, можливо, знову відкрити, відвідайте довідковий центр, щоб отримати вказівки.

Закрито 8 років тому .

Розшукується

Командний рядок HTML5, який працює під Linux.

Вхідні дані

Спотворений, потворний код HTML5. Можливо результат кількох шаблонів. Ви не любите це, воно не любить вас.

Вихідні дані

Чиста краса. Код має гарний відступ, має достатньо розривів рядків, дбає про пробіли. Замість того, щоб переглядати його у веб-браузері, ви хотіли б відображати код безпосередньо на своєму веб-сайті.

Підозрювані

tidy робить занадто багато (чорт візьми, це змінює мій тип доктрини!), і це не працює добре з HTML5. Можливо, є спосіб змусити його співпрацювати і нічого не змінювати ?
vim робить занадто мало. Це лише відступи. Я хочу, щоб програма додавала і видаляла розриви рядків, а також грала з пробілами всередині тегів.

МЕРТВИМ АБО ЖИВИМ!

— блин
джерело

Чи не повинно це бути питання суперкористувача?

— Jonno_FTW

16

Я б сказав, що у вас є відповідний сайт для цього. Не впевнений, скільки людей на SU насправді використовує HTML, а тим більше HTML5.

— Tim Post

1

У мене була та ж проблема, і я в кінцевому підсумку написав нову бібліотеку Ruby, яка не вимагає компіляції будь-яких сторонніх утилів (у мене були проблеми з тим, щоб Tidy працював з Rails) і зосереджується лише на HTML5, а не на XML, XHTML або HTML 4. Це ще не ідеально, але добре працювало у всіх проектах, якими я користувався. Будь ласка, подивіться на jarijokinen.com/html5-beautifier

— Jari Jokinen

2

скористайтеся XHTML5, і ви можете це зробитиxmllint --format

— Янус Трольсен

Ви також можете 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 у рядку 1, але без xml-prolog. виводи в тому ж стилі.

— Янус Трольсен

27

HTML Tidy був розгалужений w3c і тепер має підтримку перевірки HTML5.

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

— mhansen
джерело

3

Станом на липень 2014 р. Цей проект, здається, зупинився на два роки

— eradman

2

Станом на квітень 2015 року він здається живим. Хоча вам все-таки потрібно будувати двійкові файли з самого джерела, витягуючи git repo.

— Парфіанський постріл

2

Станом на червень 2016 року ви можете встановити за допомогою Homebrew на OSX.

— HellaMad

1

Станом на липень 2017 року ви можете apt-get install tidyна Debian

— djangonaut

19

Я підозрюю, що прибирання можна зробити з правильними параметрами командного рядка.

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

Ви можете вказати довільний тип документа і додати новий блок, вбудовані та порожні теги, а також увімкнути та вимкнути безліч опцій очищення.

Залежно від того, що ви хочете, щоб це «прикрасило», ви, ймовірно, можете отримати гідні результати. Ймовірно, він не зможе зробити деякі більш просунуті речі, наприклад, переписати вміст 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, а лише скопіював кілька нових тегів із w3schools.com/html5/html5_reference.asp до списку, відгадуючи, які були заблоковані / вбудовані, тож будь ласка

— скорегуйте

Здається, це найкращий варіант. Похвала і Стобору!

— blinry

Це хороший початок, але йому потрібно набагато більше. Наприклад, нові атрибути / значення вхідних елементів (тип = "дата").

— dave1010

2

у мене були проблеми з двома з варіантів тут. --doctype "<!DOCTYPE HTML>"і --sort-attributes alphaз якихось причин не спрацював би

— Анкур

Я також намагався охайно працювати. Моїми результатами в ubuntu 14.10 були: tidy --tidy-mark no -indent --indent-space 4 -wrap 0 --new-blocklevel-tags 'article, header, footer' --new-inline-tags 'video, аудіо, полотно, рубін, rt, rp '--break-before-br так --sort-attributes alpha --vertical-space так

— aaaaaa

9

Скопійований із веб-сайту, який я використовував, використовуючи HTML5, який перевіряється як належний 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'

— Wes Cossick

1

Дякую, @WesC, я відповідним чином відредагував свою відповідь.

— Філіпп

2

Якщо ви використовуєте Haml як нано-фільтр, ваш html буде автоматично надрукований. Ви можете встановити вихід html5 як варіант.

— Ден Брендструп
джерело