Obsidian的Advance Slice使用css文件

383 阅读1分钟

一、编写css文件

  1. 进入仓库所在文件夹
  2. 进入.obsidian —> plugins —> obsidian-advanced-slides —> css
  3. 在此处创建自定义的css样式,创建一个css文件test.css

image.png

/* 当前列表 */
.test li.current-fragment {
  color: red;
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 
    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
  scale: 1.1;
}

二、md中引入css

  1. 在yaml区输入css: css/test.css
  2. 在slide中使用test<!-- slide class="test" -->

写一个测试的md文件

---
css: css/test.css
---

<!-- slide class="test"  -->
## 引入class="test"
+ 1
+ 2
+ 3
+ 4
+ 5

---

## 没有引入class="test"
+ 1
+ 2
+ 3
+ 4
+ 5

三、效果

可以看到效果如下

test.gif