Obsidian Slides Extended

https://www.ebullient.dev/projects/obsidian-slides-extended
Admin
An open-source Obsidian plugin that enables the creation of reveal.js based presentations directly...
Tokens:22,537
Snippets:250
Trust Score:6.5
Update:8 months ago
Show doc for...
Tokens:
Raw
### Obsidian Charts Example for Slides Extended

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/charts

Demonstrates the syntax for creating a bar chart using the Obsidian Charts plugin within Slides Extended. This requires the Obsidian Charts plugin to be installed and configured.

```markdown
```chart
    type: bar
    labels: [Monday,Tuesday,Wednesday,Thursday,Friday, Saturday, Sunday, "next Week", "next Month"]
    series:
      - title: Title 1
        data: [1,2,3,4,5,6,7,8,9]
      - title: Title 2
        data: [5,4,3,2,1,0,-1,-2,-3]
    ```
```

--------------------------------

### Charts Support HTML Example (Reveal.js Charts)

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax

Demonstrates how to embed charts using Reveal.js Charts plugin syntax within an HTML canvas element. This example shows a line chart configuration.

```html
<canvas data-chart="line" >
<!--
{
 "data": {
  "labels": ["January"," February"," March"," April"," May"," June"," July"],
  "datasets":[
   {
    "data":[65,59,80,81,56,55,40],
    "label":"My first dataset","backgroundColor":"rgba(20,220,220,.8)"
   },
   {
    "data":[28,48,40,19,86,27,90],
    "label":"My second dataset","backgroundColor":"rgba(220,120,120,.8)"
   }
  ]
 }
}
-->
</canvas>

```

--------------------------------

### Charts Support Markdown Example (Obsidian Charts)

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax

Provides an example of using the Obsidian Charts plugin syntax within Markdown to create bar charts for presentations. It specifies chart type, labels, and series data.

```markdown
```chart
    type: bar
    labels: [Monday,Tuesday,Wednesday,Thursday,Friday, Saturday, Sunday, "next Week", "next Month"]
    series:
      - title: Title 1
        data: [1,2,3,4,5,6,7,8,9]
      - title: Title 2
        data: [5,4,3,2,1,0,-1,-2,-3]
    ```

```

--------------------------------

### Obsidian Note and Slide Markdown Examples

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/basic-syntax/embeds

Demonstrates how to create notes and slides using Obsidian's Markdown syntax. The 'Obsidian.md' file contains basic note content and a link, while 'Slide.md' shows how to embed content from other notes using `![[NoteName]]` and `![[NoteName#Heading]]`.

```markdown
# Notes about Obsidian
A knowledge base that works on local Markdown files

# Link
Link to Obsidian Homepage: http://obsidian.md

```

```markdown
![[Obsidian]]

---

![[Obsidian#Link]]

```

--------------------------------

### Markdown Blockquote Example

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/basic-syntax/blockquotes

This snippet demonstrates the standard Markdown syntax for creating a blockquote, which is used to visually set apart quoted text. It includes a citation.

```markdown
> Human beings face ever more complex and urgent problems, and their effectiveness in dealing with these problems is a matter that is critical to the stability and continued progress of society.

\- Doug Engelbart, 1961

```

--------------------------------

### Excalidraw Support Markdown Example

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax

Shows how to embed Excalidraw diagrams into Obsidian Slides using Markdown. It supports embedding SVG or PNG files with specified dimensions.

```markdown
#### Excalidraw support

![[Sample.excalidraw|100]]

![[Sample.excalidraw]] <!-- element style="width:300px; height:400px" -->

```

--------------------------------

### Slide Animation Markdown Example

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax

Illustrates how to enable automatic animation between adjacent slides in Obsidian Slides by adding the `data-auto-animate` attribute to slide annotations.

```markdown
<!-- .slide: data-auto-animate -->
# Title

---
<!-- .slide: data-auto-animate -->

# Title
##### **Subtitle**
###### *Author - 2022*

```

--------------------------------

### Mermaid Gitgraph Diagram Example

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/basic-syntax/mermaid

This snippet shows how to include a Gitgraph diagram using Mermaid syntax in Obsidian Slides. It illustrates basic Git operations like commits, branches, and merges.

