2016年10月12日水曜日

ブログでターミナルのコマンド表示をプログラムの様に表示する

ターミナルなどのコマンドをブログで書くときに、
プログラム用のコードシンタックスでは、
変なところに色がついてしまうので、
コマンドの表記様にCSSを追加してそれっぽく表示させる。

テンプレート→カスタマイズ→上級者向け→CSSを追加でCSS編集画面を開く。
自分が使っているコードシンタックスのスタイルを参照しつつ、
以下の様に記入。
pre.commandline {
    width: 95%;
    margin: 1em auto;
    padding: 1em;

    white-space: pre-wrap;

    background-color: #000000;

    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;

    color: #FFFFFF;

    overflow: auto;
    word-wrap: break-word;
}

参考にしたページ
http://kymyt.blogspot.jp/2013/03/blogger.html

0 件のコメント:

コメントを投稿