1. 概要
当サイト向けにスタイルシートをカスタマイズします。
オリジナルとして使用しているのは、「Okaidia」です。
2. 背景色を変更する・最大行を超えたらスクロール
背景色を黒にします。
はみ出た個所を折り返しするようにします。
際限なく長くなりそうなソースもあるので、上限を超えたら縦のスクロールバーを表示して一度に表示するのは上限の行数までとします。
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #272822;
}
の箇所を。
:not(pre) > code[class*="language-"],
pre[class*="language-"]
{
background: #000000;
white-space: pre-wrap;
max-height: $max-line; // 最大行数（実際はマイナス２行表示）
overflow-y: auto;
}
としました。
44行目は、「$max-line」という変数を使用しています。
2018年11月現在、さらに これを「.scss」で記述しているからです。
3. コードの枠の調整
コード表示の枠を丸みを帯びたものから鋭角へ、枠の位置を調整します。
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}
の箇所を。
pre[class*="language-"]
{
margin: 0 0 0 2em; /* 外側と枠の間 */
padding: 1em 0 1em 0; /* 内側と文字の間 */
overflow: hidden;
width: 820px; /* 幅 */
}
4. 行間の調整
行間が当サイトの他の行に比べて間延びしているので。
line-height: 1.5;
を。
line-height: 110%;
としました。
5. コード後の改行を抑制する
コードを記述した後に余分な改行がひとつあるので。
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
ではじまる定義の末尾のここに。
hyphens: none;
}
以下を加えました。
hyphens: none;
display: inline-block; /* 改行させない1 */
_display: inline; /* 改行させない2 */
}
本項、2026年6月3日時点で、改造箇所が変わりましたので、目次から「コード後の改行（改）」というページをたどってください。
6. キーワード等の定義箇所
色をカスタマイズするためにどこをさわればいいか、確認済の箇所です。
「#」のコメント箇所の定義。
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
属性定義・関数。
.token.atrule,
.token.attr-value,
.token.function {
color: #e6db74;
}
