char-index型マーカー記法
UserCSS.icon
#試作品
cf. 大スリップ記法
マーカー記法の一種。
文字：#
書式：[# \command <text>]
例：
\week Weekweek text
\white white white
\black black black
\yellow yellow yellow
\blue blue blue
\green Green green
\red red red
\purple purple purple
\indigo indigo indigo
:has()
background-color:
code:style.css
:where(main) .line:not(.cursor-line) spanclass="deco-\#" {
/* \week */
&:has(span.char-indexdata-char="\\":nth-of-type(1)
+ data-char="w" + data-char="e" + data-char="e" + data-char="k"
+ data-char=" ") {
background-color: hsl(from var(--page-bg) h s l / .65); color: hsl(from var(--page-text-color) h s l / .4);
:is(&, & > span:nth-of-type(1)) > span.char-index:nth-of-type(-n + 6) { display: none; }
}
/* \white */
&:has(span.char-indexdata-char="\\":nth-of-type(1)
+ data-char="w" + data-char="h" + data-char="i" + data-char="t" + data-char="e"
+ data-char=" ") {
background-color: white; color: #333;
:is(&, & > span:nth-of-type(1)) > span.char-index:nth-of-type(-n + 7) { display: none; }
}
/* \black */
&:has(span.char-indexdata-char="\\":nth-of-type(1)
+ data-char="b" + data-char="l" + data-char="a" + data-char="c" + data-char="k"
+ data-char=" ") {
background-color: black; color: hsl(223 15% 80%);
:is(&, & > span:nth-of-type(1)) > span.char-index:nth-of-type(-n + 7) { display: none; }
}
/* \yellow */
&:has(span.char-indexdata-char="\\":nth-of-type(1)
+ data-char="y" + data-char="e" + data-char="l" + data-char="l" + data-char="o" + data-char="w"
+ data-char=" ") {
background-color: var(--c-yellow-4, gold); color: black;
:is(&, & > span:nth-of-type(1)) > span.char-index:nth-of-type(-n + 8) { display: none; }
}
/* \blue */
&:has(span.char-indexdata-char="\\":nth-of-type(1)
+ data-char="b" + data-char="l" + data-char="u" + data-char="e"
+ data-char=" ") {
background-color: var(--c-blue-3, deepskyblue); color: hsl(223 15% 80%);
:is(&, & > span:nth-of-type(1)) > span.char-index:nth-of-type(-n + 6) { display: none; }
}
/* \green */
&:has(span.char-indexdata-char="\\":nth-of-type(1)
+ data-char="g" + data-char="r" + data-char="e" + data-char="e" + data-char="n"
+ data-char=" ") {
background-color: var(--c-green-4, forestgreen); color: white;
:is(&, & > span:nth-of-type(1)) > span.char-index:nth-of-type(-n + 7) { display: none; }
}
/* \red */
&:has(span.char-indexdata-char="\\":nth-of-type(1)
+ data-char="r" + data-char="e" + data-char="d"
+ data-char=" ") {
background-color: crimson; color: white;
:is(&, & > span:nth-of-type(1)) > span.char-index:nth-of-type(-n + 5) { display: none; }
}
/* \orange */
&:has(span.char-indexdata-char="\\":nth-of-type(1)
+ data-char="p" + data-char="u" + data-char="r" + data-char="p" + data-char="l" + data-char="e"
+ data-char=" ") {
background-color: #7c007c; color: white;
:is(&, & > span:nth-of-type(1)) > span.char-index:nth-of-type(-n + 8) { display: none; }
}
/* \purple */
&:has(span.char-indexdata-char="\\":nth-of-type(1)
+ data-char="p" + data-char="u" + data-char="r" + data-char="p" + data-char="l" + data-char="e"
+ data-char=" ") {
background-color: #7c007c; color: white;
:is(&, & > span:nth-of-type(1)) > span.char-index:nth-of-type(-n + 8) { display: none; }
}
/* \indigo */
&:has(span.char-indexdata-char="\\":nth-of-type(1)
+ data-char="i" + data-char="n" + data-char="d" + data-char="i" + data-char="g" + data-char="o"
+ data-char=" ") {
background-color: indigo; color: white;
:is(&, & > span:nth-of-type(1)) > span.char-index:nth-of-type(-n + 8) { display: none; }
}
}
#記法
#UserCSS