repository·main·Indexed 20 days ago
https://github.com/mszturc/obsidian-advanced-slidesAn Obsidian plugin for creating, previewing, and exporting professional slide presentations using Markdown. Built on reveal.js, it integrates with the Obsidian ecosystem and supports various reveal.js plugins including Chalkboard for drawing, custom controls, menu systems, and Chart.js integration for data visualization.
Advanced Slides is an Obsidian extension designed to transform your Markdown notes into professional slide decks. It leverages reveal.js to provide a presentation experience directly within Obsidian.
Key Capabilities:
convention over configuration philosophy, allowing you to create slides simply by writing standard Obsidian Markdown syntax.A theme file must follow a specific four-step sequence to ensure variables and mixins are correctly applied. The order of operations is:
/css/theme/template/mixins.scss for shared utility functions./css/theme/template/settings.scss. This declares the custom variables required by the template. You can override these variables in the next step.settings.scss or adding custom CSS selectors and styles./css/theme/template/theme.scss. This template file generates the final CSS output based on the variables and styles defined in the previous steps.revealjs shortcode, you can define new slides within the enclosed Markdown using specific delimiters. Based on the documentation, standard horizontal rules (like ___ or ---) are used to separate slides.<split> tag allows you to divide slide content into rows and columns. You can control how elements are distributed using various attributes like even, gap, left/right proportions, and wrap behavior.The menu generates titles for slides using the following priority:
data-menu-title attribute: Use <section data-menu-title="My Title">..menu-title class: Use an element with the class menu-title inside the section.titleSelector: The plugin selects the first element matching the titleSelector option (default: headings).hideMissingTitles: true is set.Slide templates allow you to define unique layouts and structures that can be reused across a presentation, reducing boilerplate code.
Core Concepts:
.md notes stored anywhere in your Obsidian vault.<% variable_name %> syntax to define placeholders.<% content %> variable, even if it is not explicitly used, to receive the main slide content.::: variable_name ... :::).? to the variable name in the template (e.g., <%? footer %>).To create a slideshow within a single Markdown file, use specific delimiters to separate slides. This project supports both horizontal and vertical slide navigation:
---) to denote the start of a new horizontal slide.___) to denote the start of a vertical slide (typically used to present sub-information below a top-level horizontal slide).By combining these, you can create complex navigation structures.
The <grid> tag allows you to layout slide content in specific parts using a drag-and-drop mental model. You define the size of a content block with drag and its position with drop.
Basic Syntax:
<grid drag="width height" drop="x y">
50 100.px for pixel sizes.Coordinate System for drop:
<grid drag="60 55" drop="5 10" bg="red">
60 x 55
</grid>The Multiplex plugin allows a 'Master' presentation to control multiple 'Client' presentations in real time. As the presenter navigates slides on the Master, all connected Clients update automatically. This requires three components:
slideChanged events from the Master and broadcasts them to the Clients.You must generate a unique secret and id pair from your Socket.io server's token endpoint (e.g., http://your-server.com/token) to link the presentations.