```markdown
---
theme: beige
highlightTheme: css/vs2015.css
---

## Gitgraph Diagrams support

```mermaid
    gitGraph
       commit
       commit
       branch develop
       checkout develop
       commit
       commit
       checkout main
       merge develop
       commit
       commit
```
```

--------------------------------

### Split Component Examples - Obsidian Slides Extended

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/layout

Demonstrates the usage of the `<split>` component for arranging content in rows and columns. Supports attributes like 'even' for equal distribution, 'gap' for spacing, 'left'/'right' for proportional sizing, and 'wrap' to control row breaks. The 'no-margin' attribute removes automatic gaps.

```html
<split even>

![](https://picsum.photos/id/1005/250/250)

![](https://picsum.photos/id/1010/250/250)

![](https://picsum.photos/id/1025/250/250)

</split>
```

```html
<split even gap="3">

**Lorem Ipsum** is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap

into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem

</split>
```

```html
<split left="2" right="1" gap="2">

**Lorem Ipsum** is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap

into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem

</split>
```

```html
<split wrap="4">

![](https://picsum.photos/id/1010/250/250)

![](https://picsum.photos/id/1011/250/250)

![](https://picsum.photos/id/1012/250/250)

![](https://picsum.photos/id/1013/250/250)

![](https://picsum.photos/id/1014/250/250)

![](https://picsum.photos/id/1015/250/250)

</split>
```

```html
<split wrap="3" no-margin>

![](https://picsum.photos/id/1001/250/250)

![](https://picsum.photos/id/1002/250/250)

![](https://picsum.photos/id/1003/250/250)

![](https://picsum.photos/id/1004/250/250)

![](https://picsum.photos/id/1005/250/250)

![](https://picsum.photos/id/1006/250/250)

![](https://picsum.photos/id/1009/250/250)

![](https://picsum.photos/id/1008/250/250)

</split>
```

--------------------------------

### Specify Custom Highlight Theme Path in Frontmatter

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/themes

This example shows how to reference a custom CSS highlight theme file from your configured theme directory. The 'highlightTheme' property in the frontmatter points to the relative path of your custom highlight theme.

```markdown
---
highlightTheme: css/github.css
---
```

--------------------------------

### Display and Inline Math Rendering in Obsidian Slides Extended

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/basic-syntax/math

This snippet shows how to use LaTeX syntax for mathematical expressions in Obsidian Slides Extended. It includes an example of a display-style matrix equation and an inline mathematical expression. Ensure your environment supports MathJax or a similar rendering engine for these to display correctly.

```markdown
```
$$\begin{vmatrix}a & b\\
c & d
\end{vmatrix}=ad-bc$$

You can also do inline math like $s^{-2}_{n}\sum_{i=1}^{n}$
```
```

--------------------------------

### Mermaid Sequence Diagram Example

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/basic-syntax/mermaid

This snippet demonstrates how to embed a Mermaid sequence diagram within an Obsidian Slide. It requires the Mermaid syntax to be correctly formatted within a code block.

```markdown
---
theme: beige
highlightTheme: css/vs2015.css
---

```mermaid
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
```
```

--------------------------------

### Style Font Awesome Icons in Obsidian Slides

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/fontAwesome

Provides examples of using HTML and custom shortcodes to display and style Font Awesome icons within Obsidian Slides. This allows for more granular control over icon appearance, such as color and size.

```html
HTML Synthax

 	<i color="coral" class="fas fa-envelope fa-4x"/>

ShortCode Synthax

	:fas_envelope:
```

--------------------------------

### Specify Custom Theme Path in Frontmatter

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/themes

This example shows how to reference a custom CSS theme file located within your Obsidian vault. The 'theme' property in the frontmatter points to the relative path of your custom theme file.

```markdown
---
theme: css/my-theme.css
---
```

--------------------------------

### Auto-Animate Slides with Data Attribute

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/slideAnimation

This example demonstrates how to enable automatic animation between two adjacent slides in Obsidian Slides. By adding the 'data-auto-animate' attribute to both slide annotations, matching elements will be animated by the Auto-Animate feature.

