Obsidianを使い始めたのでCSSスニペットを使って自分好みにカスタマイズした

技術メモとかやることリスト、ブログネタなどを残すために色々アプリを使ってきたが、最近はObsidianをメインにしている。 過去にはmemolist.vim、inkdrop、Quiverを使ってきたが、今の所Obsidianで落ち着きそう。

obsidian.md

外観

heading要素のフォントサイズが大きくなるのが嫌なので、minimalテーマをベースにしている。 このテーマだけだとh1, h2, h3の区別がつきにくいので、以下のCSSスニペットを使って背景色や下線を引くようにした。 アクセントカラーを使って設定することで、気分によってアクセントカラーを変えても追従してくれるようにした。

/* h2の背景をアクセントカラーにする */
body {
  --h2-color: var(--color-accent-1);
}

.markdown-preview-section h2,
.HyperMD-header-2,
.cm-header-2 {
  color: rgb(232, 232, 232);
  background-color: var(--h2-color) !important;
  padding: 10px 0px 10px 5px !important;
  margin-bottom: 5px !important;
}

/* h3〜h6の文字をアクセントカラーにする */
body {
  --h3-color: var(--color-accent);
  --h4-color: var(--color-accent);
  --h5-color: var(--color-accent);
  --h6-color: var(--color-accent);
}

.markdown-preview-section h3,
.HyperMD-header-3,
.cm-header-3 {
  color: var(--h3-color) !important;
}

.markdown-preview-section h4,
.HyperMD-header-4,
.cm-header-4 {
  color: var(--h4-color) !important;
}

.markdown-preview-section h5,
.HyperMD-header-5,
.cm-header-5 {
  color: var(--h5-color) !important;
}

.markdown-preview-section h6,
.HyperMD-header-6,
.cm-header-6 {
  color: var(--h6-color) !important;
}

/* h3に下線を引く */
body {
  --border-header-color: var(--background-primary, black);
}

.HyperMD-header-3,
.markdown-preview-view h3 {
  border-bottom: solid 1px var(--h3-color);
  border-image-slice: 1;
  padding-bottom: 5px !important;
}

細かいところだが、インラインコードがハイライトされず認識しにくかったので、これもアクセントカラーを使ってわかりやすくした。

.cm-inline-code,
.markdown-preview-view code {
  background-color: rgba(255, 229, 100, 0.07) !important;
  color: var(--color-accent-2) !important;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 0.9em;
}

あと、何故かエディタの表示がセンタリングされて困っていたが、「読みやすい行の長さ」をOFFにすると左寄せになってくれた。

CSSスニペットの拡張方法の調べ方

検索してもなかなか目的の内容に辿り着かなかったが、ChatGPTに聞いたら一発で返してくれて体験が良かった。