corrector - indentador de codigo html online
¿Usar HTML Tidy para simplemente sangrar código HTML? (5)
¿Es posible usar HTML Tidy para simplemente sangrar el código HTML?
Código de muestra
<form action="?" method="get" accept-charset="utf-8">
<ul>
<li>
<label class="screenReader" for="q">Keywords</label><input type="text" name="q" value="" id="q" />
</li>
<li><input class="submit" type="submit" value="Search" /></li>
</ul>
</form>
Resultado deseado
<form action="?" method="get" accept-charset="utf-8">
<ul>
<li>
<label class="screenReader" for="q">Keywords</label><input type="text" name="q" value="" id="q"/>
</li>
<li><input class="submit" type="submit" value="Search"/></li>
</ul>
</form>
Si lo ejecuto con el comando estándar, tidy -f errs.txt -m index.html luego obtengo esto
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.3.6), see www.w3.org">
<title></title>
</head>
<body>
<form action="?" method="get" accept-charset="utf-8">
<ul>
<li><label class="screenReader" for=
"q">Keywords</label><input type="text" name="q" value="" id=
"q"></li>
<li><input class="submit" type="submit" value="Search"></li>
</ul>
</form>
</body>
</html>
¿Cómo puedo omitir todas las cosas adicionales y obtener el sangrado del código?
Perdóneme si esa no es una característica que se supone que debe admitir, ¿qué biblioteca / herramienta estoy buscando?
Llego muy tarde a la fiesta :)
Pero en su conjunto de archivos de configuración ordenado
marca ordenada: no
de forma predeterminada, esto se establece en sí.
Una vez hecho esto, tidy no agregará la etiqueta meta generadora a su html.
Necesitas la siguiente opción:
tidy --show-body-only yes -i 4 -w 80 -m file.html
http://tidy.sourceforge.net/docs/quickref.html#show-body-only
-i 4 - sangra 4 espacios (tidy nunca usa pestañas)
-w 80 - ajuste en la columna 80 (predeterminado en mi sistema: 68, muy estrecho)
-m - modificar el archivo en el lugar
(es posible que desee omitir la última opción y examinar primero la salida)
Mostrar solo el cuerpo, naturalmente dejará fuera la tidy-mark (generador meta ).
Otras opciones interesantes son: --quiet yes - no imprime anuncios W3C y otros resultados innecesarios (aún se informan errores)
No encontré una posibilidad "solo reindent - sin ningún cambio". El siguiente archivo de configuración se "reparará" lo más bajo posible y (en su mayoría) solo reentregará el html. Tidy sigue corrigiendo algunas condiciones de error, como atributos duplicados (repetidos).
#based on http://tidy.sourceforge.net/docs/quickref.html
#HTML, XHTML, XML Options Reference
anchor-as-name: no #?
doctype: omit
drop-empty-paras: no
fix-backslash: no
fix-bad-comments: no
fix-uri:no
hide-endtags: yes #?
#input-xml: yes #?
join-styles: no
literal-attributes: yes
lower-literals: no
merge-divs: no
merge-spans: no
output-html: yes
preserve-entities: yes
quote-ampersand: no
quote-nbsp: no
show-body-only: auto
#Diagnostics Options Reference
show-errors: 0
show-warnings: 0
#Pretty Print Options Reference
break-before-br: yes
indent: yes
indent-attributes: no #default
indent-spaces: 4
tab-size: 4
wrap: 132
wrap-asp: no
wrap-jste: no
wrap-php: no
wrap-sections: no
#Character Encoding Options Reference
char-encoding: utf8
#Miscellaneous Options Reference
force-output: yes
quiet: yes
tidy-mark: no
Por ejemplo el siguiente fragmento html
<div>
<div>
<p>
not closed para
<h1>
h1 head
</h1>
<ul>
<li>not closed li
<li>closed li</li>
</ul>
some text
</div>
</div>
será cambiado a
<div>
<div>
<p>
not closed para
<h1>
h1 head
</h1>
<ul>
<li>not closed li
<li>closed li
</ul>some text
</div>
</div>
Como puede observar, las hide-endtags: yes oculta el cierre </li> de la segunda viñeta en la entrada. Configurando las hide-endtags: no - obtendremos la siguiente:
<div>
<div>
<p>
not closed para
</p>
<h1>
h1 head
</h1>
<ul>
<li>not closed li
</li>
<li>closed li
</li>
</ul>some text
</div>
</div>
por lo tanto, tidy agrega cerrar </p> y cerrar </li> a la primera viñeta.
No encontré una posibilidad de preservar todo en la entrada y solo reentregar el archivo.
Para responder a la pregunta original del póster, usando Tidy para simplemente sangrar el código HTML, esto es lo que uso:
tidy --indent auto --quiet yes --show-body-only auto --show-errors 0 --wrap 0 input.html
input.html
<form action="?" method="get" accept-charset="utf-8">
<ul>
<li>
<label class="screenReader" for="q">Keywords</label><input type="text" name="q" value="" id="q" />
</li>
<li><input class="submit" type="submit" value="Search" /></li>
</ul>
</form>
Salida:
<form action="?" method="get" accept-charset="utf-8">
<ul>
<li><label class="screenReader" for="q">Keywords</label><input type="text" name="q" value="" id="q"></li>
<li><input class="submit" type="submit" value="Search"></li>
</ul>
</form>
No se ha añadido ningún código HTML adicional. Se suprimen los errores. Para saber qué hace cada opción, es mejor consultar la referencia oficial .
Use un archivo de configuración con solo las opciones de indent , tidy-mark y quiet :
indent: auto
indent-spaces: 2
quiet: yes
tidy-mark: no
Asígnele el nombre tidy_config.txt y guárdelo en el mismo directorio que el archivo .html. Ejecutalo de esta manera:
tidy -config tidy_config.txt index.html
Para obtener más personalización, use la página de manual de tidy para encontrar otras opciones relevantes como el markup: no o force-output: yes .