```html
<!-- .slide: data-auto-animate -->
# Title

---
<!-- .slide: data-auto-animate -->

# Title
##### **Subtitle**
```

--------------------------------

### Create First Slide Content - Markdown

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/getting-started/firstSteps

This code snippet demonstrates the basic Markdown structure required to create the first slide (cover page) and a subsequent slide in Obsidian Slides Extended. It involves using a heading for the cover page and a horizontal rule to separate slides.

```markdown
#### Hello from Cover Page

---

Greetings from second Slide
```

--------------------------------

### Basic Text Styling with Markdown

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/basic-syntax/textStyle

Demonstrates how to use Markdown syntax for italic, bold, and combined text styles. Also shows how to use strikethrough and highlighting. Comments are also shown.

```markdown
*This text will be italic*

_This will also be italic_

**This text will be bold**

__This will also be bold__

%%This is a Comment(Can't see it)%%

_You **can** combine them_

---

Any word wrapped with two tildes (like ~~this~~) will appear crossed out.

Any word wrapped with two equal signs (like ==this==) will appear as highlighted.
```

--------------------------------

### Obsidian Slides Extended: Block Comment Syntax

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/blockComment

Demonstrates the basic syntax for using block comments in Obsidian Slides Extended. The ':::' syntax defines a block, and content within it is grouped. Annotations can be added to the opening ':::' to apply properties to the entire block.

```markdown
::: block

#### Header
_and_
Paragraph content
*in same block*

:::

---

no color

::: block <!-- element style="background-color: red;" -->

everything inside this block has red background color

::: block <!-- element style="background-color: blue;" -->

blue

::: 

red

:::

no color
```

--------------------------------

### Distribute Space Between Grid Children

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/layout/grid

The 'justify-content' property for the grid component manages the distribution of space between and around child elements. It accepts values such as 'start', 'center', 'space-between', 'space-around', 'space-evenly', and 'end'. The default value is 'space-evenly'.

```html
<grid  drag="width height" drop="x y" justify-content="type">

```

```html
<grid drag="30 100" drop="left" justify-content="center" bg="red">
Item 1

Item 2

Item 3

Item 4
</grid>

<grid drag="30 100" drop="center" justify-content="space-between" bg="green">
Item 1

Item 2

Item 3

Item 4
</grid>

<grid drag="30 100" drop="right" justify-content="space-around" bg="coral">
Item 1

Item 2

Item 3

Item 4
</grid>

```

--------------------------------

### Apply an Advanced Slide Template (Markdown)

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/templates

This Markdown snippet demonstrates how to use the 'tpl-con-2-1-box' template in a presentation. It sets up the presentation theme and then uses block comments (::: title, ::: left, etc.) to populate the template's sections with specific content.

```markdown
---
theme: consult
height: 540
margin: 0
maxScale: 4
---
<!-- slide template="[[tpl-con-2-1-box]]" -->

::: title
### _**This is the Title of this Slide**_
:::

::: left
![[Image.jpg|1500]]
:::

<style>
.small-indent > ul {
   padding-left: 1em;
}
</style>

::: right
**Header #1**
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- tium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequa
- augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit a
- Nam quam nunc
Umsetzungsschritte
**Header #2**
- Curabitur
- condimentum
- Maecenas
**Header #3**
- justo
- rhoncus
- semper

:::<!-- element align="left" style="font-size: 13px;" class="small-indent" -->

::: source
###### Source: Copied from Lorem ipsum dolor Generator
:::

```

--------------------------------

### Markdown Headings

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/basic-syntax/heading

Demonstrates the use of Markdown's heading syntax, from H1 to H6, to structure content. This is a standard Markdown feature applicable across many platforms.

```markdown
# This is a heading 1
## This is a heading 2
### This is a heading 3
#### This is a heading 4
##### This is a heading 5
###### This is a heading 6
```

--------------------------------

### Annotate Slides with Style and Class (HTML)

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/slideAnnotations

Demonstrates how to use HTML comment tags to apply 'style' or 'class' attributes to an entire slide. This allows for global styling of slide content, such as setting background colors. The syntax is `<!-- .slide: attribute="value" -->` placed before the slide content.

