Obsidian：スライドをカスタマイズするcss

スライドが段落である。だとすると…

スライド

Obsidianはノートがスライドに早変わり。コアプラグインの「スライド」をONにするだけです。スライドの区切りは---で行います。

ファイルメニューの「スライドプレゼンテーションを開始」で実行。

slide.css

デフォルトが「黒地に白」なのは味気ない。配色を変えましょう。

.reveal {
  font-size: 2em;
  color: black;
  background: ivory;
}

.reveal p {
  text-align: justify;
  padding-right: 10%;
  padding-left: 10%;
}

.reveal h1 {
  font-size: 3em;
  color: darkred;
}

.reveal h2 {
  font-size: 3em;
  color: navy;
}

.reveal h3 {
  font-size: 2em;
  color: darkred;
}

.reveal h4 {
  font-size: 2em;
  color: navy;
}

.reveal h5 {
  font-size: 1.5em;
  color: darkred;
}

.reveal h6 {
  font-size: 1.5em;
  color: navy;
}

.reveal blockquote {
  color: brown;
}

スライドはrevealクラスになっています。

使用例

表示すると下図のような感じ。

画面をスワイプすると切り替わります。

右上の x で終了。

slide.md

Templaterスクリプトでスライドを生成します。

<%*
s = tp.file.content
if(/\n\n\*\*\*\n\n/.test(s)) {
  d = s.split("\n\n***\n\n")
  s = d.join("\n\n")
} else {
  d = s.split("\n\n")
  s = d.join("\n\n***\n\n")
}
e = app.workspace.activeLeaf.view.editor
e.setValue(s)
%>