Bloggerのカスタマイズ Ⅶ　私のための覚え書き

40．ソースコードの表示スタイルを変更

黒背景を変更したくなったので、スタイルをGoogle code prettifyのデフォルトに変えました。さらにCSSをいじって、色々好みの調整をしてみました。

行番号付にすると行ごとにストライプにできますが、行番号なしだとストライプにはなりません。スキンの変更を含めて考えられるところをいじってみましたが、うまくいきませんでした。

また、横スクロールでもストライプが切れてしまうようです。

<!-- Google code prettify start -->
<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js'/>
    <style type='text/css'>
      pre.prettyprint {
        width :90%;/*ソースコードの画面比率*/
        margin: 0 0 0 5%;/*左端から5%ずらす*/
        padding: 0 0 0 20px;/*番号欄の幅*/
        background-color: #fffff9;/*全体の背景色 ミルキーホワイト*/
        border: 1px dotted #888;
        font-size: 13px;
        overflow: auto;
        white-space: pre-wrap;  
      }

      .prettyprint ol.linenums > li {
        list-style-type: decimal;/*毎行番号付け*/
        margin-bottom: 0;/*ここで下marginを指定したら縦線の下隙間がなくなった*/
      }
      
      pre.prettyprint.high {/*枠を高さ制限するオプション*/
        overflow: auto;
        height: 23em;
      }

      li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9 {/*番号横の縦線*/
      	padding-left: 15px;
      	line-height: 1.5;
      	border-left: 2px solid #6CE26C;
      }
      li.L1,li.L3,li.L5,li.L7,li.L9 {/*1行おきに背景色変更*/
      	background: #eaf4ff;

      </style>
<!-- Google code prettify end -->