Exportar de org a html en emacs

Exportar de org a html en emacs
Índice

No pretendo traducir el manual, simplemente hacer un resumen y recopilación de los conceptos que me han resultado útiles al exportar documentos escritos en org-mode a html usando emacs. Añadiré contenido a medida que lo vaya descubriendo y utilizando.

Exportando un archivo ORG a HTML

La exportación a HTML de un documento escrito en Org Mode es bastante sencilla usando Emacs, Basta con pulsar la combinación de teclas C-c C-e h o (Ctrl+c, Ctrl+o, h, o) y ya tendremos creado y abierto en el navegador un archivo html con el resultado de la exportación. Lo más interesante comienza en el momento que necesitas una personalización de esta exportación.

image-02

Propiedades del archivo (Título, archivo de exportación, opciones…)

Es posible en una línea definir el título del que va a ser el archivo exportado, en otra la ruta se exportación o incluso definir o añadir información al “head” del archivo html generado.

Además es posible definir en una sola línea varias opciones como la no inclusión del índice toc:nil, no numerar la lista de contenidos num:nil, no agregar el postámbulo al final del archivo html-postamble:nil, no evaluar la exportación de subíndices y superíndices ^:nil

#+TITLE: Exportando org a html en emacs
#+EXPORT_FILE_NAME: ~/salida/index.html
#+OPTIONS: toc:nil num:nil html-postamble:nil ^:nil
#+HTML_HEAD: <img src="./img/logo.jpg" width="240">
#+HTML_HEAD_EXTRA: <style> .figure p {text-align: left;}</style>

Insertar contenido desde un archivo externo

  • Desde un archivo html
#+INCLUDE: "pp.html" export html
  • Desde un archivo de código
#+INCLUDE: "~/.emacs.d/init.el" src emacs-lisp :lines "1-20"

Mediante el modificador :lines "1-20" indicamos al exportador que sólo queremos importar al 20 primeras líneas.

  • Desde un archivo de texto (Incluyendo el archivo)
#+INCLUDE: "~/Descargas/pepe.txt" export txt
  • Desde un archivo de texto (Leyendo el contenido evaluando elisp)
#+name: emacs-lisp-hello-world
#+begin_src elisp :exports results
(with-temp-buffer
    (insert-file-contents "~/Descargas/pepe.txt")
    (buffer-string))
#+end_src
  • Desde un archivo de texto (Incluyendo a través de un html Object data)
#+HTML: <div><object data="~/Descargas/pepe.txt" height= 500 width=1000></object></font></div>

Insertar código HTML

  • Una sola línea
#+HTML: <img src="pepe.jpg" alt="centered image" />
  • Un bloque de código
#+BEGIN_EXPORT html
<center>
    <img src="pepe.jpg" alt="centered image" />
</center>
#+END_EXPORT

Insertar imágenes

La gran parte de la información de la exportación de imágenes la podemos encontrar en “Images in HTML export” y “Images and XHTML export”.

  • Imagen con enlace a otra de alta resolución
[[file:alta_res.jpg][file:baja_res.jpg]]
  • Centrar la imagen Podemos bien centrar una imagen en la exportación añadiendo los atributos html previos a la declaración de la imagen
#+ATTR_HTML: :style margin-left: auto; margin-right: auto;
[[file:logo.jpg]]

O bien insertar directamente toda la imagen mediante código html

#+html: <p align="center"><img src="logo.jpg" /></p>
  • Imagen con un enlace Para que al hacer click sobre una imagen nos lleve a un enlace externo, usaremos este formato.
[[http://www.google.es][file:logo.jpg]]
  • Modificar tamaño, borde, texto alternativo… La forma más práctiva es mediante la inclusión de atributos previos a la declaración de la imagen tal y como se muestra a continuación.
#+ATTR_HTML: :alt Zoomed image.
#+ATTR_HTML: :width 300 :style border:2px solid black;
[[file:logo.jpg]]

Insertar un vídeo (Youtube/local)

#+BEGIN_EXPORT html
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
#+END_EXPORT

#+BEGIN_EXPORT html
<video width="320" controls loop autoplay>
  <source src="video2.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
#+END_EXPORT

No exportar un encabezado

La forma más sencilla de no exportar todo el contenido de un encabezado es añadiendo al mismo un tag y excluir la publicación del mismo.

#+EXCLUDE_TAGS: oculto

Exportar usando un tema

En la red es posible encontrar temas desarrollados por creadores independientes como Fabrice Niessen que con una sólo línea dentro del archivo org realiza una exportación sencillamente espectacular.

#+SETUPFILE: https://fniessen.github.io/org-html-themes/org/theme-readtheorg.setup

image-01

Enlaces de interés