2013年4月22日月曜日

bloggerでgoogle-code-prettifyを利用

目的

bloggerで次のようなコードのハイライト表示を得たい。 
#include <iostream>
int main(){
  return 0;
}
また行内で、 std::cout<<"Hello!"<<std::endl; などとコードの一部表示。

方法

google-prettifyへのリンク
まずbloggerの管理ページから、"テンプレート" > "HTMLの編集" と進む。
表示されているhtml文書の</body>の直前に次をコピペする。
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js"></script>
さらに
<body> を <body onload='prettyPrint()'> に置き換え。
CSSの追加
ハイライトを見やすくする為に、背景を白にし、フォントを見やすく調節したい。
blogger管理ページから、"テンプレート" > "カスタマイズ" > "上級者向け" と進み、スクロールして一番下にある "CSS を追加" を選択。
"カスタム CSS を追加" のフィールドに以下をコピペする。
.prettyprint {
        background-color: #FFF8DC;
        border-radius: 4px;
        border: gray 0.5px !important;
          /* 外部のprettify.cssを使う場合は、
           * pre環境が既に定義されているので
           * こちらを優先させる為に"!important"をつける */
        font-family:  'Lucida Console';
        font-weight: ;
        padding: 1px;
        margin: 4px 2px 4px 2px;
        word-wrap:normal;
         /* bloggerのデフォルトcssでは
           * word-wrap:break-word
           * となって強制的に改行されるのでここで修正 */
        overflow-x: auto;
          /* 横方向に文字溢れのときのみスクロールバー表示 */
}
コードの記述
例えば次のようにhtmlで記述すると、冒頭の表示を得る事ができる。 
<pre class="prettyprint">
#include &lt;iostream&gt;
int main(){
     return 0;
}
また行内で、<code class="prettyprint">std::cout&lt;&lt;"Hello!"&lt;&lt;std::endl;</code>などとコードの一部表示。
</pre>
prettifyは言語を自動式別してくれるが、強制的に言語を識別させるには 
<pre class="prettyprint lang-html"> 
<!-- your code --> 
</pre>
などすればよい。
css設定（備忘用）
引用用の環境pre class="quote"、文法ハイライトをしないpre class="plane"、そしてh4,h5の設定もいじったので追記。 
pre.plane, code {
        background-color: #FFF8DC;
        border: solid #666666;
        border-radius: 4px;
        border-width: 1px;
        color: red;
        font-family:  'Lucida Console';
        font-weight: ;
        padding: 0px 5px 0px 5px;
        margin: 4px 2px 4px 2px;
}

pre.quote {
        border-left: solid 5px #bbbbbb;
        padding: 0 0 0 5px;
}

h4 {
        border: #bbbbbb solid;
        border-width: 1px 0px 0px 10px;
        border-radius: 2px;
        color: darkorange;
        padding: 2px 2px 2px 10px;
        margin: 20px 0px 5px 0px;
}

h5 {
        border-left: solid 10px #bbbbbb;
        text-indent: 5px;
        color:darkorange;
}
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)