```html
<!-- .slide: style="background-color: coral;" -->

# Header with coral background color

Paragraph has coral background color, too!

---

<!-- .slide: style="background-color: green;" -->

- All Bullet points
- have green
- background color
```

--------------------------------

### Set Global Slide Backgrounds with Frontmatter (YAML)

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/slideBackground

Illustrates how to set a background for all slides in a presentation using YAML frontmatter. This method supports color names, hex codes, and RGB values. It also shows how to set a transparent background.

```yaml
---
bg: red
---

```

```yaml
---
bg: '#ff0000'
---

```

```yaml
---
bg: rgb(70, 70, 255)
---

```

```yaml
---
bg: transparent
---

```

--------------------------------

### Apply a Simple Slide Template (Markdown)

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/templates

This Markdown snippet shows how to apply the 'tpl-footer' slide template in a presentation. It uses a slide annotation to specify the template and then defines content for the main section and the footer.

```markdown
<!-- slide template="[[tpl-footer]]" -->

# This header will be part of the content section defined in the template

Everything define outside a block will be placed in the content section.
Therefore every template has to contain at least a content variable.

To place a text into the footer section you have to create a block comment with the name of the variable you defined in the template.

::: footer
#### This header will be placed in the footer section of the template
:::

```

--------------------------------

### Markdown for Horizontal and Vertical Slides

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/slides

Demonstrates the markdown syntax for creating horizontal slides using '---' and vertical slides using '--', both surrounded by blank lines. This is the basic method for structuring slides.

```markdown
# Slide 1

---

# Slide 2.1

--

# Slide 2.2

```

--------------------------------

### Annotate Slides with Style or Class Properties

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax

Apply style or class properties to an entire slide by annotating it with `<!-- .slide: ... -->`. This is useful for setting background colors or applying consistent styling across slide elements.

```markdown
<!-- .slide: style="background-color: coral;" -->

# Header with coral background color

Paragraph has coral background color, too!

---

<!-- .slide: style="background-color: green;" -->

- All Bullet points
- have green
- background color

```
```

--------------------------------

### Embed Excalidraw Diagrams in Obsidian Slides

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/excalidraw

Demonstrates how to embed Excalidraw diagrams within Obsidian Slides Extended presentations. Requires enabling 'Auto-Export SVG / PNG' in Excalidraw settings. Supports specifying dimensions for the embedded diagram.

```markdown
#### Excalidraw support

![[Sample.excalidraw|100]]

![[Sample.excalidraw]] <!-- element style="width:300px; height:400px" -->
```

--------------------------------

### Basic Fragment Usage in HTML

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/fragments

Demonstrates how to use the 'fragment' class to make elements appear incrementally on a slide. Different classes can be appended to modify the default fade-in behavior.

```html
<!-- Fade in -->
<element class="fragment">

<!-- Fade out -->
<element class="fragment fade-out">

<!-- Highlight red -->
<element class="fragment highlight-red">

<!-- Fade in, then out -->
<element class="fragment fade-in-then-out">

<!-- Slide up while fading in -->
<element class="fragment fade-up">
```

--------------------------------

### Element Annotations Syntax - Markdown

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/classes

Demonstrates the syntax for applying element annotations directly within Markdown content. These annotations allow for styling text with borders, backgrounds, and custom attributes using HTML-like comments.

```markdown
text with border <!-- element class="with-border" -->

text with background <!-- element style="background:blue" -->

text with attribute <!-- element data-toggle="modal" -->
```

--------------------------------

### Positioning Grid Content by Coordinates - HTML

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/layout/grid

Demonstrates positioning grid elements using absolute coordinates. Positive 'x' values position from the left, negative 'x' from the right. Positive 'y' values position from the top, negative 'y' from the bottom. Allows for precise placement of content blocks.

```html
<grid drag="60 55" drop="5 10" bg="red">
60 x 55
</grid>

<grid drag="25 55" drop="-5 10" style=bg="green">
25 x 55
</grid>

