Advanced Slide使用

安装

1. 在Obsidian插件中安装Advanced slides

2. 测试：点击任务栏按钮，可能需要更改端口号

基本语法

1. 用---分割幻灯片
2. 常见的Markdown语法均适用
3. 图片处理

   [Image.jpg|300x100](link)

进阶语法

1. 元素注释

   border <!-- .element: class="with-border" -->
   background <!-- .element: style="background: blue" -->
   attribute <!-- .element: data-toggle="modal" -->
   根据容器大小覆盖<!-- .element: style="object-fit: cover" -->

2. 背景图片设置

   ## Slide with image background
   <!-- .slide: data-background-image="https://picsum.photos/seed/picsum/800/600" -->
   ## Slide with image background #2
   <!-- .slide: data-background-image="https://picsum.photos/seed/picsum/800/600" -->
   ## with opacity
   <!-- .slide: data-background-image="https://picsum.photos/seed/picsum/800/600" data-background-opacity="0.5" -->
   ## 背景颜色
   <!-- .slide: style="background-color: green" -->

进阶语法

3. 块设置

   <div class="block"> <!-- .element: style="background-color: red" -->

4. 自定义属性

   <style>
    .with-border{
        border: 1px solid red;
    }
   </style>
   styled text <!-- .element: class="with-border" -->

幻灯片分割

## 均匀分割成n列
<split even>

<p style="line-height: 0" class="reset-paragraph"><img src="https://picsum.photos/id/1005/250/250" alt="" ></img></p>

<p style="line-height: 0" class="reset-paragraph"><img src="https://picsum.photos/id/1010/250/250" alt="" ></img></p>

<p style="line-height: 0" class="reset-paragraph"><img src="https://picsum.photos/id/1025/250/250" alt="" ></img></p>

</split>

## 以3em间隙分割成n列
<split even gap="3">

## 自定义左右列宽度
<split left="2" right="1" gap="2">

## 自动分割成4列
<split wrap="4">

## 无边界间隙
<split no-margin>

自定义css

1. 把自定义的css文件放在.obsidian/plugins/obsidian-advanced-slides/css/
2. 在yaml中填入theme: css/my-theme.css