Obsidianでこういったワンポイントになるマークを作りたい。
Cosense（Scrapbox）でこういったマークよく使っていたんですよね。
Obsidianではどう作るか。
要は文字（テキスト）に背景を入れる方法ということです。
まず結論から。
こうやって書くと、
<span class="green">関連</span>
<span class="red">重要</span>
先のマークになります。
では、こうするためには何をしたらよいか。
ObsidianのCSSスニペットで以下のとおり書く必要があります。
CSSスニペットとはObsidianの設定＞外観で表示される以下の画面ですね。
CSSスニペットは、隠しフォルダにあるので、iPadとiPhoneではOwlfilesを使うと便利。
iPhoneとiPadでの隠しフォルダへのアクセスの方法は以前記事にしていますのでご参照ください。
Obsidianの隠しフォルダにアクセスする方法
Obsidianの設定ファイルは「隠しフォルダ」の中にあります。
「.Obsidian」など「.」で始まるフォルダですね。
...
隠しフォルダにあるCSSスニペットのファイルに以下を書きます。
/* テキストの背景(編集画面) */
.cm-style{
.green {background-color: color:
.red {background-color: color:
}
/* テキストの背景(プレビュー画面) */
.markdown-preview-view Style{
.green {background-color: color:
.red {background-color: color:
}
これだけです。
これで先ほどのとおり、
<span class="green">関連</span>
<span class="red">重要</span>
と書けばこうなります。
さらに、上記のコードを簡単に書く方法を紹介します。
コミュニティプラグインのTemplaterのフォルダに以下のとおり書きます。
タイトルは「background-green」とでもしておきましょう。
<%*
s = tp.file.selection()
if(s){
return "<span class=red>" + s + "</span>"
}else{
return "<span class=red></span>"
}
%>
これをコミュニティプラグインのTemplaterに登録します。
さらに、コマンドパレッドでピン留めしたり、ホットキーを登録しておけば素早く呼び出せます。
実際に使うときは、テキストを選択して、上記のコードを呼び出してください。テキストを選択していないとコードのみが記載されます。
