引用文をネスト可能にする
引用ブロックをネスト可能にする
引用ブロックの中でインライン引用記法を使うことでも表現できる
.char-indexを参照することによる性能面の問題はUserCSSのみでは解決不能
#試作品
code:style.css
.quote :is(
.tag + span.char-indexdata-char=">",
.tag + * span.char-indexdata-char=">",
/* .tag + * .indent + span.char-indexdata-char=">" */
) {
/icons/hr.icon
code:style.css
.line:not(.cursor-line) & {
display: inline-block !important;
color: transparent;
min-width: var(--quote-padding-start, 3px) !important;
&::before {
content: "";
display: block;
position: absolute;
vertical-align: top;
top: 0%;
min-height: 100%;
border-left: var(--quote-border-left, solid 1px #a0a0a0);
}
}
& ~ * {
background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.05));
color: var(--quote-text-color, var(--page-text-color));
}
引用ブロックの行頭を揃える
code:style.css
.line:not(.cursor-line) & + data-char=" " {
display: none;
max-width: 0;
background-color: blue;
}
引用文中のインデントを通常の箇条書きにする
code:style.css
.line:not(.cursor-line) & + :is(data-char=" ", * data-char=" "
) {
display: inline block !important;
width: var(--indent-width, 1.5em) !important;
background: purple !important;
&::after {
background: var(--indent-mark-color, var(--page-text-color, black));
/* app.css の .line .quote .indent-mark .dot より */
display: block !important;
position: absolute;
right: 9px;
top: 10px;
width: 6px;
height: 6px;
border-radius: 50%;
}
}
/icons/hr.icon
code:style.css
}
#記法
#UserCSS