dark-theme
code:style.css
@import "./codeblock.css";
code:codeblock.css
code.code span {
color: #abb2bf;
}
.line span.code-block {
/* line-height: 20px;*/
line-height: 1.7em;
font-size: 110%;
}
/* コード本体の色と、LaTexのコード本体の色を修正*/
.line code.code-body, .line .formula code{
color: #abb2bf;
}
/* コードブロック全体の背景色設定 */
/* 元のapp.cssによる背景色を無効化してしまう。 */
.line span.code-block{
background-color: unset;
}
/* 実際に入力できる部分に背景色を追記する。(これだけではまだ足りない)*/
.line span.code-block span.indent{
background-color: #0d0f1455;
}
/* コードブロック部に属する一番最後のインデントの要素Iを適切に着彩するべく、.code-block要素の子でありIの親である.indent-mark要素に注目し、それを.code-blockと同じ高さに引き延ばす。 */
.line span.code-block .indent-mark{
height: 100%;
}
/* コードブロック部に属する一番最後のインデントにだけ着彩する。祖父母要素の高さがcode-block長ぴったりなので、これも親要素と同じ高さに揃えればいい。(height:100%)*/
.line span.code-block .pad:not(.code-block-margin){
background-color: #0d0f1455;
height: 100%;
/* ついでに右枠線を追加 */
border-left: 5px #15181c solid;
}
/* 最後に、code-block-marginにあるbackground-colorの設定を引き剥がしておく。*/
.line span.code-block .code-block-margin{
background-color: unset;
}
/* ファイル表示の黒欄が行全体に渡るように。*/
.line span.code-block code.code-start {
width: 100%;
border-left: 5px #15181c solid;
background-color: #15181c;
display:block;
padding: 0.1em 0;
}
/* コードブロックタイトル部分の背景色調整 */
.line span.code-block .code-block-start{
background-color: #15181c;
}
/* コードブロックタイトル部分の背景色を調節 */
.line span.code-block .code-start .code-block-start *{
color: #636976;
}
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;
}
.stream .page .code-block .code-block-start code{
color: #abb2bf;
}
.stream .page .code-block code{
color: #abb2bf;
}