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


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


　当サイト向けにスタイルシートをカスタマイズします。

　オリジナルとして使用しているのは Okaidia です。


2.　背景色を変更する・最大行を超えたらスクロール


　背景色を黒にします。
　はみ出た個所を折り返しするようにします。
　際限なく長くなりそうなソースもあるので、上限を超えたら縦のスクロールバーを表示して一度に表示するのは上限の行数までとします。


　[/usr/local/www/laravel/resources/views/ymo/07/12/04/prism-okaidia.css] というファイルが、なかったですじゃ・・・。

　の箇所を



: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.　コードの枠の調整


　コード表示の枠を丸みを帯びたものから鋭角へ、枠の位置を調整します。


　[/usr/local/www/laravel/resources/views/ymo/07/12/04/prism-okaidia.css] というファイルが、なかったですじゃ・・・。

　の箇所を



pre[class*="language-"]
{
	margin:  0   0 0   2em;												/*	外側と枠の間		*/
	padding: 1em 0 1em 0;												/*	内側と文字の間		*/
	overflow: hidden;
	width: 	820px;														/*	幅					*/
}




4.　行間の調整


　行間が当サイトの他の行に比べて間延びしているので


　[/usr/local/www/laravel/resources/views/ymo/07/12/04/prism-okaidia.css] というファイルが、なかったですじゃ・・・。

　を



line-height: 110%;



　としました。


5.　コード後の改行を抑制する


　コードを記述した後に余分な改行がひとつあるので


　[/usr/local/www/laravel/resources/views/ymo/07/12/04/prism-okaidia.css] というファイルが、なかったですじゃ・・・。

　ではじまる定義の末尾のここに


　[/usr/local/www/laravel/resources/views/ymo/07/12/04/prism-okaidia.css] というファイルが、なかったですじゃ・・・。

　以下を加えました。



	hyphens: none;
	display: inline-block;					/*	改行させない1 */
	_display: inline;						/*	改行させない2 */

}




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


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

　「#」のコメント箇所の定義


　[/usr/local/www/laravel/resources/views/ymo/07/12/04/prism-okaidia.css] というファイルが、なかったですじゃ・・・。

　属性定義・関数


　[/usr/local/www/laravel/resources/views/ymo/07/12/04/prism-okaidia.css] というファイルが、なかったですじゃ・・・。
earthcar（アースカー）