slides2pages

Implementar Marp en páginas de GitHub

Presentaciones a páginas web: ¡al instante!

¿Qué?

Marp te permite crear diapositivas HTML a partir de rebajas (¡como esta!).

Esta presentación es a la vez un sitio web y un archivo README.md.

¿Por qué?

Trate su presentación de la misma manera que trata el código.

• Utilice git para realizar un seguimiento de los cambios
• Solicitudes de extracción para colaborar
• Implementar automáticamente
• ¿Ves un problema? ¡Abre una edición!

Configuración

¿Quieres crear el tuyo propio?

Primero, cree un nuevo repositorio a partir del repositorio de plantilla.

Configurar páginas de GitHub

Abra su nuevo repositorio y configure la publicación.

Normalmente utilizarás gh-pages como rama de implementación.

Revisar compilación

Haga clic en la pestaña Acciones y vea si la compilación se realizó correctamente (puede llevar algún tiempo).

Ahora deberías ver los archivos generados en la rama gh-pages .

Ver página web

Abra su página web implementada para ver el contenido.

Fuera de la caja debería ver README.md como /index.html y /README.pdf . Las diapositivas bajo docs/ también se convierten.

Ejecutando localmente

• Conversión de una sola vez sin instalar marp-cli

$ npx @marp-team/marp-cli@latest README.md -o build/README.pdf

---

• O instale marp-cli en el directorio actual con npm

$ npm install --save-dev @marp-team/marp-cli

• Al ejecutar el comando anterior se crea un archivo package.json en el directorio actual, como este

{
	"devDependencies" : {
		"@marp-team/marp-cli" : " ^4.0.0 "
	}
}

---

• Ahora el comando marp está disponible en el directorio actual cuando tiene el prefijo npx

$ npx marp README.md -o build/README.pdf

• Y aquí está la salida.

[  INFO ] Converting 1 markdown...
[  INFO ] README.md = > build/README.pdf

---

• Si ya tiene el archivo package.json en el directorio actual, simplemente ejecútelo para instalar los paquetes especificados por él.

$ npm install

Como paso del flujo de trabajo

El flujo de trabajo ejecuta un paso equivalente:

 - name: Marp Build (README.pdf)
  uses: docker://marpteam/marp-cli:v1.7.0
  with:
    args: README.md -o build/README.pdf
  env:
    MARP_USER: root:root

Tenga en cuenta que los args coinciden con la diapositiva anterior.

Personalizando la construcción

Todo lo que esté en la carpeta build/ se implementará en GitHub Pages.

Puede copiar archivos adicionales o ejecutar pasos de procesamiento adicionales utilizando otras herramientas.

Más información sobre Marp

Este es un buen momento para aprender más sobre Marp. Aquí hay algunos recursos:

• Marca común
• Hoja de trucos
• Temas
• Temas CSS
• Directivas
• Complemento de código VS
• Editor en línea de Marp

Sitios de ejemplo

Los sitios conocidos que utilizan esta acción son:

• CS 199 Aún más práctica de la Universidad de Illinois en Urbana-Champaign (código)
• Explorando modelos basados ​​en agentes (código)

Envíe una solicitud de extracción para agregar su sitio.

Publica tus diapositivas

Cuando esté listo para compartir su presentación, confirme o fusione con main y su contenido en GitHub Pages se actualizará automáticamente.

?

¡Hurra!