Lemoncode TV

Exportando a PDF

Trabajar con Markdown está muy bien, pero hay veces que necesitamos compartir nuestro contenido en un formato más estándar, por ejemplo PDF

¿Hay forma de convertir Markdown a otros formatos? Siii, En el marketplace de Visual Studio Code podemos encontrar un plugin gratuito que nos permite realizar dicha exportación a PDF.

Manos a la obra

Instalación

El plugin en concreto se llama Markdown PDF, podéis buscarlo en el panel de extensiones de Visual Studio Code o también pinchar en el enlace que os facilitamos en este post:

Enlace al plugin para exportar PDF

Exportando

• Vamos a abrir un fichero en formato Markdown.

• Abrimos la paleta de comandos, esto lo podemos hacer de varias maneras:

  • En el menú de Visual Studio Code pinchando en la opcion View >> command palette
  • Pulsando F1.
  • Jugando con una combinación de teclas: CTRL+SHIFT+P si estamos en Windows o CMD+SHIFT+P si estamos en mac.

Una vez que la tenemos activa, empezamos a teclear pdf y nos aparecen las opciones de exportación que tenemos.

Podemos convertir a:

• PDF
• JPG / PNG.
• HTML (con sus estilos inlcuidos y todo).

Elegimos la opción de pdf y en la misma ruta en la que se encuentra el markdown podemos ver el pdf que se ha generado.

Corte de página

Cuando trabajamos con un documento tipo pdf algo muy común es querer introducir un corte de página manual (por ejemplo tenemos una página de fin de capítulo y queremos que el siguiente contenido empiece en una nueva)

Esto lo podemos hacer introduciendo html en el markdown.

Supongamos que tenemos un documento con varios capítulos, y queremos que cada capítulo empiece en una página nueva.

Esto lo mostraría seguido

# capítulo 1

Soy el contenido del capítulo uno

# capítulo 2

Soy el contenido del capítulo 2

Podemos añadir el corte de página utilizando html y css:

# capítulo 1

Soy el contenido del capítulo uno

+ <div style="page-break-before:always"></div>

# capítulo 2

Soy el contenido del capítulo 2

# CSS Grid

<img src="./content/logo.png" width="120px">

+ <div style="page-break-before:always"></div>

Esto es css estándar, puedes encontrar más informacíon acerca de

Y ahora si exportamos el resultado sería el esperado.

¿Te apuntas a nuestro máster?

Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.