style.css/* 色設定 */
body *::before {
--code-number-color: #1C2B27;
--code-accent-color: #C9E6DE;
}style.css/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.section-title {
counter-reset: codeline;
}
.code-block span.indent code.code-body {
counter-increment: codeline;
margin-left: -1.5em;
padding-left: 2.3em;
}
.code-block span.indent code.code-body::before {
content: counter(codeline);
position: absolute;
display: inline-block;
z-index: 10;
margin-left: -2.4em;
width: 2em;
padding-right: 0.2em;
text-align: right;
vertical-align: bottom;
border-right: solid 1px #fff;
/* ↓行番号の色の指定はここ */
color: var(--code-number-color);
}
/* カーソル行の行番号を濃く表示する */
.code-block span.indent code.code-body::before {
opacity: .5;
}
.cursor-line .code-block span.indent code.code-body::before {
opacity: 1;
font-weight: bolder;
/* ↓カーソル行の背景色の色はここ */
background-color: var(--code-accent-color);
}
}style.css!@import '../コードブロック行頭の空白の色を変えるCSS/style.css';
html[data-project-theme="paper-dark-dark"],
html[data-project-theme="defaut-dark"] {
--code-line-number-color: #D181FF;
}
.section-title, .code-block-start {
counter-reset: codeline
}
.code-block .indent-mark > span.char-index:last-child {
counter-increment: codeline
}
body:not(.presentation) .code-block .indent-mark > span.char-index:last-child::before {
content: counter(codeline);
position: absolute;
}
.code-block .indent-mark > span.char-index:last-child::before {
color: var(--code-line-number-color, #3f3f3f);
}
/* カーソル選択時の行番号の色 */
.cursor-line .code-block .indent-mark > span.char-index:last-child::before {
color: var(--cursor-code-line-number-color, #FF00F0);
font-weight: bolder;
}style.css!/* コード記法の行番号を表示 */
@media screen and (min-width: 768px) { /* ウィンドウ幅768px以上で適用 */
.section-title, .code-block-start { counter-reset: codeline }
.code-block .pad:not(.code-block-margin) { counter-increment: codeline }
.code-block .pad:not(.code-block-margin)::before {
content: counter(codeline);
position: relative;
top: -0.2em; /* 行番号が若干ズレるのを補正 */
display: inline-block;
left: 1px;
z-index: 10;
min-width: 50px;
text-align: left;
vertical-align: bottom;
font-family: Cica,Consolas,Roboto,Helvetica,Arial,"Hiragino Sans",sans-serif;
/*color: #3f3f3f;*/
color: var(--code-color, #3f3f3f); /* dark themeでも見えるように */
font-size: 11px;
}
/* カーソル行の行番号を濃く表示する */
.code-block .pad:not(.code-block-margin)::before { opacity: .5 }
.cursor-line .code-block .pad:not(.code-block-margin)::before { opacity: 1; font-weight: bolder }
}