見出し画像

Obsidian Tips：行頭に全角空白スペースを入れても謎のインデントが入らないようにするためのCSSスニペット（の案）

MaybeFix

　今回も人の褌で相撲を取っております……
　そろそろ独自ネタ出したいなあ。


前回のおさらい

　好評なようで何よりです。

さすがに不親切すぎた

　ただ、全角字下げを設定するスクリプトは自分でググってねとは言うものの、ちょっと不親切すぎたかもしれないと思いまして、こうして記事を書いています。

参考リンク

　「厳密な改行」と「スマートインデント」をONにして、上のCSSを適用すると、ソースモードでは字下げが機能するかと。
　上記の記事にこのスニペットが動作する理由とか仕組みとかは書いてあるので割愛します。こたつろぐさんありがとうございます。

独自スニペット

　上のスニペットにちょっと手を加えて独自運用しています。
　もうどうやって作ったのかも分からない感じになっています。メンテナンス性が著しく低い。
　適用すると、下のように全角空白で謎インデントされなくなります。

適用するとこんな感じになる

字下げ対応のやつ

　ライブプレビューでも適用したかったのでそれ用のCSSです。上の記事のスニペットをちょっとだけ変えました。
　あと、字下げすると、なぜか見出しまでインデントが効かなくなるので、別途見出し用のインデントも作りました。

/*全角字下げ対応*/
  .markdown-source-view.mod-cm6.is-readable-line-width .cm-line.HyperMD-header-1 {
    padding-inline-start: 20px !important;
    }

.markdown-preview-view p{
    white-space:pre-line;
}

リストについて

　字下げのスニペットをやると、インデント幅がおかしくなる＆普通にデフォルトのリストインデントの幅が嫌だったので、すべて手作業で合わせた脳筋処理。
　フォントは Noto Sans JP 想定。
　もっといい書き方あったら教えて下さい。
　現状、箇条書きの間のガイドラインを表示するのは諦めてます。

.markdown-source-view.mod-cm6 .cm-line > *{
  text-indent: 2px;
}

 .markdown-source-view.mod-cm6 .cm-fold-indicator{
    display: none;
  }


  .list-bullet{
    justify-content: normal;
  }

  .list-bullet:before{
    content:'\2060';
  }

  .markdown-source-view.mod-cm6 .cm-content > .cm-line.HyperMD-list-line-1{
    text-indent:-0.72em !important;
    padding-left: 1em !important;
  }

  .markdown-source-view.mod-cm6 .cm-content > .cm-line.HyperMD-list-line-2{
    text-indent:-1.32em !important;
    padding-left: 3.1em !important;
  }

  .markdown-source-view.mod-cm6 .cm-content > .cm-line.HyperMD-list-line-3{
    text-indent:-2.85em !important;
    padding-left: 5.1em !important;
  }

  .markdown-source-view.mod-cm6 .cm-content > .cm-line.HyperMD-list-line-4{
    text-indent:-3.35em !important;
    padding-left: 7.2em !important;
  }

  .markdown-source-view.mod-cm6 .cm-content > .cm-line.HyperMD-list-line-5{
    text-indent:-4.85em !important;
    padding-left: 9.2em !important;
  }

  .markdown-source-view.mod-cm6 .cm-content > .cm-line.HyperMD-list-line-6{
    text-indent:-5.3em !important;
    padding-left: 11.3em !important;
  }

  .markdown-source-view.mod-cm6 .cm-content > .cm-line.HyperMD-list-line-7{
    text-indent:-6.8em !important;
    padding-left: 13.3em !important;
  }

  .markdown-source-view.mod-cm6 .cm-content > .cm-line.HyperMD-list-line-8{
    text-indent:-7.35em !important;
    padding-left: 15.3em !important;
  }

  .markdown-source-view.mod-cm6 .cm-content > .cm-line.HyperMD-list-line-9{
    text-indent:-8.83em !important;
    padding-left: 17.3em !important;
  }

  .markdown-source-view.mod-cm6 .cm-content > .cm-line.HyperMD-list-line-10{
    text-indent:-9.35em !important;
    padding-left: 19.3em !important;
  }

  .markdown-source-view.mod-cm6.is-live-preview .cm-indent::before{
    display: none;
  }

　改めて見るとこりゃひでえや。一つ一つ設定してるのでクソ面倒。

　一応、説明するまでもないんですが、

  • padding-left で左側に余白をつくる

  • text-indent で余白を作った分ズラす

　というやり方をしています。

ざっくりとまとめ

　シンプルなスニペットですが効き目は絶大。ただしObsidian開発側がこの仕様を認めないアップデートをする可能性も否定できないので、表示崩れ等の対処は自己責任で計画的に。
　こたつろぐさんには足を向けて寝られません。ありがとうございます。

いいなと思ったら応援しよう！