<grid drag="90 20" drop="5 -10" bg="gray">
90  x 20
</grid>
```

--------------------------------

### Embed HTML Video Tag in Obsidian Slides

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/basic-syntax/video

Demonstrates how to insert a video into an Obsidian slide using the HTML `<video>` tag. This method allows for basic playback controls and source specification. No external libraries are required, only standard HTML.

```html
<video data-autoplay controls><source src="Attachments/my_video_file.mp4" type="video/mp4"></video>
```

--------------------------------

### Configure Mermaid Diagrams in Obsidian Slides Extended

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/basic-syntax/mermaid

This code snippet demonstrates how to configure Mermaid diagrams by overriding default settings. It shows how to set theme variables, such as font size, and specify a theme like 'forest'. This configuration is applied via the `mermaid` property in the frontmatter.

```yaml
mermaid:
  themeVariables:
    fontSize: 32px
  theme: 'forest'
```

```markdown
---
mermaid:
  themeVariables:
    fontSize: 32px
  theme: 'forest'
---
```

--------------------------------

### Activate Highlight Theme in Frontmatter

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/themes

This code demonstrates how to set a specific highlight theme for code blocks using the 'highlightTheme' property in the frontmatter. This controls the syntax highlighting appearance.

```markdown
---
highlightTheme: monokai
---
```

--------------------------------

### Positioning Grid Content by Name - HTML

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/layout/grid

Illustrates using predefined named positions for convenience in placing grid elements. Common positions like 'topleft', 'right', and 'bottom' can be used instead of explicit coordinates, simplifying layout adjustments.

```html
<grid drag="40 30" drop="topleft" bg="red">
Top Left
</grid>

<grid drop="right" bg="green">
Right with default size
</grid>

<grid drag="80 30" drop="bottom" bg="coral">
Bottom
</grid>
```

--------------------------------

### Include Custom CSS Files in Obsidian Slides

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/inlineStyling

Demonstrates how to specify additional CSS files to be included in your slide deck. These files are loaded relative to the theme directory or plugin folder, allowing for custom styling beyond the default theme.

```yaml
---
css: [css/layout.css,css/customFonts.css]
---
```

--------------------------------

### Define a Simple Slide Template (Markdown)

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/templates

This Markdown snippet defines a basic slide template named 'tpl-footer'. It includes a content area and a footer section, demonstrating how to structure reusable slide components.

```markdown
<% content %>

<grid drag="100 6" drop="bottom">
<% footer %>
</grid>

```

--------------------------------

### Code Block with Line Highlighting (JavaScript)

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/basic-syntax/codeBlocks

This code block demonstrates how to use syntax highlighting for JavaScript code, along with specific line highlighting for different slides. The `[1-2|3|4]` notation indicates that lines 1-2 will be highlighted on the first slide, line 3 on the second, and line 4 on the third. This feature is useful for drawing attention to specific parts of the code during a presentation.

```javascript
```js [1-2|3|4]
let a = 1;
let b = 2;
let c = x => 1 + 2 + x;
c(3);
```
```

--------------------------------

### Activate Built-in Theme in Frontmatter

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/themes

This snippet demonstrates how to specify a theme for your slides by adding the 'theme' property to the frontmatter of your Markdown file. The theme name corresponds to one of the built-in themes.

```markdown
---
theme: night
---
```

--------------------------------

### Load Remote Theme via URL in Frontmatter

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/themes

This snippet illustrates how to use a theme hosted online by providing its direct URL in the 'theme' property within the frontmatter. This allows for easy integration of external themes.

```markdown
---
theme: https://revealjs-themes.dzello.com/css/theme/robot-lung.css
---
```

--------------------------------

### Group Content with Block Comments and Annotations

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax

Use block comments with the `:::` syntax to group content. Annotating a block with `<!-- element style="..." -->` applies the specified styles to all content within that block.

```markdown
:::

#### Header
_and_
Paragraph content
*in same block*

:::

---

no color

::: block <!-- element style="background-color: red;" -->

everything inside this block has red background color

::: block <!-- element style="background-color: blue;" -->

blue

::: 

red

:::

no color

```
```

--------------------------------

### Basic Grid Syntax - HTML

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/layout/grid

Defines the fundamental structure for using the grid component. The 'drag' property specifies the size (width and height) of the content area, while the 'drop' property determines its position (x and y coordinates) on the slide. Units can be percentages or pixels.

