Zenn
📦

ScrapBoxで特定のレベルのインデントだけにマージンを持たせる方法

2024/02/21に公開
CSS
HTML
UI
#
プログラム
Scrapbox
tech

比較

  • 適用前
    適用前

  • 適用後
    適用後

コード

style.css
.line span[class="text"] .indent[style^="margin-left: 1.5em;"] {
    margin-top: 1em;
}

使い方

  • 上のコードをstyle.cssという名前で「settings」ページなどに張り付けてください
  • 1.5emは第一レベルのインデントの指定です
    • 第二インデント：3em
    • 第三インデント：4.5em
    • 基本1.5ずつ増えるはずですが，環境によって違う可能性もあります
    • 参照（F12）などから確認できます

詳しく知りたい人向けの話

要素の指定方法

  • E[P=V]はHTML内の要素Eのうち，属性Pが値Vの要素を示しています
    • Eがspanならspanタグ，.indentならindentクラスを持つ要素となります

span[class="text"]が抜けるとキレイに表示されない

  • span[class="text"]を除いて.line .indent[style^="margin-left: 1.5em;"]とするとガタガタした表示になってしまいます．
  • その理由は，余計な要素にまでマージンがついてしまうからです
  • 具体的なコードを見て確認します
html
 <div class="line section-1 cursor-line formula-line" id="xxx" style="min-height: 36.4219px;">
     <div class="telomere">...</div>
     <span class="text"><span><span>
         <span class="indent-mark" style="width: 1.5em;"></span>
         <span class="indent" style="margin-left: 1.5em;">
             <span class="formula"><code>...</code></span>
         </span>
     </span></span></span>
     <div class="formula-preview text">
         <span class="result">
             <span><span class="indent" style="margin-left: 1.5em;">
                 <span class="formula">
                     <span class="preview">
                         <span class="katex-display"><span class="katex">...</span></span>
                     </span>
                 </span>
             </span></span>
         </span>
     </div>
 </div>
  • これはScrapBoxのカーソルが当たっている１行の要素です
  • 普通，カーソルが当たっていなければ<span class="indent" style="margin-left: 1.5em;">は一つなのですが，カーソルが当たっている行は二つになります
  • コードにもあるようにfomula（式）のpreviewが生成されてしまうためです
  • この式のプレビューは式ではない普通の文章でも高さ0pxの要素として生成されます
  • この式のプレビューの中に，本来マージンをつけたい要素と同じ要素が入っており，そちらにまでマージンがついてしまうことがキレイに表示されなくなる理由です
  • しかもプレビューはカーソルを外すと消えますからカーソルの位置によって，余計なマージンが生まれたり消えたりして，ガタガタした表示になってしまいます
  • これを解決するためspan[class="text"]を入れることによって式のプレビューの要素を対象から除外しています

Discussion