📘【Obsidian】Vimモードを視覚化する

はじめに

ObsidianにはVimモードというのがある。Vimはちょっと難しそうで敬遠していたのだが、よく考えたらトラックパッド操作やGUI的操作と併用してもいいわけで、ずっとInsertモードで使用した場合は今までと同じような入力操作で使える。Normalモードにしたら無限に便利コマンドが使える。そう考えると導入するデメリットが殆どないことに気がついた。便利だと思う操作だけを取り入れていけば良いのではという発想に至った。

導入にあたり、差し障り問題になるのはモード切り替えである。慣れていないとモード迷子になりそう。ここを視覚的に訴えるようにCSSを当てることにする。

CSSスニペット

📘【Obsidian】アクティブファイルに枠線をつけるCSSスニペット

これを改変する。VimのInsertモードには.cm-vimModeがつくことを利用する。

.workspace-leaf-content{
    box-sizing: border-box;
    border: 4px solid transparent;
}
.workspace-leaf.mod-active .workspace-leaf-content {
    border-color: var(--ax1);
}
.workspace-leaf.mod-active .workspace-leaf-content:has(.markdown-source-view):not(:has(.cm-vimMode)) {
    border-color: red;
}

結果どうなるか

↑Normalモード：アクティブなリーフに枠線がつく

↑Insertモード：枠線が赤になる

おわりに

よさそう。Vimはエディターでやりたいことが大体できるっぽいので、徐々に手持ち技を増やしていきたい。