2010年11月15日月曜日

Bloggerへのソースコード貼り付け

Bloggerにソースコードを貼り付ける方法を考えてみた。

「デザイン」=>「HTML の編集」より、以下のスタイルを追加する。

.main-outer pre.src{
display: inline-block;
margin: 4px 0px 6px 15px;
padding: 5px;
border: 3px dotted #98CB00;
background-color: #bbdd88;
font-family: monospace;
font-size: smaller;
width: 95%;
overflow: auto;
}

.main-outer pre{
display: inline-block;
margin: 4px 0px 6px 15px;
padding: 5px;
border: 3px dotted #CB9800;
background-color: #ddbb88;
font-family: monospace;
font-size: smaller;
width: 95%;
overflow: auto;
}


実際の記事にソースコードに貼り付けるときは以下のようにする。
<pre class=src>.main-outer pre.src{
display: inline-block;
margin: 4px 0px 6px 15px;
padding: 5px;
border: 3px dotted #98CB00;
background-color: #bbdd88;
font-family: monospace;
font-size: smaller;
width: 95%;
overflow: auto;
}
</pre>


エラーやプログラムの出力などソースコード以外を貼り付けるときは以下のようにする。
<pre>.main-outer pre{
display: inline-block;
margin: 4px 0px 6px 15px;
padding: 5px;
border: 3px dotted #CB9800;
background-color: #ddbb88;
font-family: monospace;
font-size: smaller;
width: 95%;
overflow: auto;
}
</pre>

色合いなど満足できていないが、当面はこのままいこうと思う。

0 件のコメント:

コメントを投稿