A dark theme for Marp / Marpit slides ecosystem using the Cybertopia Saturated highlight.js theme.
🗒️ | 📷 |
---|---|
Example of title page with image | |
Example of text | |
Example of code block |
After the installation is complete, your slide frontmatter should at least contain this:
---
marp: true
theme: cybertopia
class: invert
---
- You already have Marp for VS Code installed.
- Open VS Code settings (CTRL + ,).
- Search
markdown.marp.themes
and clikcAdd element
. - Add this link: https://raw.githubusercontent.com/noraj/cybertopia-marp/master/themes/cybertopia.css.
Alternatively, you can also edit .vscode/settings.json
on a per project basis, and add this if the theme was copied locally…
{
"markdown.marp.themes": [
"./themes/cybertopia.css"
]
}
… or this if you want to fetch the theme remotly:
{
"markdown.marp.themes": [
"https://raw.githubusercontent.com/noraj/cybertopia-marp/master/themes/cybertopia.css"
]
}
To use the theme with Marp CLI:
- Either clone the repository somewhere
https://github.com/noraj/cybertopia-marp.git
or download a Github ZIP archive and uncompress it. - Copy
themes/cybertopia.css
file to your marp project. - When using the Marp CLI, you may have to specify the theme you are using with the
--theme cybertopia.css
option.
For example, on this repository:
- Live rendering:
marp ./slides.md -s -I ./
- Generate HTML:
marp ./slides.md --theme-set ./themes -o index.html
- Generate PDF:
marp ./slides.md --theme-set ./themes --pdf --allow-local-files
Demo slideshow: https://noraj.github.io/cybertopia-marp/