blogにソースコードを載せる（まとめ）

計3回にわたってブログにソースコードを掲載する方法を検討してきました。
今回はそのまとめです。
各方法の検討については、以下の過去記事を参照してください。

blogにソースコードを載せる（はてなのシンタックス・ハイライト編）

blogにソースコードを載せる（Gist編）

blogにソースコードを載せる（SyntaxHighlighter編）

各方法での記述方法と表示結果

各方法での記述方法と表示結果を比較してみます。

記述方法

まずはそれぞれの記述方法から

はてなのシンタックス・ハイライトの記述書式

```java
ここにソースコードを記述
```

Gistの記述書式

<script src="https://gist.github.com/akiotsutsumi/63e695e165385060c28f.js"></script>

SyntaxHighlighterの記述書式

<pre data-unlink="" class="brash:java" title="SyntaxHighligterを使用したJavaコード(Eclipse風)">
ここにソースコードを記述
</pre>

記述方法のまとめ

記述方法のシンプルさで言えば、はてなのシンタックス・ハイライトがダントツ

Gistも記述方法というより、リンクを貼り付けるのみなので見方を変えればこれもかなりシンプル

但し、blog上だけで完結しないという意味ではトレードオフかも

3つの中での比較で言えば、SyntaxHighlighterが手間が多い

SyntaxHighlighterについては、中に書くコード次第では更に面倒になる（HTMLタグ関連）

表示結果

次は表示された結果について

はてなのシンタックス・ハイライトの表示結果

public class Hoge {
  private static final String HOGE_ID = "hogeID-001";
  
  /** hoge1 */
  private String hoge1;
  
  /**
   * デフォルトコンストラクタ<br>
   */
  public Hoge() {
    this.hoge1 = HOGE_ID;
  }
  
  // hoge1を返却
  public String getHoge1() {
    return this.hoge1;
  }
}

Gistの表示結果

SyntaxHighlighterの表示結果

public class Hoge {
  parivate static final String HOGE_ID = "hogeID-001";
  
  /** hoge1 */
  private String hoge1;
  
  /**
   * デフォルトコンストラクタ

   */
  public Hoge() {
    this.hoge1 = HOGE_ID;
  }
  
  // hoge1を返却
  public String getHoge1() {
    return this.hoge1;
  }
}

2015/05/28追記
現在はSyntaxHighlighter用jsの設定をOFFにしている為、ハイライト表示されません。

表示結果のまとめ

単純な見た目だけで言えば、SyntaxHighlighter >= Gist > はてなのシンタックス・ハイライト

はてなのシンタックス・ハイライトは行番号が表示されないのが残念

SyntaxHighlighterは見た目は1番好きだが、表示された結果の通り、HTMLタグ関連がダメ

実はスマホで見た場合でもちゃんと表示されているのはGistだけ

SyntaxHighlighterはスマホデザイン側に反映してないだけだが、重くなりそうなのでorz

はてなのシンタックス・ハイライトは表示はされるけど、改行が入って見づらい

まとめ

というわけで、それぞれを比較した結果、今後はしばらくGistでのコード掲載をして行こうと思います。
3つを比較した結果、一番バランスよく、かつ見た目も納得出来る範囲だったのが要因です。

Gist運用での今後の課題としては、以下ですかね。

Gistのクライアントアプリの検討

毎回ブラウザから登録でもいいけど、利便性考えると何らかのクライアントアプリが欲しい

普段はPCでblogを書くけど、iPadでも書く場合もありそうなので、iPad版のGistクライアントも欲しい

といいつつ、PC/iPadとも良さげなアプリを既に見つけてるので、次のブログにて紹介します

検索エンジンにソース内容が引っかからないかも問題

ソースの実体がblog上にあるわけでないので、、、でもこれはどうしようもないかも？

技術ブログを書こうとしている方々は、参考にして見てください！
また、それぞれの手順等についてわからない所があれば、答えれる部分は答えますので
お気軽に質問ください！

林檎と珈琲

Apple product(Macbook, iPhone, iPad) and Programming language(Java) .