settings/拡張記法
中央揃え
構文
[<> 文字列]
例
文字列
実装
code:style.css
span.text:has(.deco-\<):has(.deco-\>) {
text-align: center;
}
右揃え
構文
[> 文字列]
例
文字列
実装
code:style.css
span.text:has(.deco-\>):not(:has(.deco-\<)) {
text-align: right;
}
下線マーカー
構文
[_* 強調]
[_/ 差異]
例
強調
差異
実装
code:style.css
span.deco strong span:has(.deco-_) {
text-decoration: none !important;
background: linear-gradient(transparent 70%, var(--color-red95) 70%);
}
span.deco span:has(.deco-_):has(i) {
& {
text-decoration: none !important;
background: linear-gradient(transparent 70%, var(--color-yellow95) 70%);
}
}
水平線
構文
[-<> -]
例
-
実装
code:style.css
span.text:has(.deco-\<):has(.deco-\>):has(.deco--) {
& {
text-align: left;
color: transparent;
}
&:not(:has(span.indent)),
& span.indent {
position: relative;
}
&:not(:has(span.indent))::before,
& span.indent::before {
position: absolute;
content: '';
top: calc(50% - 1px);
bottom; 50%;
left: 0;
right: 0;
height: 2px;
background-color: var(--theme-page-frame);
border-radius: 4px;
}
}
タスクリスト
構文
[!* task]
[!? WIP]
[!- done]
例
task
wip
done
実装
code:style.css
span.text:has(.deco-\!) {
& .deco-\!::before {
display: inline-block;
margin-right: 0.25em;
}
& .deco-\!.deco-\*::before {
content: '📥';
}
& .deco-\!.deco-\/::before {
content: '🚧';
font-style: normal;
}
& .deco-\!.deco--::before {
content: '✅';
}
}
既存記法調整
code:style.css
strike {
text-decoration-thickness: 2px;
}