Twenty Ten カスタマイズ (15) Insert Code のカスタマイズ

概要:Windows Live Writer から投稿したInsert Codeのカスタマイズ

Windows Live Writer のコード挿入プラグイン「Insert Code for Windows Live Writer」を使用して記事にプログラムコードを記述した場合のスタイルを設定する。

  • 投稿する時は「Embed StyleSheet」にチェックを入れない。入れると記事そのものにスタイルが挿入されるので、後々変更しにくくなる。

    twentyten32_0


  • Insert Code for Windows Live Writerで投稿した場合は、ブロックに ”csharpcode” というclassが生成されるので、cssに表示スタイルを追加する。

  • 色分けすると見づらいので、注釈だけ色を変えることにする。色分けしているプログラムのヘルプなんて見たことないし。

  • 横にハミ出す文字列は自動折り返しする。

    style.cssに以下のコードを全部追加
    /*Insert Code for Windows Live Writer のスタイル追加変更*/
    
    #content .csharpcode
    {
    background-color: #444;
    font-family:  Consolas ,"Lucida Sans" ,"Helvetica Neue", Arial, Helvetica, Geneva, "Hiragino Kaku Gothic Pro", "MS PGothic", sans-serif;
    color: #ddd;/*基本文字色*/
    font-size:14px;
    line-height: 1.3em;
    margin-right:10px;
    
    
    
    /*自動折り返し*/
    padding: 10px 10px;
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: pre-wrap;      /* CSS3 */
    word-wrap: break-word;      /* IE 5.5+ */
    
    }
    
    
    /*色分け 注釈のみ色分けする*/
    .csharpcode .rem { 
        color: #99C296;/*注釈*/
    }

    このように長い文字列は、キリの良いところで折り返しされる
     twentyten32


    一行が長いコードの場合、「折り返して表示するべきか」、「スクロールバーを使用するべきか」。。。難しいな。

    ちなみにスクロールバーを表示するなら以下のコードを書く
    overflow: auto;/*スクロールバー自動表示*/
カテゴリー: WordPressの事   タグ: ,   この投稿のパーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>