Inkdrop - リストのスタイル

Markdown で使う頻度が高いリスト記法の * と - のどちらも違和感があって､ ･ で表示したいと前々から思っていた (Bear.app がそうだった､はず)｡ようやくできた｡満足度が高い｡

編集モードとプレビューモードでスタイルを合わせているのもあって､どちらで表示してるか分からなくなることがたまにあったりする｡

.cm-formatting-list-ul {
  color: transparent;
}
.cm-formatting-list-ul::before {
  content: "•";
  margin-right: -7px;
  color: #fac4fe !important;
}

before	after

画像だと分かりづらすぎるけど､ * を入力したあとに (スペース) を入力すると ･ に切り替わるのが気持ちいい｡

環境 (OS/解像度/フォント) によって見え方が結構変わるので下記のあたりのスタイルを適度に調整する｡

.cm-formatting-list-ul::before {
  font-size:8pt;
}
.list-line-1 {
  padding-left: 1.6em !important;
  text-indent: -1.1em !important;
}
.list-line-2 {
  padding-left: 2.7em !important;
  text-indent: -2.2em !important;
}
.list-line-3 {
  text-indent: -3.2em !important;
}
.list-line-4 {
  padding-left: 4.6em !important;
  text-indent: -4.05em !important;
}