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

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.

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.

$ npm run pack

This command would run build and start.

./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.