Funcionalidades

Generador de plantillas para obtener distintos diseños visuales.
Servidor de previsualización.
Exportación de HTML autocontenido.
Conversión automatizada a formato PDF.
Soporte de presentaciones múltiples.

Bases

Este software se basa en Remark.js y Markdown. Utiliza DeckTape para exportar la presentación a un archivo PDF. Para generar estilos usa Sass, el cual es un lenguaje compatible con CSS que permite usar variables y funciones, anidar y mezclar reglas, etc. Para el servidor de previsualización usa node.

Instalación

La instalacíón se hace sencillamente con el gestor de paquetes de javascript npm:

npm install backslide

En mi caso prefiero instalarlo como usuario común y no como root, no obstante hay que tener en cuenta luego de que esté en la variable PATH. Por ejemplo:

ln -s $HOME/node_modules/backslide/bin/bs $HOME/.local/bin/bsa

Creación de dispositivas

Para comenzar a crear nuestra presentación es necesario ejecutar el siguiente comando:

bs init

Este comando generará un árbol de archivos como el siguiente:

.
├── presentation.md
└── template
    ├── index.html
    ├── remark.min.js
    └── style.scss

1 directory, 4 files

El contenido lo generaremos editando el archivo presentation.md

Por ejemplo:

title: Linux Operador C1   
class: animation-fade
layout: true

<!-- This slide will serve as the base layout for all your slides -->
.bottom-bar[
        {{title}}
]

---
background-image: url(assets/imgs/a-1644824-unsplash.jpg)
class: impact

# {{title}}
## Permisos, tuberías y redireccionamiento

![](assets/imgs/clase1-LiOp.jpg)

---

## Otra Slide

- item 1
- item 2
- item 3

---

## Otra Slide

- item 1
- item 2
- item 3

--

- item 4
- item 5
- item 6

El directorio template contiene:

styles.scssLa hoja de estilos en Sass
remark.min.jsLa copia offline de Remark.js
El archivo html que invoca los dos archivos de arriba

Edición y reproducción

Entonces, el principal archivo que debemos modificar y adaptar es presentation.md. Algunas cosas para tener en cuenta:

La primera diapositiva suele tener el atributo layout: si su valor es truela misma se usará como plantilla para el resto de las diapositivas.
Cuando se quiere aplicar una clase se usa el siguiente formato:

.NombreDeClase[
    contenido
]

Por ejemplo, el siguiente código:

.col-6[
- item 4
- item 5
- item 6]

Será convertido al siguiente HTML:

<div class="col-6"><ul>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>

Si se desea aplicar la clase a toda la diapositiva se debe anteponer el atributo class:

---

class: alt-bg

## Ejemplo

- item 4
- item 5
- item 6

De hecho, se puede aplicar una imagen de fondo a la diapositiva:

---   

background-image: url(superfoto.jpg)              

## Ejemplo

- item 4
- item 5
- item 6

Para hacer aparecer el contenido de manera progresiva se usa el separador --:

## Ejemplo
- item 1
--

- item 2
--

- item 3

Es decir la idea es crear contenido en presentation.md y los detalles del formato los podemos definir en styles.scss:

Mientras editamos obviamente queremos ver como va saliendo nuestra presentación, en cuyo caso ejecutamos:

bs serve -p 4444

El puerto es opcional, pero es útil si necesitamos trabajar con más de una presentación a la vez, usando obviamente diferentes puertos para cada una.

Exportación

Para exportar se usa:

bs e

Tener en cuenta que cualquier archivo con extensión .md será procesado por bs

En el directorio distestá el html con la preentación completa.

y para convertir a pdf:

bs p

El archivo resultante estará en el directorio pdf.

Conclusión

Me resultó un poco más cómodo trabajar con Backslide que con MarkDeck ya que no es necesario contar con docker para crear y/o probar las presentaciones. La plantilla que viene predeterminada está bastante bien y puede ser modificada a gusto, además los controles para ver las notas del orador y navegar por la presentación son muy útiles.