settings
special thanks: さん
code:style.css
.section-title, .code-block-start { counter-reset: codeline }
.code-block code > span:not(class) {
counter-increment: codeline
}
body:not(.presentation) .code-block code > span:not(class)::before {
content: counter(codeline);
position: absolute;
display: inline-block;
left: -4rem;
z-index: 10;
min-width: 50px;
text-align: right;
vertical-align: bottom;
}
/* 行番号の色 */
.code-block code > span:not(class)::before { color: #D181FF; }
/* カーソル選択時の行番号の色 */
.cursor-line .code-block code > span:not(class)::before {
color: #FF00F0;
font-weight: bolder ;
}
code: style.css
/* コード全体のCSS */
.line code {
color: #f8f8f2;
}
.line span.code-block {
background-color: black;
/* code blockのフォントを小さくする設定 */
line-height: 1.4;
font-size: 100%;
}
.page-list-item .description code,
.line code,
.line span.code-block {
font-family: "MyricaM M", "Ricty Discord", "Ricty Diminished Discord", "Ricty", "Ricty Diminished", monospace ;
}
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
}
code:style.css
/* コードブロックのタイトルの文字色 */
.line span.code-block .code-block-start { color: #342d9c; }
code:style.css
/* 各セレクタやプロパティの色を変更 */
.hljs-title,
.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link,
.hljs-attribute {
color: #00FFFF;
}
.hljs,
.hljs-subst {
color: #f8f8f2;
}
.hljs-name,
.hljs-meta {
color: #65B5FF;
}
.hljs-type,
.hljs-attr,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable,
.hljs-params,
.hljs-built_in {
color: #f1fa8c;
}
.hljs-comment,
.hljs-quote,
.hljs-deletion {
color: #0C0;
}
.hljs-class .hljs-title,
.hljs-literal,
.hljs-number {
color: #bd93f9;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-selector-id,
.hljs-selector-attr,
.hljs-keyword,
.hljs-selector-pseudo {
color: #FE7F7F;
}
.hljs-selector-class,
.hljs-string { color: #FFC323; }
.hljs-regexp {
color: #f1fa8c;
}
code:style.css
/* デフォルトのままだと背景を暗くしたコードブロック内でカーソルが見えなくなるので、色や太さを変更 */
.cursor { width: 3px; background-color: #ccc }
spcial thanks: さん
code:style.css
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #f27e48;
font-size: 0.8em;
border: 1px solid #f27e48;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}