コードブロック記法をAtomっぽい配色にするUserCSS
コードブロック記法をAtomっぽい配色にするUserCSS
from /appbirdNotebook-public/Atomっぽい見た目にしたい-CodeBlock編
少し不満点がある
コメントが見づらい
関数名とbuilt-in関数名との区別がつきにくい
takkerのdark theme CSSで使っていたが、Scrapboxの標準のDark themeが導入されたのでそっちを使うことにした
code:style.css
code.code span,
code.cli span,
.line code.code-body,
.line .formula code,
.page-list-item .description code/* ページカード用 */{
color: var(--code-color);
}
.line code.helpfeel {
background-color: var(--code-bg);
}
.line span.code-block .code-block-start {
background-color: #21252b;
}
.line span.code-block .code-block-start>css,
.line span.code-block .code-block-start>span>*{
font-size: inherit;
color: rgba(157, 165, 180, 0.6);
}
.line span.code-block .code-block-start>* {
padding: 3px;
}
.line span.code-block .code-block-start:hover{
color: rgba(157, 165, 180, 1.0);
}
span.hljs-keyword, span.hljs-selector-attr{
color:#c678dd;
}
span.hljs-selector-id{
color: #56b6c2;
}
span.hljs-selector-tag{
color: #e06c75;
}
span.hljs-selector-class, span.hljs-selector-pseudo{
color: #d19a66;
}
span.hljs-built_in {
color: #e06c75;
}
span.hljs-class>.hljs-title{
color: #56b6c2;
}
span.hljs-function>.hljs-title{
color: #61afef;
}
span.hljs-string{
color: #98c379;
}
span.hljs-number{
color: #d19a66;
}
#2022-03-10 09:58:14