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.

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

Click on the theme to see a live preview

More are available in the repo!

Default	beamer	LTH D-sektionen

LTH C-sektionen	LTH/Lund University	Embracket

Neonbeam	Oldenbeam	Ecobeam

• Git or zip
• Visual Studio Code
• Marp Extension for Visual Studio Code

1. Download or copy the neobeam.css file into your project OR use the direct link. If using specific themes, do remember they are dependent on the base theme.
2. Add it to your VSCode settings by editing your .vscode/settings.json file 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. When you are using any derivative theme, you also need to import the base neobeam theme.

3. 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. 4. Change build-multiplier to 1, if the preview looks wrong. Do not forget to change it back before you build.

If you are, against all odds, using more than 1000 slides, and the pagination wraps, go into neobeam.css and modify section::after's width, and correspondingly the --pagination-space in footer > *:last-child.

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.

This theme has some variables for easier tweaking, aiding inexperienced users and power-users alike.

You can use any of these variables to easily change most things about the theme. The direct variables are meant for easy tweaking, whereas the dependent variables are not necessarily meant to be referenced. Deeper customization can be achieved by modifying the CSS itself.

These variables are meant to be set by the user, and have snowball effects.

These variables set themselves automatically through using the previously described direct variables, but you can also edit them manually.

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.

![logo Logo](path/to/logo)

Like other images, the logo can be assigned left side too.

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 description

The 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: ![left (rest of the alt text)](path/to/image). 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.html": true in .vscode/settings.json (or globally).

Feel free to contribute 💙