注釈記法
Paper Dark Dark Theme
Default Light Theme
一応行リンクじゃなくてもテキストベースのリンクであればなんでもいけるはず
リンクじゃないただのテキストだと動作しません
使い方
1. 注釈の内容文を書いて
) のブラケットで囲みます。例)
[) 注釈のテストです。] 2. 注釈の内容文の行リンクをコピーします。
3. 注釈へのリンクを貼りたいところに以下のような感じで書き込みます。
1. まず行リンクを貼り付ける
[注釈記法#623fe7c87838e30000d6ee3b] みたいになるはず2. その行リンクを
[( ] で囲む3. 以下のような感じになればおｋ
例)
この文章に注釈をつけます。[( [注釈記法#623fe7c87838e30000d6ee3b]] 問題点
同じ数字は使えません
「注1」を2回以上使えないといった感じ
ソース
style.css*::before {
--page-link-color: #5e8af7;
--page-link-hover-color: #2d67f5;
}
#editor {
counter-reset: annotation-link;
counter-reset: annotation-content;
}
.line:not(.cursor-line) span.deco-\( {
/* リンクを注釈にするやつその１ */
font-size: 12px;
}
.line:not(.cursor-line) span.deco-\( a,
.line:not(.cursor-line) span.deco-\( a:hover{
/* リンクを注釈にするやつその２ */
display: inline-block;
width: 2.6em;
line-height: 1em;
vertical-align: super;
white-space: nowrap;
overflow: hidden;
color: rgba(0,0,0,0);
}
.line:not(.cursor-line) span.deco-\( a::before{
/* リンクを注釈にするやつその３ */
display: inline-block;
width: 2.6em;
margin-right: -2.6em;
overflow: visible;
visibility: visible;
text-align: left;
pointer-events: none;
counter-increment: annotation-link;
content: "注"counter(annotation-link);
color: #4c99ff;
background-color: rgba(125,125,255,0.08);
border-radius: 2px;
}
.line:not(.cursor-line) span.deco-\)::before {
/* 注釈の内容文の頭に「注○：」とつけるやつ */
/* ここら辺はマジで適当なので、気になる人はカスタマイズすることを推奨します */
display: inline;
counter-increment: annotation-content;
content: "注"counter(annotation-content)"：";
}