scrapboxのページカードのDOM構造
サムネが本文
html<li class="page-list-item grid-style-itme">
<a href="/{project}/{encoded_title}" rel="route">
<div class="hover"></div>
<div class="content">
<div class="header">
<div class="title">{title}</div>
</div>
<div class="description">
{parsed_text}
</div>
</div>
</a>
</li>
本文のDOM構造
一行ずつ <p></p> で囲む
plain textだけのときは、そのまま書き込まれる
別の要素があるときは、要素ごとに <span></span> で囲む
変換の対応| インラインコード | <code>...</code> |
| リンク | <span class="page-link">...<span> |
| 外部リンク | <span class="link">...</span> |
| アイコン記法 | <img class="inline-icon" src='...' /> |
↑すべて <span></span> で囲む
サムネが画像
img.html<li class="page-list-item grid-style-itme">
<a href="/{project}/{encoded_title}" rel="route">
<div class="hover"></div>
<div class="content">
<div class="header">
<div class="title">{title}</div>
</div>
<div class="icon">
<img loading="lazy" src="{imageURL}">
</div>
</div>
</a>
</li>