マーカー記法
UserCSS.icon UserScript.icon
マーカー記法ないし文字装飾記法の最もシンプルかつ基本的な実装 2026-03-16 長らく次の記法を使っていたが、結局この最も単純な方式に移行することにしたNrem.icon これらの記法によってCosenseのパフォーマンスが低下する問題が技術的に解消しがたいことが分かったため
code:style.css
/* blue */
/* background-color: var(--c-blue-3, deepskyblue); color: black; */
background-color: light-dark( hsl(from var(--c-blue-3, deepskyblue) h s l / .35),
oklch(from var(--c-blue-4, gold) l c h / 25%));
}
/* orange */
/* background-color: var(--c-orange-4); color: white; */
background-color: light-dark( hsl(from var(--c-orange-5, darkorange) h s l / 35%),
oklch(from var(--c-orange-5, darkorange) l c h / .3));
}
オレンジマーカー2
code:style.css
/* e.g. */
background-color: light-dark( hsl(from var(--c-orange-4, darkorange) h s l / 20%),
oklch(from var(--c-orange-5, darkorange) l c h / .3));
padding-top: 5.5px; padding-bottom: 1px;
font-size: 0.94em; font-style: normal;
font-weight: var(--inline-quote-font-weight, var(--quote-font-weight, 450));
font-family: var(--inline-quote-font-family, var(--quote-font-family));
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(hsl(from var(--c-yellow-4, gold) h s l / 35%),
oklch(from var(--c-yellow-5, gold) l c h / .3));
}
/* green */
/* background-color: var(--c-green-4, forestgreen); color: white; */
background-color: var(--c-green-4, darkgreen);
background-color: light-dark(hsl(from var(--c-green-2, lime) h s l / 35%),
oklch(from var(--c-green-5, gold) l c h / .3));
}
/* magenta */
/* background-color: hsl(from var(--c-red-1, red) h s l / 35%); */
background-color: light-dark(hsl(from deeppink h s l / .35), oklch(from deeppink l calc(c * 1.2) h / .3));
}
/* red */
display: inline-block;
border-radius: 0.3em;
padding: 0.15em 0.25em 0.15em;
background-color: var(--code-helpfeel-bg, hsl(from var(--c-red-5, red) h s l));
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: pink;
}
/* 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')
})