```html
<grid drag="width height" drop="x y">
...
</grid>
```

--------------------------------

### Rotate and Flip Font Awesome Icons in Obsidian Slides

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/fontAwesome

Shows how to apply rotation and flipping transformations to Font Awesome icons within Obsidian Slides using utility classes. This enables dynamic visual effects for icons.

```html
# Rotating Icons

<i class="fas fa-snowboarding"></i>
<i class="fas fa-snowboarding fa-rotate-90"></i>
<i class="fas fa-snowboarding fa-rotate-180"></i>
<i class="fas fa-snowboarding fa-rotate-270"></i>
<i class="fas fa-snowboarding fa-flip-horizontal"></i>
<i class="fas fa-snowboarding fa-flip-vertical"></i>
<i class="fas fa-snowboarding fa-flip-both"></i>
```

--------------------------------

### Include Custom CSS Files in Presentation

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax

Add custom CSS files to your slide deck by specifying them in the YAML frontmatter using the `css` property. These files are loaded relative to the theme directory or plugin folder.

```yaml
---
css: [css/layout.css,css/customFonts.css]
---

```
```

--------------------------------

### Fragmented List Syntax (Markdown)

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/fragmentedLists

Demonstrates the markdown syntax for creating fragmented unordered and ordered lists in Obsidian Slides Extended. The '+' character indicates fragmentation for unordered lists, and ')' indicates fragmentation for ordered lists.

```markdown
# Unordered list

- First
- Second
- Third

---

# Fragmented unordered list

- Permanent
+ First
+ Second
+ Third

---

# Ordered list

1. First
2. Second
3. Third

---

# Fragmented ordered list

1. Permanent
2) Second
3) Third
4) Fourth


```

--------------------------------

### Configure Markdown Parser Options (YAML)

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/yaml

Set options for the 'marked' Markdown parser within the frontmatter. These options control how Markdown is processed, with specific settings like GFM enabled and mangling enabled. Note that some marked options are not compatible with this plugin.

```yaml
markdown:
  gfm: true
  mangle: true
  pedantic: false
  smartLists: false
  smartypants: false

```

--------------------------------

### YAML Frontmatter for Custom Slide Separators

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/slides

Illustrates how to configure custom separators for horizontal and vertical slides within the YAML frontmatter of an Obsidian note. This allows for flexible slide structuring.

```yaml
---
separator: "<!-- * -->"
verticalSeparator: "<!-- ** -->"
---

```

--------------------------------

### Define Slide with Title and Page Number (Obsidian Slides)

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/features/embedSlide

This code snippet demonstrates how to define a slide within an Obsidian note using the obsidian-slides-extended syntax. It specifies the slide title as 'Presentation' and assigns it to page 7. This format is used to structure presentations directly within Obsidian.

```markdown
```slide
{
    slide: [[Presentation]],
    page: 7
}
```
```

--------------------------------

### Add Custom CSS to Obsidian Slides Presentation

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/themes

This code snippet demonstrates how to include a custom CSS file in your Obsidian Slides presentation. By adding the `css` key to your frontmatter and specifying the path to your CSS file (e.g., `css/my-talk.css`), you can apply custom styles to your slides. Ensure the CSS file is located within your theme's asset directory.

```yaml
---
css:
  - css/my-talk.css
---
```

--------------------------------

### Implement Fragments for Incremental Reveals

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax

Use the `fragment` class to incrementally reveal elements on a slide. Various fragment styles like fade-in, fade-out, and highlight can be applied by adding corresponding classes.

```markdown
Fade in <!-- element class="fragment" -->

Fade out <!-- element class="fragment fade-out" -->

Highlight red <!-- element class="fragment highlight-red" -->

Fade in, then out <!-- element class="fragment fade-in-then-out" -->

Slide up while fading in <!-- element class="fragment fade-up" -->

---

- Permanent item
- Appear Fourth <!-- element class="fragment" data-fragment-index="4" -->
- Appear Third <!-- element class="fragment" data-fragment-index="3" -->
- Appear Second <!-- element class="fragment" data-fragment-index="2" -->
- Appear First <!-- element class="fragment" data-fragment-index="1" -->

