HTML - シンタックスハイライト - prism.js - 複数のスタイルを使い分ける

1.　概要

2.　３つのスタイル

1.　概要

　前項でスタイルシートのカスタマイズを行いましたが、さらにそれを進めて、４つのスタイルを使い分けたいのです。

2.　３つのスタイル

　使い分けたい３つのスタイルとはすなわち。

　①行番号を表示するパターン。
　②行番号を表示しないで、①と同じインデント位置に表示するパターン。
　③行番号を表示しないで、インデント位置は左に寄せるパターン。


①
</IfModule>
# aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
長い場合
line-numbers


①
</IfModule>
短い場合
line-numbers


②
AddType application/x-httpd-php .php cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
AddType application/x-httpd-php-source .phps
長い場合
list


②
AddType application/x-httpd-php .php cccccccccccccccccccccc
AddType application/x-httpd-php-source .phps
短い場合
list


③
service apache24 configtest bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
service apache24 restart
長い場合
bare


③
[Tue Jun 26 12:47:39.237280 2018] [core:notice] [pid 4548] AH00052: child pid 6831 exit signal Segmentation fault (11) dddddddddddddddd
長い場合
bare


③
[Tue Jun 26 12:47:39.237280 2018] [core:notice]
短い場合
bare


　かつこれらに共通させたいのが

　
1. 枠の幅は、本文が長くても短くてもすべて同じ 　
2. 幅の右端ではみ出たものは折り返し 　
3. 改行や空白は「white-space: pre-wrap;」の形式（※）

　※　改行で改行、空白は文字数分空けて、右端があふれたら折り返す
　行折り返し時の右端とのパディングの位置が違うのが気になるが・・・今はここまで・・・。