HTML - シンタックスハイライト - prism.js - スタイルシートのカスタマイズ

 
1. 概要
2. 背景色を変更する・最大行を超えたらスクロール
3. コードの枠の調整
4. 行間の調整
5. コード後の改行を抑制する
6. キーワード等の定義箇所

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;		//	最大行数(実際はマイナス2行表示)
	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 */

}

6. キーワード等の定義箇所

 色をカスタマイズするためにどこをさわればいいか、確認済の箇所です。  # のコメント箇所の定義

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}
 属性定義・関数

.token.atrule,
.token.attr-value,
.token.function {
	color: #e6db74;
}