```
```

--------------------------------

### Apply Element Annotations for Styling

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax

Add classes or styles directly to markdown elements to control their appearance, such as borders, backgrounds, or custom attributes. This allows for fine-grained control over individual text elements.

```markdown
text with border

text with background

text with attribute

```
```

--------------------------------

### Define and Apply Inline CSS Styles with <style> Component (HTML/Markdown)

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/inlineStyling

This snippet demonstrates how to define CSS rules within an HTML `<style>` tag in your Markdown content. The defined styles can then be applied to elements using a custom class, allowing for direct visual styling within the presentation. This method is specific to environments that support embedded HTML and CSS within Markdown, such as Obsidian Slides.

```html
<style>
	.with-border{
		border: 1px solid red;
	}
</style>

styled text <!-- element class="with-border" -->
```

--------------------------------

### Proportional Split with `<split left>` and `<split right>`

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/layout/split

Use the `left="value"` and `right="value"` attributes to create proportional columns within a split container. These values define the ratio of the widths for the left and right sections.

```html
<split left="2" right="1" gap="2">

**Lorem Ipsum** is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap

into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem

</split>
```

--------------------------------

### Set Default Template in YAML Frontmatter

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/templates

This code snippet demonstrates how to define a default template that will be applied to all slides within a presentation. It uses the 'defaultTemplate' frontmatter property in YAML to specify the template name, such as '[[tpl-footer]]'. This is a straightforward method for ensuring consistent slide formatting across a deck.

```yaml
---
defaultTemplate: "[[tpl-footer]]"
---
```

--------------------------------

### Grid Alignment in Obsidian Slides

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/layout

Demonstrates the use of the 'align' property within the grid component to control horizontal alignment of content. Supports various alignment types like left, right, center, and justify.

```html
<grid drag="width height" drop="x y" align="type">

</grid>
```

```html
<grid drag="35 20" drop="topleft" align="left">
This text is aligned to the left side of the box
</grid>

<grid drag="35 20" drop="topright" align="right">
This text is aligned to the right side of the box
</grid>

<grid drag="36 20" drop="center" align="justify">
Stretches the text so that each line has equal width (like in newspapers and magazines)
</grid>
```

```html
<grid drag="100 45" drop="top" flow="row" align="stretch">
![[Title-Wide.png]]
![[Title-Wide.png]]
![[Title-Wide.png]]
</grid>

<grid drag="100 55" drop="bottom" flow="col" align="stretch">
![[Title-Wide.png]]
![[Title-Wide.png]]
</grid>
```

--------------------------------

### Set Slide Backgrounds via Annotation

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax

Change the background of a slide by annotating it with `<!-- slide bg="color" -->`, where 'color' can be a color name or a valid CSS color value.

```markdown
<!-- slide bg="aquamarine" -->
    ```
```

--------------------------------

### Add Font Awesome Icons to Obsidian Slides

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/fontAwesome

Demonstrates how to embed Font Awesome icons directly into Obsidian Slides using markdown syntax. This method is straightforward and requires no external dependencies beyond the Font Awesome library being available in your presentation.

```markdown
<!-- .slide: bg="white"-->

![](fab fa-font-awesome fa-4x)

## Icons

---

<!-- .slide: bg="white"-->
### Basic Syntax

![](fas fa-envelope fa-4x)<!-- .element: color="coral"-->

Short Syntax

	![](fas fa-envelope fa-4x)<!-- .element: color="coral"-->
```

--------------------------------

### Set Video Size in Obsidian Slides HTML

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/basic-syntax/video

Explains how to set the dimensions (width and height) of an embedded video within an Obsidian slide presentation. This is achieved by adding `width` and `height` attributes directly to the HTML `<video>` tag. This allows for visual control over the video's display area.

```html
<video data-autoplay controls width="800" height="600"><source src="Attachments/my_video_file.mp4" type="video/mp4"></video>
```

--------------------------------

### Define a Slide Template with Optional Variable (Markdown)

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/templates

