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

htmlの骨格

共通

行リンクも入れる?

indentを表示しない

code block内のindentはスペースで表現する

code: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

code:html

<code class="code">...</code>

code:css

.code {

font-size: 90%;

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として表示する

code:html

<code class="formula">\begin{aligned}...\end{aligned}</code>

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

code:html

<code class="cli">

<span class="prefix">$</span>

<span> </span>

<span class="command">sudo apt install neovim</span>

</span>

code:css

.cli .prefix {

}

$ sudo apt install neovim

helpfeel記法

code:html

<code class="helpfeel">

<span class="prefix">?</span>

<span> </span>

<span class="entry">text</span>

</code>

code:css

.helpfeel {

padding: 3px !important;

}

.helpfeel .prefix {

}

.helpfeel .entry {

}

? helpfeel記法の使い方

table記法

先頭

code:html

<span class="table-block table-block-start">

<a href="..." target="_blank">table block name</a>

</span>

code:css

.table-block {

white-space: nowrap;

}

.table-block-start {

padding: 1px 2px;

font-size: .9em;

}

.table-block-start a {

text-decoration: underline;

}

本体

code:html

<span class="table-block table-block-row">

<span class="cell col-1">aaa</span>

<span class="cell col-2">bbb</span>

</span>

code: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);

}

table:test

aaa bbb

ccc ddd

code block記法

先頭

code: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>

code:css

.code-block {

line-height: 1.7em;

background-color: var(--code-bg, rgba(0,0,0,0.04));

}

.code-block-start {

font-size: .9em;

padding: 1px 2px;

}

本体

code:html

<code class="code-block">

console.log('Hello.');

</code>

code:sample.js

console.log('Hello.');

引用

<backquote class="quote">text</backquote>

code:css

backquote {

background-color: var(--quote-bg-color, rgba(0,0,0,0.05));

display: block;

padding-left: 4px;

}

text

image

code:html

<a href="..." rel="noopener noreferrer" targe="_blank">

<img class="image" src="..."></img>

</a>

icon/strong icon

/emoji/party parrot.icon

code:html

<a href="/{project}/${title}" rel="route">

<img class="icon" src="..."></img>

</a>

code:css

.icon {

height: 1.3em;

vertical-align: top;

}

link

code:html

<a class="page-link" href="/{project}/{title}" rel="route">ScrapScripts</a>

code:css

hash tag

code:html

<a type="hashTag" class="page-link" href="/{project}/{title}" rel="route">ScrapScripts</a>

external link

動画はついでにニコニコ動画にも対応させようかな

code:html

<a class="link" href="..." rel="noopener noreferrer" target="_blank">Link</a>

code:css

.link {

text-decoration: underline;

}

blank

code:html

<span> </span>

strong

code:html

<strong>...</strong>

code:css

strong {

font-weight: bold;

}

decoration

all

code:html

<span class="deco-* ...">...</span>

google map

N35.6576943,E139.7452035,Z16 東京タワー|〒105-0011 東京都港区芝公園４丁目４−１３

code:html

<span class="pointing-device-map">

<img class="google-map" src="/api/google-map/static-map?..."></img>

</a>

</span>

行リンク

案

行リンクのみ表示

前後の文脈がわかりにくい

行リンクを中心に前後5行位を表示する

5行でいいのか？

少なくないか？/多くないか？

この辺の感覚は個人によって異なる

preview box全体をscrollできるようにし、そのスクロールを指定行付近までスクロールさせておく

とりあえずparserを書いてみる

MDN.icon