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
  
Tabla
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

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.

Top

sgml-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.

Top

sgml-delete-tag

Busca las etiquetas de apertura y de cierre y las elimina, si estas tienen contenido entre ellas, este no se elimina.

Top

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.

Top

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.

Top

html-line

Inserta un salto de línea forzado con el elemento br

Top

html-paragraph

Inserta un párrafo utilizando el elemento p.

Top

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.

Top

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.

Top

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.

Top

browse-url-of-buffer

Envia la url del buffer al navegador por defecto para visualizar nuestro documento.

Top

sgml-close-tag

Busca el tag de apertura más inmediatamente anterior al cursor y escribe la etiqueta de cierre correspondiente.

Top

sgml-headline-1

Inserta la etiqueta de apertura y cierre del elemento h1

Top

sgml-headline-2

Inserta la etiqueta de apertura y cierre del elemento h2

Top

sgml-headline-3

Inserta la etiqueta de apertura y cierre del elemento h3

Top

sgml-headline-4

Inserta la etiqueta de apertura y cierre del elemento h4

Top

sgml-headline-5

Inserta la etiqueta de apertura y cierre del elemento h5

Top

sgml-headline-6

Inserta la etiqueta de apertura y cierre del elemento h6

Top

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.

Top

sgml-tag-help

Posicionados sobre un tag, nos brinda en el mini-buffer una breve descripción de tal tag.

Top

html-horizontal-rule

Top

html-checkboxes

Nos pregunta nombre, valor, y si debe estar tildado por defecto, luego inserta el esqueleto.

Top

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.

Top

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

Top

html-list-item

Simplemente agrega un item (elemento li) a la lista.

Top

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.

Top

html-ordered-list

Inserta el esqueleto de una lista ordenada:

    <ol>
      <li></li>
    </ol>
  

Top

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.

Top

html-unordered-list

Inserta el esqueleto de una lista desordenada:

    <ul>
      <li></li>
    </ul>
  

Top

Etiquetas:

Página principal

2 aporte(s) de lectores:

Blogger Tango aporta...

¡Muy bueno!
Práctico a la hora de hacer documentos XHTML.

¡Gracias!

11:00 p.m.  
Anonymous enviar mensajes claro aporta...

Muy buen tuto santi.

6:56 a.m.  

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.