注釈記法
https://gyazo.com/c18fe74e5d07952c43b040c776ad88ba
Paper Dark Dark Theme
https://gyazo.com/04ec810ec0760bf925cc55274fc80eafhttps://gyazo.com/04ec810ec0760bf925cc55274fc80eafhttps://gyazo.com/04ec810ec0760bf925cc55274fc80eaf
Default Light Theme
/icons/hr.icon
#行リンクを注釈のような表示にするUserCSS Mijinko_SD.icon
文字装飾記法の[( ]と[) ]を媒介にします。
一応行リンクじゃなくてもテキストベースのリンクであればなんでもいけるはず
リンクじゃないただのテキストだと動作しません
使い方
1. 注釈の内容文を書いて)のブラケットで囲みます。
例) [) 注釈のテストです。]
2. 注釈の内容文の行リンクをコピーします。
3. 注釈へのリンクを貼りたいところに以下のような感じで書き込みます。
1. まず行リンクを貼り付ける
[注釈記法#623fe7c87838e30000d6ee3b]みたいになるはず
2. その行リンクを[( ]で囲む
3. 以下のような感じになればおｋ
例) この文章に注釈をつけます。[( [注釈記法#623fe7c87838e30000d6ee3b]]
問題点
同じ数字は使えません
「注1」を2回以上使えないといった感じ
#拡張記法
/icons/hr.icon
ソース
code: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)"：";
}
UserCSS.icon