# Cómo hacer una publicación de diapositivas?
**URL:** https://meta.discourse.org/t/how-to-make-a-slide-post/214026
**Category:** Support
**Created:** [6 Enero, 2022 09:41 UTC](https://meta.discourse.org/t/how-to-make-a-slide-post/214026 "2022-01-06T09:41:20Z")
**Posts on this page:** 1
**Showing post:** 9
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [23 Febrero, 2026 15:21 UTC](https://meta.discourse.org/t/how-to-make-a-slide-post/214026/9 "2026-02-23T15:21:56Z")
También estoy explorando opciones actualmente. ¿Debería ser posible implementarlo como un componente de tema, verdad?
Por ejemplo, existen bibliotecas de Markdown a diapositivas que podrían usarse:
[quote] Aquí están los mejores repositorios de GitHub para esto, clasificados por la facilidad con la que se pueden adaptar a un Componente de Tema de Discourse.
### 1. Remark.js (Muy recomendado para Discourse)
- **GitHub:** [gnab/remark](https://github.com/gnab/remark)
- **Cómo funciona:** Remark está diseñado específicamente para ejecutarse completamente en el navegador. Le proporcionas una cadena de Markdown (donde las diapositivas están separadas por `---`), y genera dinámicamente el HTML/CSS necesario para la presentación sobre la marcha.
- **Por qué encaja con Discourse:** Como no requiere pasos de compilación, puedes cargar fácilmente el script `remark.min.js` a través de tu componente de tema de Discourse. Puedes capturar el Markdown de la publicación de un usuario y pasarlo directamente al motor Remark.
### 2. Reveal.js
- **GitHub:** [hakimel/reveal.js](https://www.google.com/search?q=https://github.com/hakimel/reveal.js)
- **Cómo funciona:** Reveal.js es el peso pesado de las presentaciones web. Si bien es principalmente un framework de presentación HTML, tiene un plugin de Markdown incorporado.
- **Por qué encaja con Discourse:** Es extremadamente rico en funciones (notas del orador, exportación a PDF, animaciones, composición matemática). _Puede_ ejecutarse del lado del cliente, pero es mucho más pesado que Remark.js. Deberás cargar la biblioteca principal de Reveal, el plugin de Markdown y el tema CSS de Reveal en tu componente de Discourse.
### 3. Marp (Ecosistema de Presentación Markdown)
- **GitHub:** [marp-team/marp](https://github.com/marp-team/marp)
- **Cómo funciona:** Marp es el estándar moderno para diapositivas de Markdown, utilizando un concepto llamado “Directivas” para manejar el tema CSS directamente dentro del _frontmatter_ de Markdown.
- **Por qué encaja con Discourse:** Marp depende en gran medida de herramientas CLI y Node.js para la renderización. Sin embargo, ofrecen **Marpit** (`@marp-team/marpit`), el framework central que puede analizar Markdown y generar HTML/CSS. Implementar esto en Discourse requeriría que empaquetaras Marpit en un archivo JavaScript del lado del cliente usando una herramienta como Webpack o Rollup antes de subirlo como un componente de tema.
* * *
### Cómo implementar esto como un Componente de Tema de Discourse
Para reutilizar uno de estos (como Remark.js) en un componente de tema de Discourse, querrás usar la **API de Plugins de Discourse** para interceptar bloques específicos de Markdown antes de que se rendericen en la página.
Aquí hay un esquema de alto nivel de cómo puedes construirlo:
1. **Definir un Desencadenante:** Decide cómo los usuarios le dirán a Discourse que renderice las diapositivas. Una excelente manera es usar un lenguaje de bloque de código específico, como ````slides` o un _wrap_ de BBCode de Discourse como `[wrap=slides]`.
2. **Cargar la Biblioteca:** En el `about.json` de tu componente de tema, incluye el script externo para Remark.js o Reveal.js para que se cargue cuando el usuario visite el foro.
3. **Decorar el Contenido Cocinado:** Usa la API de JavaScript de Discourse (`api.decorateCookedElement`) para buscar tus bloques desencadenantes cada vez que se renderice una publicación.
4. **Renderizar:** Cuando la API encuentre un bloque ````slides`, oculta el bloque de código predeterminado, crea un nuevo contenedor `` e inicializa la biblioteca de diapositivas dentro de ese contenedor usando el texto sin procesar del bloque de código.
[/quote]
---
_[View the full topic](https://meta.discourse.org/t/how-to-make-a-slide-post/214026)._