コードのハイライト表示なら、google-code-prettifyがお手軽でした

プログラムなどをブログで紹介する時は、綺麗に色分けすると見やすいですよね。
他のライブラリに比べ機能は少ないかんじですが使用法は一番簡単でした。

表示例です（C言語ソース）

int start()
  {
//----
   SymbolData = "";
   int order_type;
   int total = OrdersTotal();
   for(int pos=0;pos<total;pos++)
   {
      if(OrderSelect(pos,SELECT_BY_POS)==false) continue;
      if(NoMagicOnly && OrderMagicNumber() !=0) continue;//MagicNumber のある注文は数えない。
      if(ChartPairOnly && OrderSymbol() !=Symbol()) continue;//チャート以外のペアは無視。
      order_type=OrderType();
      if(order_type == OP_BUY || order_type == OP_SELL) continue;
      if(StringFind(SymbolData,OrderSymbol())==-1){
         SymbolData = SymbolData + OrderSymbol();
      }else{
         SymbolData = delSymbol(SymbolData,OrderSymbol());
      }
   }

シンプルなレイアウトですが情報の伝達には十分かと思います。

機能と注意点

• 言語は自動で判別されます。（指定も可能です）
• 行番号表示が可能です。
• 見栄えを変えるテーマskinを変更できます。

Bloggerでの使い方

1. google-code-prettifyライブラリを読み込みます。

投稿エディターをHTLMモードにして、次のコードを最初の行に追加します。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>


2. ハイライト表紙したいコードを、pre要素で囲みclassに"prettyprint"を指定します。

「<」「>」は、「&lt;」「&gt;」に直しておくと表示の不具合を防げます。

<pre class="prettyprint">
ソースコード
・・
</pre>
以上の２ステップでハイライト表示ができます。


また

• クラスにlinenumsを追加すると行番号を表示することができます。

<pre class="prettyprint linenums">

• テーマの変更方法。CDNからの読み込みの際にパラメータをつける方法 例：desert

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?desert"></script>

指定できるテーマはこちらです
🚀　Gallery of themes for code prettify
https://rawgit.com/google/code-prettify/master/styles/index.html

詳しいマニュアルは英文ですが以下を参照ください。
🚀　Getting Started
https://github.com/google/code-prettify/blob/master/docs/getting_started.md

これならプログラムコードを紹介するのも苦にならない。はず