Find the classic beamer outdated? Are your students losing focus due to it? 💤
I'm not sure how to solve the last one, but this theme is my attempt to address the first issue: too many a new presentation look decades old due to the classic look of beamer.
Note
Marp is a presentation framework that allows users to create presentations with Markdown and CSS. While this theme relies on Marp to be used, it is not directly affiliated with or sponsored by it.
Inspired by, but not affiliated with or sourced from, the Marp beam theme made by rnd195. As mentioned, I have not used any of their code to create this theme.
Important
None of the following is legal advice. Consult a professional. This theme uses free-to-use fonts, and should be okay for personal use, but do conduct your own research before hosting any large presentation with it.
Consider the license of this project as well, and Marp itself.
All fonts used in the theme by default are imported from Google Fonts. Consider the privacy aspects of this yourself and choose wheter you want local installs of them or not. This was a choice made to enable direct linking of the theme to work.
🔴 Live preview 🔴
Live previews for the other color schemes further down!
| NEObeam | beamer |
|---|---|
 |
Image on the right courtesy of latextemplates.com. Will eventually be replaced by my own.
| Math | Code |
|---|---|
 |
 |
| Images | Tables |
|---|---|
 |
 |
Note
This is optionally enabled! See features & quirks.
Click on the theme to see a live preview
| Theme | Based on |
|---|---|
| neobeam | |
| neobeam-beamer | beamer color scheme |
| neobeam-dsek | LTH D-sektionen design profile |
| neobeam-csek | LTH C-sektionen design profile |
| neobeam-lund | Lund University design profile |
More are available in the repo!
| Default | beamer theme | LTH D-sektionen | LTH C-sektionen | LTH/Lund University |
|---|---|---|---|---|
|
 |
 |
 |
 |
Note
Until a future timepoint, I won't provide a guide on how to use it with Marp CLI, as I expect CLI users to be technical enough to know how to do this.
- Git or zip
- Visual Studio Code
- Marp Extension for Visual Studio Code
Tip
This font by default uses the fonts Roboto, Roboto Mono (for code) and Noto Sans Math (for math). These are imported in the CSS file, but you can aquire them yourself too, or change them out. In the LTH C-sektionen and D-sektionen themes, Roboto is switched out for Helvetica.
- Download or copy the neobeam.css (or specific theme) file into your project OR use the direct link.
- Add it to your VSCode settings by editing your
.vscode/settings.jsonfile and appending:
//...
{
"markdown.marp.themes": [
//...
"path/to/neobeam.css"
//...
]
}
//...where path/to/neobeam.css is either local, for example css/neobeam.css or the direct link to the repo's CSS file, ex: https://raw.githubusercontent.com/mikael-ros/neobeam/main/css/neobeam.css. Keep in mind that using the direct link might cause your presentation to change over time and it's best you have a local copy instead.
- Add it to your Marp presentation by adding:
marp: true
theme: neobeam
paginate: true
math: katex
footer: '**Author**
**Title**
**Conference/course/e.t.c.**'The theme names are written as presented in the table in the previews section.
Simply clone or fork this repo or download the release. If you wish, you can delete the previews folder.
All themes are registered and ready in the template.
Most things work like you'd expect, but there are some quirks to keep the cogs turning.
I opted not to always treat the first slide as a title slide, so to declare a slide (any slide actually) a title slide, add the following before the content: <!-- _class: title -->.
Heres an example of a title slide. As long as you follow as similar format it should work. Theres also an optional logo slot for a University logo or similar.
<!-- _class: title -->
# Title
## Author
> ### Faculty
> University
## Conference/course/e.t.c.
Instead of defininig a static header, one gets created by the first H1 (single #) in the slide.
Note
This is currently deprecated, but will come back in some form soon.
Every page has a footer. It's made from the footer content defined in the beginning of the presentation markdown, and the sections are split by using ** (to create children objects). The footer is a flex-box and I've made it split itself into three sections. You could likely with some modifications change this fairly easily.
I've opted to use KaTeX, and have not styled for other options yet.
To make LaTeX style bubble definitions I've had to do a slight work around to avoid using HTML in Marp. To define a definition, write the following:
> #### Definition title
> Definition descriptionThe first 3 of these will have unique colors, but after that all of them will have the same. If you wish to add more, change the CSS-file around the blockquote:nth-of-type part of the stylesheet.
This stylesheet supports adding a tag in the alt text for left, center and right alignment. To define this, you would write something like: . Do note this might cause issues when using these words in your alt text in a normal sentence.
There is light HTML support, including the elements:
<mark>(highlighting)<q>(inline quotes)<var>(variables)<samp>(code output)<audio>(audio)<abbr>(abbreviations).
To enable HTML support add or modify the line "markdown.marp.enableHtml": true in .vscode/settings.json.
Warning
Considering the security issues mentioned in Marps documentation, this is disabled by default, even in the template. You may need to restart Visual Studio Code after changing the setting. You will need to export in HTML for interactive elements to function.
Feel free to contribute 💙
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent