マーカー記法
UserCSS.icon UserScript.icon
https://gyazo.com/ceff4755f42b1fdfe8285ad92ec0bd3c
マーカー記法ないし文字装飾記法の最もシンプルかつ基本的な実装 2026-03-16 長らく次の記法を使っていたが、結局この最も単純な方式に移行することにしたNrem.icon これらの記法によってCosenseのパフォーマンスが低下する問題が技術的に解消しがたいことが分かったため
code:style.css
--deco-color-marker-padding: 0.3em 0 0.15em;
}
青マーカー
code:style.css
/* blue */
/* background-color: var(--c-blue-3, deepskyblue); color: black; */
background-color: light-dark(
color-mix(in oklab, var(--c-blue-3, deepskyblue) 25%, oklch(from var(--page-bg) l 0 h)),
color-mix(in oklab, var(--c-blue-4, deepskyblue) 35%, oklch(from var(--page-bg) l 0 h))
);
padding: var(--deco-color-marker-padding);
}
オレンジマーカー
code:style.css
/* orange */
/* background-color: var(--c-orange-4); color: white; */
background-color: light-dark(
color-mix(in oklab, var(--c-orange-4, darkorange) 25%, oklch(from var(--page-bg) l 0 h)),
color-mix(in oklab, var(--c-orange-5, darkorange) 35%, oklch(from var(--page-bg) l 0 h))
);
padding: var(--deco-color-marker-padding);
}
オレンジマーカー（例示）
code:style.css
/* e.g. */
background-color: light-dark(
color-mix(in oklab, var(--c-orange-4, darkorange) 20%, oklch(from var(--page-bg) l 0 h)),
color-mix(in oklab, var(--c-orange-5, darkorange) 25%, oklch(from var(--page-bg) l 0 h))
);
padding-top: 5.5px; padding-bottom: 1px;
font-size: 0.94em; font-style: normal;
font-size-adjust: var(--inline-quote-font-size-adjust, unset);
font-weight: var(--inline-quote-font-weight, var(--quote-font-weight, 400));
font-family: var(--inline-quote-font-family, var(--quote-font-family, var(--smaller))), var(--icons, AppIcons);
font-feature-settings: var(--inline-quote-font-feature-settings, var(--quote-font-feature-settings));
border-bottom: var(--inline-quote-border-width, var(--quote-border-width, 1px)) solid var(--inline-quote-border-color, var(--quote-border-color, #040404)); }
黄マーカー
code:style.css
/* yellow */
/* background-color: var(--c-yellow-4, gold); color: black; */
background-color: light-dark(
color-mix(in oklab, var(--c-yellow-4, gold) 25%, oklch(from var(--page-bg) l 0 h)),
color-mix(in oklab, var(--c-yellow-5, gold) 30%, oklch(from var(--page-bg) l 0 h))
);
padding: var(--deco-color-marker-padding);
}
緑（青緑）マーカー
code:style.css
/* green */
/* background-color: var(--c-green-4, forestgreen); color: white; */
background-color: var(--c-green-4, darkgreen);
background-color: light-dark(
color-mix(in oklab, #3ca48a 25%, oklch(from var(--page-bg) l 0 h)), color-mix(in oklab, var(--c-green-5, gold) 30%, oklch(from var(--page-bg) l 0 h))
);
padding: var(--deco-color-marker-padding);
}
ピンクマーカー
code:style.css
/* magenta */
/* background-color: hsl(from var(--c-red-1, red) h s l / 35%); */
background-color: light-dark(
color-mix(in oklab, hsl(from deeppink h s calc(l * 1.2)) 25%, oklch(from var(--page-bg) l 0 h)),
color-mix(in oklab, oklch(from deeppink l calc(c * 1.2) h) 30%, oklch(from var(--page-bg) l 0 h))
);
padding: var(--deco-color-marker-padding);
}
赤マーカー
code:style.css
/* red */
display: inline;
border-radius: 0.3em;
padding: 0.15em 0.25em 0.15em;
background-color: var(--code-helpfeel-bg, hsl(from var(--c-red-3, red) h s l / .3));
color: var(--code-helpfeel-entry-color, var(--page-text-color, #222)); font-size: 0.94em !important;
font-weight: 450 !important;
font-family: var(--code, ""), var(--tiny-latin, var(--sans-serif-latin)), var(--tiny-ja, var(--sans-serif-ja)), var(--icons, AppIcons), sans-serif;
--empty-page-link-color: light-dark(crimson, pink);
}
白（ライトテーマ互換用）
code:style.css
/* white */
display: inline-block;
background-color: light-dark(white, oklch(90% 0 0));
}
code:script.js
scrapbox.PopupMenu.addButton({
title: '🟦',
onClick: text => text.split('\n').map(line => [#~ ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '🟧',
onClick: text => text.split('\n').map(line => [#% ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '🟧例示',
onClick: text => text.split('\n').map(line => [#/ ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '🟨',
onClick: text => text.split('\n').map(line => [#" ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '🟩',
onClick: text => text.split('\n').map(line => [#& ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '🩷',
onClick: text => text.split('\n').map(line => [#! ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '🟥',
onClick: text => text.split('\n').map(line => [#!* ${line}]).join('\n')
})