blog.textfile.org結城浩のブログ

blog.textfile.org

Octopressでコード表示のフォントサイズを変更する

表示されるコードのフォントサイズが小さく感じたので変更する。

sass/custom/_styles.scss が最後に読み込まれるのでスタイルをオーバーライドしてしまうのが楽だし、 コメントを読むとそれが推奨されている。

コードのフォントを小さくしない

sass/custom/_styles.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.highlight .line-numbers, html .gist .gist-file .gist-syntax .highlight .line_numbers {
  font-size: 1em;
}

pre {
  font-size: 1em;
}

.code-title {
  font-size: 1em;
}

.download-source {
  font-size: 1em;
}

さらに背景を白く、文字を黒に

sass/custom/_styles.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.highlight .line-numbers, html .gist .gist-file .gist-syntax .highlight .line_numbers {
  background: rgb(255,255,255) !important;
  font-size: 1em;
}

pre {
  background: rgb(255,255,255) !important;
  font-size: 1em;
  color: black !important;
}

.code-title {
  font-size: 1em;
}

.download-source {
  font-size: 1em;
}

.pre-code, html .gist .gist-file .gist-syntax .highlight pre, .highlight code {
  color: black !important;
  background: rgb(255,255,255) !important;
}

code, p code, li code {
  color: black !important;
  font-size: 1em;
}

.pre-code span, html .gist .gist-file .gist-syntax .highlight pre span, .highlight code span {
  color: black !important;
  background: rgb(255,255,255) !important;
}