Atomっぽい見た目にしたい-CodeBlock編
基礎設定 インラインコードライン
文字色を無効にしている。
code:style.css
code.code span {
}
基礎設定 ブロックコードライン
ちょっぴりcode-block-startや.code-blockを濃く設定した。
コードブロックとLatexブロックの文字色
code: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{
}
コードブロックの背景色を設定
頑張った........。
code:style.css
/* コードブロック全体の背景色設定 */
/* 元のapp.cssによる背景色を無効化してしまう。 */
.line span.code-block{
background-color: unset;
}
/* 実際に入力できる部分に背景色を追記する。(これだけではまだ足りない)*/
.line span.code-block span.indent{
}
/* コードブロック部に属する一番最後のインデントの要素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){
height: 100%;
/* ついでに右枠線を追加 */
}
/* 最後に、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%;
display:block;
padding: 0.1em 0;
}
/* コードブロックタイトル部分の背景色調整 */
.line span.code-block .code-block-start{
}
/* コードブロックタイトル部分の背景色を調節 */
.line span.code-block .code-start .code-block-start *{
}
CSSのシンタックスハイライト
code:style.css
span.hljs-keyword, span.hljs-selector-attr{
}
span.hljs-selector-id{
}
span.hljs-selector-tag{
}
span.hljs-selector-class, span.hljs-selector-pseudo{
}
こちらでは、コードのシンタックスハイライトが設定できる。
code:style.css
/* ビルトインオブジェクト */
span.hljs-built_in {
}
/* クラス */
span.hljs-class>.hljs-title{
}
/* 関数 */
span.hljs-function>.hljs-title{
}
/* 文字列リテラル */
span.hljs-string{
}
/* 数値 */
span.hljs-number{
}
Streamの最低限の文字色設定
code:style.css
.stream .page .code-block .code-block-start code{
}
.stream .page .code-block code{
}