Atomっぽい見た目にしたい-CodeBlock編
基礎設定 インラインコードライン
文字色を無効にしている。
基礎設定 ブロックコードライン
ちょっぴり code-block-start や .code-block を濃く設定した。
コードブロックとLatexブロックの文字色
style.css/* code blockのフォントを小さくする設定 */
.line span.code-block {
/* line-height: 20px;*/
line-height: 1.7em;
font-size: 110%;
}
/* コード本体の色と、LaTexのコード本体の色を修正*/
.line code.code-body, .line .formula code{
color: #abb2bf;
}
コードブロックの背景色を設定
頑張った........。
style.css/* コードブロック全体の背景色設定 */
/* 元の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 {
font-size:140%;
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;
}
CSSのシンタックスハイライト
style.cssspan.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;
}
こちらでは、コードのシンタックスハイライトが設定できる。
style.css/* ビルトインオブジェクト */
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の最低限の文字色設定
style.css.stream .page .code-block .code-block-start code{
color: #abb2bf;
}
.stream .page .code-block code{
color: #abb2bf;
}