{"id":18127931,"url":"https://github.com/mikael-ros/neobeam","last_synced_at":"2025-04-11T06:32:21.828Z","repository":{"id":227840966,"uuid":"770308991","full_name":"mikael-ros/neobeam","owner":"mikael-ros","description":"A modern take on the LaTeX beamer theme, for Marp","archived":false,"fork":false,"pushed_at":"2024-12-04T20:20:36.000Z","size":58412,"stargazers_count":31,"open_issues_count":4,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T04:26:35.576Z","etag":null,"topics":["beamer","css","html","latex","markdown","marp","marp-themes","neobeam"],"latest_commit_sha":null,"homepage":"https://mikael-ros.github.io/neobeam/neobeam","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mikael-ros.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"embracket"}},"created_at":"2024-03-11T10:29:33.000Z","updated_at":"2025-03-09T00:51:06.000Z","dependencies_parsed_at":"2024-03-17T13:43:45.428Z","dependency_job_id":"e170d82d-1be7-4f15-aa9b-55312369deab","html_url":"https://github.com/mikael-ros/neobeam","commit_stats":null,"previous_names":["mikael-ros/neobeam"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikael-ros%2Fneobeam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikael-ros%2Fneobeam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikael-ros%2Fneobeam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikael-ros%2Fneobeam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mikael-ros","download_url":"https://codeload.github.com/mikael-ros/neobeam/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248355339,"owners_count":21089995,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["beamer","css","html","latex","markdown","marp","marp-themes","neobeam"],"created_at":"2024-11-01T10:00:37.524Z","updated_at":"2025-04-11T06:32:21.794Z","avatar_url":"https://github.com/mikael-ros.png","language":"CSS","funding_links":["https://ko-fi.com/embracket","https://ko-fi.com/Z8Z212GZR6'"],"categories":["Themes"],"sub_categories":["Community themes"],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg style=\"background-color: transparent\" src=\"assets/neobeam.svg\"\u003e\n\u003c/p\u003e\n\n[![Mentioned in Awesome Marp](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/marp-team/awesome-marp)\n\n## ✨️A modern take on LaTeX beamer \n### A Marp theme\n\nFind the classic beamer outdated? Are your students losing focus due to it? 💤\n\nI'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.\n\n\u003e [!NOTE]\n\u003e _[Marp](https://marp.app/) is a presentation framework that allows users to create presentations with Markdown and CSS._\n\u003e\n\u003e Inspired by, but not affiliated with or sourced from, the Marp [beam theme made by rnd195](https://github.com/rnd195/my-marp-themes). As mentioned, I have not used any of their code to create this theme.\n\n\u003ca href='https://ko-fi.com/Z8Z212GZR6' target='_blank'\u003e\u003cimg height='60' style='border:0px;height:60px;' src='https://storage.ko-fi.com/cdn/kofi1.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /\u003e\u003c/a\u003e\n\n#### Disclaimer\n\n\u003e [!IMPORTANT]\n\u003e **None of the following is legal advice. Consult a professional**.\n\u003e 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.\n\u003e\n\u003e Consider the [license](LICENSE) of this project as well, and Marp's license itself.\n\u003e\n\u003e 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.\n\n---\n## 📺 Previews\n### 🔴 [Live preview](https://mikael-ros.github.io/neobeam/neobeam) 🔴\n\u003e Live previews for the other color schemes further down!\n\n### Static previews\nN\u003csub\u003eE\u003c/sub\u003eObeam            |  beamer\n:-------------------------:|:-------------------------:\n![Neobeam](previews/neobeam/neobeam-0.png)  |  ![Beamer](https://www.latextemplates.com/actions/action_fetch_template_image?image=1\u0026template=beamer-presentation)\n\nImage on the right courtesy of [latextemplates.com](https://www.latextemplates.com). Will eventually be replaced by my own.\n\n#### Main title\n![Main title preview](previews/neobeam/neobeam-0.png)\n#### A slide with text\n![Text title preview](previews/neobeam/neobeam-2.png)\n#### Science slides\nMath            |  Code\n:-------------------------:|:-------------------------:\n![Math](previews/neobeam/neobeam-4.png)  |  ![Code](previews/neobeam/neobeam-3.png)\n### Special elements\nImages            |  Tables\n:-------------------------:|:-------------------------:\n![Images](previews/neobeam/neobeam-6.png)  |  ![Tables](previews/neobeam/neobeam-5.png)\n#### HTML styling\n\u003e [!NOTE]\n\u003e This is optionally enabled! See features \u0026 quirks.\n\n![HTML styling](previews/neobeam/neobeam-7.png)\n\n### 🖌️ Theme versions\n\u003e Click on the theme to see a live preview\n\nTheme | Based on\n:----:|:--------:\n[neobeam](https://mikael-ros.github.io/neobeam/neobeam)|\n[neobeam-beamer](https://mikael-ros.github.io/neobeam/beamer) | beamer color scheme\n[neobeam-dsek](https://mikael-ros.github.io/neobeam/dsek) | [LTH D-sektionen design profile](https://www.dsek.se/en/documents/governing)\n[neobeam-csek](https://mikael-ros.github.io/neobeam/csek) | [LTH C-sektionen design profile](https://www.dsek.se/en/documents/governing)\n[neobeam-lund](https://mikael-ros.github.io/neobeam/lund) | [Lund University design profile](https://www.medarbetarwebben.lu.se/stod-och-verktyg/kommunikation-och-grafisk-profil/grafisk-profil-och-logotyp)\n\n#### Some static previews\n\u003e More are available in the repo!\n\n Default | beamer theme | LTH D-sektionen | LTH C-sektionen | LTH/Lund University \n:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:\n ![Neobeam](previews/neobeam/neobeam-0.png) | ![Beamer](previews/beamer/beamer-0.png) | ![D-sek](previews/dsek/dsek-0.png) | ![D-sek](previews/csek/csek-0.png) | ![Lund](previews/lund/lund-0.png)\n\n---\n\n## ⌨️ Usage\n\u003e [!NOTE]\n\u003e 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. You can read the [Marp CLI documentation here](https://github.com/marp-team/marp-cli), and inspect the [preview creation script](/example/create-previews.sh) for some examples.\n### 🛠 Prerequisites\n- Git or zip\n- Visual Studio Code\n- Marp Extension for Visual Studio Code\n\n\u003e [!TIP]\n\u003e This theme 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.\n\n\u003e [!WARNING]\n\u003e For reasons beyond my comprehension, it is necessary to use different notation for ``hsl`` in CSS in the Marp VS code preview as compared to the build version sometimes. To mitigate this I have added a ``build-multiplier`` variable to the CSS files. Set this to ``1`` when necessary, otherwise ``100``.\n\n#### 📥 In an existing presentation\n1. 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.\n2. Add it to your VSCode settings by editing your ``.vscode/settings.json`` file and appending:\n```json\n  //...\n  {\n      \"markdown.marp.themes\": [\n          //...\n          \"path/to/neobeam.css\"\n          //...\n      ]\n  }\n  //...\n```\nwhere ``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.\n\n3. Add it to your Marp presentation by adding:\n```markdown\nmarp: true\ntheme: neobeam\npaginate: true\nmath: katex\nfooter: '**Author**\n         **Title**\n         **Conference/course/e.t.c.**'\n```\nThe theme names are written as presented in the table in the previews section.\n4. Change ``build-multiplier`` to ``1``, if the preview looks wrong. Do not forget to change it back before you build.\n\n\u003e If you are, against all odds, using more than 1000 slides, and the pagination wraps, go into [``neobeam.css``](css/neobeam.css) and modify ``section::after``'s ``width``, and correspondingly the ``--pagination-space`` in ``footer \u003e *:last-child``.\n\n#### ✨️ As a template\nSimply clone or fork this repo or download the release. If you wish, you can delete the previews folder. \n\nAll themes are registered and ready in the template.\n\n---\n\n## 🪄 Features \u0026 quirks\nMost things work like you'd expect, but there are some quirks to keep the cogs turning.\n### Theming\nIt is since v0.5 very easy to change the theme. There are now simple variables in each CSS file, where it adjusts the colors and everything else completely automatically. \n\n### Title slide\nI 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: ``\u003c!-- _class: title --\u003e``. \n\nHeres 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.\n```html,markdown\n\u003c!-- _class: title --\u003e\n# Title\n\n## Author\n\n\u003e ### Faculty\n\u003e University\n\n## Conference/course/e.t.c.\n\n![logo Logo](path/to/logo)\n```\n\nLike other images, the logo can be assigned left side too.\n\n### Footers\nEvery 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.\n### Math\nI've opted to use KaTeX, and have not styled for other options yet.\n### Definitions\nTo 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:\n```markdown\n    \u003e #### Definition title\n    \u003e Definition description\n```\nThe 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.\n### Image alignment\nThis 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.\n### HTML support\nThere is light HTML support, including the elements:\n- ``\u003cmark\u003e`` (highlighting)\n- ``\u003cq\u003e`` (inline quotes)\n- ``\u003cvar\u003e`` (variables)\n- ``\u003csamp\u003e`` (code output)\n- ``\u003caudio\u003e`` (audio)\n- ``\u003cabbr\u003e`` (abbreviations).\n\nTo enable HTML support add or modify the line ``\"markdown.marp.enableHtml\": true`` in ``.vscode/settings.json``. \n\n\u003e [!WARNING] \n\u003e Considering the [security issues mentioned in Marps documentation](https://github.com/marp-team/marp-vscode#enable-html-in-marp-markdown-%EF%B8%8F), 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.\n\n---\n\n**Feel free to contribute** 💙\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikael-ros%2Fneobeam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikael-ros%2Fneobeam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikael-ros%2Fneobeam/lists"}