🚧 ARCHIVED (2025-06-03):

This project was originally created as a demo and has served its initial purpose. Development is now on hold as workflows have shifted to other tools.

A migration from SCSS to native CSS is planned, but no timeline is set at the moment. Depending on team capacity and interest, a similarly focused template or project may be created in the future under a new name.

Note

• Migrating from SCSS to modern CSS (custom properties, container queries, native modules)
• Simplifies the stylesheets and leverages built-in browser features.

marpit-with-revealjs-sample

Currently, Marpit has not fully supported Reveal.js.
However, some functions are able to be implemented by writing Html in the Markdown file.
Indeed, this way sounds weird, but it works.

⚠︎ > [bg] does not work properly with MarpIt + Reveal.js

⚡︎ > transition in slides should be used Marpit directives, instead of data-transition in Reveal.js

Disclaimer

And this sample modified by pi2pie. This is a side project for experiencing how to let them work together and also how to make slides more efficiently.

---

Usage

First, clone this repo or use this template

git clone https://github.com/pi2pie/marpit-with-revealjs-sample.git

And remove the .git, and create your own.

$ cd marpit-with-revealjs-sample
$ rm -rf .git
$ git init
$ git add .
$ git commit -m 'init' -a

And then install packages.

$ yarn install

or

$ npm install

And the slides contents could be changed.
Get into src/slides.md
Modify this file, write the contents what you like.

Preview the slides.

$ npm run start

Build the slides in dist/*

$ npm run build

[!WARNING] > In slides.md, if you change styles instead of contents, run npm run build first. For this, the result would be the correct styles you set in your slides.md.

styles: your css class name or inline style.

Combined

$ npm run pack

This command would run build and start.

---

Structure

./src
├── app.js
├── assets
│   └── DocIconP.svg
├── contents
│   └── slides.md
├── css
│   ├── fonts.css
│   ├── light.css
│   ├── styles.css
│   └── utils-css /
├── index.html
└── plugins
    ├── auto-animate.js
    └── transition.js

This is the files structure.
assets/ directory is for media files, put your images or videos here.

// src/app.js
<!-- promo banner -->

<div class="promo-banner">
<a class="promo-link" href="/" rel="noopener noreferrer">
<img src="./assets/DocIconP.svg" alt=""></a>
</div>

And also, in app.js, the promo-banneruse ./assets/DocIconP.svg as Logo.
This one could be changed, it is just like a placeholder.

css: There is the utility-first css for the design concept here.