This Markdown snippet demonstrates a slide template that includes an optional footer variable. The '?' in '<%? footer %>' indicates that the footer content is optional and will only be rendered if a corresponding block comment is provided in the slide.

```markdown
<% content %>

<grid drag="100 6" drop="bottom">
<%? footer %>
</grid>

```

--------------------------------

### Animate Font Awesome Icons in Obsidian Slides

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/fontAwesome

Demonstrates how to add animations to Font Awesome icons in Obsidian Slides using spin and pulse effects. These animations can draw attention to specific elements on the slide.

```html
# Animating Icons

<i class="fas fa-spinner fa-spin fa-3x"></i>
<i class="fas fa-circle-notch fa-spin fa-3x"></i>
<i class="fas fa-sync fa-spin fa-3x"></i>
<i class="fas fa-cog fa-spin fa-3x"></i>
<i class="fas fa-spinner fa-pulse fa-3x"></i>
<i class="fas fa-stroopwafel fa-spin fa-3x"></i>
```

--------------------------------

### Row Flow Layout - HTML

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/layout/grid

Sets up a grid to arrange its children horizontally using `flow="row"`. Similar to column flow, it injects equal spacing between elements and at the grid's edges, resulting in a row-like layout.

```html
<grid  drag="100 40" drop="center" bg="coral" flow="row">
Left
![[Image.jpg]]
**Lorem Ipsum** is simply dummy text
</grid>
```

--------------------------------

### Escaped Text Styling Characters

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/basic-syntax/textStyle

Shows how to escape Markdown characters to display them literally, rather than having them interpreted as formatting commands. This is useful for demonstrating the syntax itself.

```markdown
\*This text will be italic\*
\_This will also be italic\_
\*\*This text will be bold\*\*
\_\_This will also be bold\_\_
\_You \*\*can\*\* combine them\_

---
Any word wrapped with two tildes (like ~~this~~) will appear crossed out.
Any word wrapped with two equal signs (like this) will appear as highlighted.
```

--------------------------------

### Control Font Awesome Icon Sizing in Obsidian Slides

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/fontAwesome

Illustrates how to adjust the size of Font Awesome icons in Obsidian Slides using predefined size classes. These classes range from extra-small (xs) to extra-large (7x), offering a convenient way to scale icons.

```html
# Sizing

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
```

--------------------------------

### Set Slide Backgrounds with Annotations (Markdown)

Source: https://www.ebullient.dev/projects/obsidian-slides-extended/extend-syntax/slideBackground

Demonstrates how to set slide backgrounds using Markdown comments with the 'bg' attribute. This attribute supports color names, hex codes, RGB, HSL, and image URLs. It also shows how to set image opacity.

```markdown
<!-- slide bg="aquamarine" -->
## Slide with text based background

`bg` is shorthand for [`data-background`](https://revealjs.com/markdown/#slide-attributes)

---

<!-- slide bg="#ff0000" -->
## Slide with hex based background

`bg` is shorthand for [`data-background`](https://revealjs.com/markdown/#slide-attributes)

---

<!-- slide bg="rgb(70, 70, 255)" -->
## Slide with rgb based background

`bg` is shorthand for [`data-background`](https://revealjs.com/markdown/#slide-attributes)

---

<!-- slide bg="hsla(315, 100%, 50%, 1)" -->
## Slide with hsl based background

`bg` is shorthand for [`data-background`](https://revealjs.com/markdown/#slide-attributes)

---

# Slide without background

---

<!-- slide bg="https://picsum.photos/seed/picsum/800/600" -->
## Slide with image background

`bg` with a URL attribute is shorthand for [`data-background-image`](https://revealjs.com/backgrounds/#image-backgrounds)

---

<!-- slide bg="[[image.jpg]]" -->
## Slide with image background #2

`bg` with a URL attribute is shorthand for [`data-background-image`](https://revealjs.com/backgrounds/#image-backgrounds)

---

<!-- slide bg="https://picsum.photos/seed/picsum/800/600" data-background-opacity="0.5" -->
## with opacity

- `bg` with a URL attribute is shorthand for [`data-background-image`](https://revealjs.com/backgrounds/#image-backgrounds)
- 0.5 ≙ 50% opacity
```
Tokens:
Raw