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）などから確認できます

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

要素の指定方法

  • span[class="text"]が示すのは，spanタグのうちclassが"text"の要素
  • .indent[style^="margin-left: 1.5em;"]が示すのは，indentクラスのうちstyleが"margin-left: 1.5em;"の要素

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の記事のページの，カーソルが当たっている１行のHTMLです
  • カーソルが当たっていない行の場合，<span class="indent" style="margin-left: 1.5em;">は１つなのですが，カーソルが当たっている行は２つになります
  • これは，コードにもあるようにfomula（式）のpreviewが生成されてしまうためです
  • 式プレビューは式ではない普通の文章でも高さ0pxの要素として生成されます
  • この式プレビューの中に，本来マージンをつけたい要素と同じ要素が入っており，そちらにまでマージンがついてしまうことがキレイに表示されなくなる理由です
  • しかもプ式レビューはカーソルを外すと消えますから，カーソルの位置によって余計なマージンが生まれたり消えたりして，ガタガタした表示になってしまいます
  • これを解決するためspan[class="text"]を入れて，式プレビューをマージン付与対象から除外しています

Discussion