settings
code:style.css
/* インデントの装飾 */
.app .line .indent-mark .dot {
right: 10px;
top: 12px;
width: 6px;
height: 2px;
border-radius: 0;
background-color: white;
}
.app:not(.presentation) .line .indent-mark .dot {
top: auto;
bottom: 0;
}
/* ピン留めされたページを独立した段に表示する */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
/* 768px以上の時コードの行番号を表示する */
@media screen and (min-width: 768px) {
.section-title, .code-block-start {
counter-reset: codeline;
}
.code-block code > span:not(class) { counter-increment: codeline;
}
.code-block code > span:not(class)::before { content: counter(codeline);
position: absolute;
display: inline-block;
left: -4em;
z-index: 10;
min-width: 50px;
text-align: right;
vertical-align: bottom;
color: white;
}
.code-block code > span:not(class)::before { opacity: 0.6;
}
.cursor-line .code-block code > span:not(class)::before { opacity: 1;
font-weight: bolder;
}
}
表示確認
インデント
code:sample.js
'use strict';
console.log('aiueo');
Reference
https://scrapbox.io/files/638eee84c4c78400227ee494.png