Emacs: xHTML mode sgml-mode
Descripción
Es un modo basado en el modo SGML, para editar documentos HTML.
Permite insertar los esqueletos más comunes utilizados al editar xHTML
Para ver una descripción completa del
modo: C-M
Esta no pretende ser una guía sobre emacs, si es la primera vez
que estás por utilizarlo te recomiendo que lo abras y con C-h
t (esto es presionar Control + h, soltar control y luego
la letra t) leas el tutorial para principiantes, que si tienes
suerte lo encontraras en tu idioma.
Personalización
Emacs es un editor extensible por lo que facilmente podremos extender el modo, con otras funciones que no vienen construidas por defecto en este modo.
Esqueletos
Supongamos que queremos construir un esqueleto para generar
automáticamente las etiquetas de apertura y de cierre del
elemento em. Para esto nos vamos a valer de una
función del emacs-lisp conocida
como skeleton-insert
Puedes probar el siguiente código en tu .emacs :
(defun esqueleto-para-em (value-em)
"Pregunta por el contenido de em y luego lo inserta encerrado en la etiqueta em."
(interactive "MContenido de em:")
(skeleton-insert '(nil "<em>" value-em "</em>")))
Ahora hemos definido una función esqueleto-para-em,
que al ejecutarse nos preguntará en el minibuffer por el string que
debe encerrar las etiquetas de apertura y cierre de em, para luego
insertar todo junto.
Opcionalmente podrías optar definirle una secuencia de teclas para que sea más fácil invocarlo, por ejemplo yo utilizo C-c C-e, debajo tu .emacs agregas:
(global-set-key (kbd "C-c C-e") 'esqueleto-para-em)
Generador de tablas
Un ejemplo muy útil y apenas un poco más avanzado es armarnos un generador de tablas. La construcción de tablas HTML es algo tediosa, por lo que no viene nada mal implementar una función en nuestra librería para librarnos de este trabajo.
Nuestra función recibirá nos preguntará por dos parametros
filas y columnas, a lo que nosotros
responderemos en el minibuffer con un número entero positivo.
Veamos como definirla:
(defun construye-tabla (filas columnas)
"Dadas las cantidad de filas y columnas construye una tabla"
(interactive "nFilas: \nnColumnas: ")
(insert "<table border=\"1\">\n<caption>Tabla</caption>\n")
(loop for i from 0 below filas by 1 do
(insert "<tr>\n")
(loop for j from 0 below columnas by 1 do
(insert "<td></td>\n"))
(insert "</tr>\n"))
(insert "</table>"))
La funcicón construye-tabla recibe dos argumentos,
luego inserta la apertura de la etiqueta table
un caption y entra en el primer loop que
es el encargado de generar las filas. Luego comienza
un loop interno que es el que construye las columnas,
tantas como el argumento recibido. A la salida de los loops
simplemente queda por cerrar la tabla.
Con muy poco trabajo y en sólo 10 líneas hemos definido un generador de tablas básico pero muy útil.
Sólo por deporte expondré una salida:
Filas: 3
Columnas: 2
| 1-1 | 1-2 |
| 2-1 | 2-2 |
| 3-1 | 3-2 |
Emacs mola :)
Validación
Emacs nos permite validar nuestros documentos invocando un
validador externo en un buffer asociado a un shell. Luego en ese
buffer obtendremos la salida del validador indicando, si los
hay, los errores que cometimos, con la combinación de
teclas C-x
o podemos cambiar a tal buffer y al dar RET
sobre un error específico nos llevará automáticamente a la
posición dónde el error se ha encontrado.
Especialmente útil para cumplir las recomendaciones del World Wide Web consortium.
Para correr el validador basta con:
M-x sgml-validate
NOTA: Es posible que nuestra distribución no
traiga por defecto el validador externo por línea de comando,
en Ubuntu el paquete que lo contiene se llama opensp.
Para instalarlo vale con:
aptitude install opensp
También debemos definir el comando específico que se invocará para validar, esto lo podemos hacer en nuestro .emacs:
;; Variable utilizada para la invocación del comando sgml-validate
(setq sgml-validate-command
"onsgmls -wxml -wno-explicit-sgml-decl -s /usr/share/sgml/declaration/xml.dcl ")
Key bindings
| Secuencia de teblas | Función |
|---|---|
| C-c C-a | sgml-attributes |
| C-c C-b | sgml-skip-tag-backward |
| C-c C-d | sgml-delete-tag |
| C-c C-f | sgml-skip-tag-forward |
| C-c TAB | sgml-tags-invisible |
| C-c C-j | html-line |
| C-c RET | html-paragraph |
| C-c C-n | sgml-name-char |
| C-c C-s | html-autoview-mode |
| C-c C-t | sgml-tag |
| C-c C-v | browse-url-of-buffer |
| C-c / | sgml-close-tag |
| C-c 1 | sgml-headline-1 |
| C-c 2 | sgml-headline-2 |
| C-c 3 | sgml-headline-3 |
| C-c 4 | sgml-headline-4 |
| C-c 5 | sgml-headline-5 |
| C-c 6 | sgml-headline-6 |
| C-c 8 | sgml-name-8bit-mode |
| C-c ? | sgml-tag-help |
| C-c DEL | sgml-delete-tag |
| C-c left | sgml-skip-tag-backward |
| C-c right | sgml-skip-tag-forward |
| C-c C-c - | html-horizontal-rule |
| C-c C-c c | html-checkboxes |
| C-c C-c h | html-href-anchor |
| C-c C-c i | html-image |
| C-c C-c l | html-list-item |
| C-c C-c n | html-name-anchor |
| C-c C-c o | html-ordered-list |
| C-c C-c r | html-radio-buttons |
| C-c C-c u | html-unordered-list |
Funciones y comandos
Descripciones
sgml-attributes
Si estamos posicionados con el cursor adentro de algún tag inserta de manera interactiva un atributo. La inserción interactiva, soporta autocompletado de los atributos validos para tal etiqueta.
Topsgml-skip-tag-backward
Saltea hasta el comienzo de la anterior etiqueta abierta, si está presente. Soporta argumentos númericos para saltear tantas veces como se requiera.
sgml-delete-tag
Busca las etiquetas de apertura y de cierre y las elimina, si estas tienen contenido entre ellas, este no se elimina.
sgml-skip-tag-forward
Mueve la posición del cursor hacia adelante hasta posicionarse por delante de la etiqueta que cierra el primer tag abierto anterior a la posición original del cursor.
sgml-tags-invisible
Oculta los tags, y deja sólo el contenido formateandolo y estructurandolo según las etiquetas, muy útil para observarlo más humanamente. Invicando el comando nuevamente volvemos a hacer visibles las etiquetas.
html-line
Inserta un salto de línea forzado con el elemento br
html-paragraph
Inserta un párrafo utilizando el elemento p.
sgml-name-char
Ciertos carácteres como < o >, no pueden ser insertados directamente debido a que pueden ser interpretados como la apertura de una etiqueta, este comando nos permite introducir tales carácteres directamente y escribir su entidad correspondiente.
html-autoview-mode
Cuando tenemos activada esta función, cada vez que salvemos se nos abrirá directamente el navegador por defecto para mostrarnos los cambios salvados.
sgml-tag
Permite insertar un tag, interactivamente, opcionalmente nos pregunta de manera interactiva por los argumentos que debe llegar, con presionar RET, obviamos los argumentos.
browse-url-of-buffer
Envia la url del buffer al navegador por defecto para visualizar nuestro documento.
sgml-close-tag
Busca el tag de apertura más inmediatamente anterior al cursor y escribe la etiqueta de cierre correspondiente.
sgml-headline-1
Inserta la etiqueta de apertura y cierre del elemento h1
sgml-headline-2
Inserta la etiqueta de apertura y cierre del elemento h2
sgml-headline-3
Inserta la etiqueta de apertura y cierre del elemento h3
sgml-headline-4
Inserta la etiqueta de apertura y cierre del elemento h4
sgml-headline-5
Inserta la etiqueta de apertura y cierre del elemento h5
sgml-headline-6
Inserta la etiqueta de apertura y cierre del elemento h6
sgml-name-8bit-mode
Cuando no trabajamos con carácteres ASCII tales como letras acentuadas, u otros, podemos activar este modo que reemplazará acentos y Ñs por la entidad equivalente. Sólo funciona para inputs Latin-1.
sgml-tag-help
Posicionados sobre un tag, nos brinda en el mini-buffer una breve descripción de tal tag.
html-horizontal-rule
html-checkboxes
Nos pregunta nombre, valor, y si debe estar tildado por defecto, luego inserta el esqueleto.
html-href-anchor
Nos pregunta por una URL y luego inserta el esqueleto de un enlace para que podamos poner la palabra mediante la cual queremos enlazar.
html-image
Escribe el esqueleto para la inserción de una imagen, nos pregunta por el valor del atributo src y luego deja posicionado el cursor para completar el valor del atributo alt
html-list-item
Simplemente agrega un item (elemento li) a la lista.
html-name-anchor
Invoca a un comando interactivo para la construcción de un anchor, sólo pide el valor de un nombre y luego construye un anchor, con los atributos id, y name completados con el valor preguntado.
html-ordered-list
html-radio-buttons
Inserta el esqueleto para radio-buttons de formularios, de manera interactiva. Nos pregunta por el nombre el valor y si debe estar activado por defecto, luego nos pregunta si queremos construir otro más.
html-unordered-list
Etiquetas: emacs
2 aporte(s) de lectores:
¡Muy bueno!
Práctico a la hora de hacer documentos XHTML.
¡Gracias!
Muy buen tuto santi.
Publicar un comentario
ATENCIÓN: Por favor intenta aportar o preguntar sobre el tema que trata la página. Otro tipo de consultas o criticas puedes dejarlas en el libro de visitas. Los aportes y preguntas están moderados simplemente para evitar spam o comentarios fuera de lugar.