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

 
1. 概要
2. 3つのスタイル

1. 概要

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

2. 3つのスタイル

 使い分けたい3つのスタイルとはすなわち。  ①行番号を表示するパターン。  ②行番号を表示しないで、①と同じインデント位置に表示するパターン。  ③行番号を表示しないで、インデント位置は左に寄せるパターン。

①
</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
④
AddType application/x-httpd-php .php cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
AddType application/x-httpd-php-source .phps
長い場合
list no language
④
AddType application/x-httpd-php .php cccccccccccccccccccccc
AddType application/x-httpd-php-source .phps
短い場合
list no language
 かつこれらに共通させたいのが
  1. 枠の幅は、本文が長くても短くてもすべて同じ
  2. 幅の右端ではみ出たものは折り返し
  3. 改行や空白は「white-space: pre-wrap;」の形式(
  改行で改行、空白は文字数分空けて、右端があふれたら折り返す


 行折り返し時の右端とのパディングの位置が違うのが気になるが・・・今はここまで・・・。


 
 
カウンタバックグラウンド