Dracula Code CSS
https://gyazo.com/df6c4ad341d0c947043d7c8ae59dcba7
https://github.com/dracula/highlightjs/blob/master/dracula.css
code:import.css
@import '/api/code/progfay-pub/Dracula_Code_CSS/style.css'
code:style.css
.line span.code-block {
background-color: #282a36;
}
.line code > span > span {
color: #f8f8f2;
}
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
}
.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link {
color: #8be9fd;
}
.hljs-keyword {
color: #ff79c6;
}
.hljs,
.hljs-subst {
color: #f8f8f2;
}
.hljs-title {
color: #50fa7b;
}
.hljs-string,
.hljs-meta,
.hljs-name,
.hljs-type,
.hljs-attr,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
color: #f1fa8c;
}
.hljs-comment,
.hljs-quote,
.hljs-deletion {
color: #6272a4;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
font-weight: bold;
}
.hljs-literal,
.hljs-number {
color: #bd93f9;
}
.hljs-emphasis {
font-style: italic;
}
code:style.css
.hljs-selector-id, .hljs-selector-class {
color: #50fa7b;
}
.hljs-params, .hljs-built_in {
color: #50fa7b;
}
.hljs-regexp {
color: #f1fa8c;
}
code blockのカスタマイズ
code:style.css
/* code blockのフォントを小さくする設定 */
span.code-block {
line-height: 20px;
font-size: 90%;
}
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
border: solid 1px #66667F;
background-color: rgb(39, 40, 34);
padding: 2px 5px 2px 5px !important;
}
.line span.code-block .code-block-start a { font-size: 110%; color: white }