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>

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