xpwikiのcodeプラグインの表示の具合が乱れる。
pukiwikiオリジナルのスタイルだと正常に表示されるのだが レスポンシブデザインな表示だと宜しくないようだ。
そこで スタイルシートを調整してみる。codoプラグインで使用されるスタイルシートはXOOPS_TRUST_PATH/modules/xpwiki/skin/css/code.cssなんだが、このファイルを直接修正すると アップデート時に上書きされて初期化されてしまう。
そこで code.cssをXOOPS_ROOT_PATH/modules/[インストールディレクトリ]/skin/css/code.cssにコピーして このファイルを修正する。今回は 全てそのままコピーして修正を加えたが、修正した項目だけを移すのが良いようだ。
今回は 以下のような感じで 行番号表示の項を修正してみた。
[code]
/* 行番号表示 */
$class table.code_table pre.code_number,
$class table.code_table pre.pre_number
{
/*white-space: nowrap; これは失敗だった。 */
background: #F0F8FF;
margin: 0;
padding: 0;
padding-right: 0.5ex;
border: none;
/*border-right: 1px solid #CCDDDD;*/
line-height: 140%; /* 120%から140%に調整 */
min-width: 3.5ex; /* この行を有効化 */
}
[/code]
取りあえずＰＣで見た状態だと正常に表示されるようになった。 んがっ！ スマフォなど小さな画面で見た場合は 横幅が調整されてスライダーが枠から離れた位置に表示される。 これもスタイルシートで何とかなりそうなんだが・・・ 検討課題ということで。