/programming-notes/scrapbox-preview-boxで表示するテキストのDOM構造

generated at 2/14/2025, 12:44:16 AM
scrapbox-preview-boxで表示するテキストのDOM構造
htmlの骨格
Streamと、/takker/convert scrapbox to htmlに書いてあるコードを参考にする
共通
1行ごとに <div class="line" data-id=""></div> で囲む
行リンクも入れる?
とりあえず data-id に行idを入れておこう
1行に複数のnodeが入る場合は、一つづつ <span> で囲む
indentを表示しない
code block内のindentはスペースで表現する
css.line {
  font-size: 15px;
  line-height: 28px;
}
a {
  background-color: transparent;
  text-decoration: none;
  cursor: pointer;
}
img {
  display: inline-block;
  max-width: 100%;
  max-height: 300px;
}
code {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
個別
inline code block
html<code class="code">...</code>
css.code {
  font-size: 90%;
  color: var(--code-color, #342d9c);
  background-color: var(--code-bg, rgba(0,0,0,0.04));
  padding: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  border-radius: 4px;
}
数式
inline code blockとして表示する
html<code class="formula">\begin{aligned}...\end{aligned}</code>
css.formula {
  margin: auto 6px;
}
\begin{aligned}x=&r\cos\theta\\y=&r\sin\theta\end{aligned}
\begin{aligned}x=&r\cos\theta\\y=&r\sin\theta\end{aligned
command line
html<code class="cli">
  <span class="prefix">$</span>
  <span> </span>
  <span class="command">sudo apt install neovim</span>
</span>
css.cli .prefix {
  color: #9c6248;
}
$ sudo apt install neovim
helpfeel記法
html<code class="helpfeel">
  <span class="prefix">?</span>
  <span> </span>
  <span class="entry">text</span>
</code>
css.helpfeel {
  background-color: #fbebdd;
  padding: 3px !important;
}
.helpfeel .prefix {
  color: #f17c00;
}
.helpfeel .entry {
  color: #cc5020;
}
? helpfeel記法の使い方
table記法
先頭
html<span class="table-block table-block-start">
  <a href="..." target="_blank">table block name</a>
</span>
css.table-block {
  white-space: nowrap;
}
.table-block-start {
  padding: 1px 2px;
  font-size: .9em;
  background-color: #ffcfc6;
}
.table-block-start a {
  color: #342d9c;
  text-decoration: underline;
}
本体
html<span class="table-block table-block-row">
  <span class="cell col-1">aaa</span>
  <span class="cell col-2">bbb</span>
</span>
css.cell {
  margin: 0;
  padding: 0 2px 0 8px;
  box-sizing: content-box;
  display: inline-block;
  white-space: pre;
}
.cell:nth-child(2n+1) {
  background-color: rgba(0,0,0,0.04);
}
.cell:nth-child(2n) {
  background-color: rgba(0,0,0,0.06);
}
testaaabbb
cccddd
code block記法
先頭
html<span class="code-block">
  <code class="code-block-start">
    <a href="..." target="_blank">code block name</a>
    <!-- or -->
    <!-- code block name without link -->
  </code>
</span>
css.code-block {
  line-height: 1.7em;
  background-color: var(--code-bg, rgba(0,0,0,0.04));
}
.code-block-start {
  color: #342d9c;
  font-size: .9em;
  background-color: #ffcfc6;
  padding: 1px 2px;
}
本体
html<code class="code-block">
    console.log('Hello.');
</code>
sample.js    console.log('Hello.');
引用
 <backquote class="quote">text</backquote> 
cssbackquote {
  background-color: var(--quote-bg-color, rgba(0,0,0,0.05));
  display: block;
  border-left: solid 4px #a0a0a0;
  padding-left: 4px;
}
>text
image
html<a href="..." rel="noopener noreferrer" targe="_blank">
  <img class="image" src="..."></img>
</a>
icon/strong icon
icon
html<a href="/{project}/${title}" rel="route">
  <img class="icon" src="..."></img>
</a>
css.icon {
  height: 1.3em;
  vertical-align: top;
}
link
ScrapScriptsと/takker/ScrapScripts
html<a class="page-link" href="/{project}/{title}" rel="route">ScrapScripts</a>
css.page-link {color: var(--page-link-color, #5e8af7);}
.page-link:hover {color: var(--page-link-color-hover-color, #2d67f5);}
hash tag
hashtag: #ScrapScripts
html<a type="hashTag" class="page-link" href="/{project}/{title}" rel="route">ScrapScripts</a>
external link
これがDocument.createTextNode() - Web API | MDN 外部リンク
動画と音声のリンクにも対応させたい
動画はついでにニコニコ動画にも対応させようかな
html<a class="link" href="..." rel="noopener noreferrer" target="_blank">Link</a>
css.link {
  color: var(--page-link-color, #5e8af7);
  text-decoration: underline;
}
.link:hover {color: var(--page-link-color-hover-color, #2d67f5);}
blank
html<span>   </span>
strong
strong /takker/外部リンク記法
html<strong>...</strong>
cssstrong {
  font-weight: bold;
}
decoration
strike   italic   bold   big bold underlinecustom decoration syntax
all
012345678910
html<span class="deco-* ...">...</span>
google map
東京タワー|〒105-0011 東京都港区芝公園４丁目４−１３
html<span class="pointing-device-map">
  <a href="https://www.google.com/maps/search/{keyword}/@{location},{zoom}">
    <img class="google-map" src="/api/google-map/static-map?..."></img>
  </a>
</span>

行リンク
考えてる
案
行リンクのみ表示
ScrapScriptsで使っている方法
前後の文脈がわかりにくい
行リンクを中心に前後5行位を表示する
5行でいいのか？
少なくないか？/多くないか？
この辺の感覚は個人によって異なる
preview box全体をscrollできるようにし、そのスクロールを指定行付近までスクロールさせておく
これがよさそう？

とりあえずparserを書いてみる
scrapbox-preview-box/parser

from scrapbox-preview-box

#2021-02-26 22:43:00 
#2021-02-12
aaa	bbb
ccc	ddd