【jekyll｜scss】ソースハイライトのデザインを変更する

Table of Contents

• Jekyll｜SCSS ソースハイライトのデザインを変更する
  • 変更したいこと
  • 対処法
  • 結果

Jekyll｜SCSS ソースハイライトのデザインを変更する

変更したいこと

今は以下のように表示される。

気になるのが下記2箇所

1. テーブル内の罫線がある

2. 仮に罫線を消すと行番号とソースの境目が見づらくなる

上記の対策は同時に対応したい。

対処法

1. テーブル内の罫線がある

テーブル内の線を削除 以下を消せばよさそう

_base.scss: l.251

table td {
	border: 1px solid #e8e8e8;
}

ただ、外套のソースを見たところ、上記を消すと他のテーブルにも影響するっぽいので、設定を上書きする形にしたい。

2. 罫線を消すと行番号とソースの境目が見づらくなる

ソースを見ていると、 class="hljs-ln-line hljs-ln-code" というクラスのpaddingの左側に10pxぐらい追加すると良さそう。

コードの左に空間を追加。

.hljs-ln-line.hljs-ln-code {
	padding-left: 20px;
}

結果

上記の対処方であげた内容をまとめて、以下のようにソースを追加する

_sass\_base.scss l.259

/**
 * hsjlnのソースハイライトの設定
 */
table.hljs-ln {
  .hljs-ln-numbers {
    text-align: right;
  }
  .hljs-ln-code {
    padding-left: 20px;
  }
  td {
    border: none;
  }
}

before

after

テーブルを表示させたときに影響は出てなさそうに見えたので大丈夫そう。