いちおくまんえん

最近はcocos2d-xでゲームアプリ「いちおくまんえん」の制作がメインです。 あとアニメも少々・・

ソースコードを色付けして表示する

私が技術ブログをするにあたって、はてなブログを選んだのは、そうしている人が多かったからという単純な理由からなんですが。


なぜ多いのか分かったような気がした。
ソースコードの色付け機能がデフォルトで用意されてるってことが大きいのかなと思います。


普通の文字列として表示されても見づらいもんね(´・ω・`)


ぐぐってみた結果、思ってた以上に多様な言語を扱っているようでびっくり∑(゚Д゚)


ソースコードを色付けして記述する(シンタックス・ハイライト)


よっしゃーこれで俺も技術ブロガーの仲間入りだぜ!とか思ってそのままコピペしてみる。


プレビューをポチッとな


あれ?普通の文字列が・・・
勝手にHTMLタグが入っちゃってダメなんだろうとHTML編集タグから貼り付けて再度プレビュー。


・・・。 1行にまとめられて表示されただけだった。
そして気づいた。


そういえば設定ではてな記法モードとかあったような!


とりあえず書きかけの記事を下書き保存しつつ、設定で「はてな記法モード」に変更してみる。


f:id:ichiokumanyen:20130819010439p:plain

おうふっ!HTML編集モードがない!


WEB系な私オワタ\(^o^)/


でもリファレンスちょっと覗いてみるとwiki記法に似ている?ような気がする!
少し前にwiki触ってたこともあったのであまり抵抗なく受け入れれそう。


とりあえずサンプルをコピペ


これが

>|ruby|
class Foo
  def bar'baz' # return baz
  end
end
||<

こうなる

class Foo
  def bar'baz' # return baz
  end
end


はてな記法のエスケープするのに前にスペースとか入れて試してみたけど、色々バグったのでググる
特殊文字をHTMLで使ってるエスケープシーケンスに置き換えると良さそう
http://d.hatena.ne.jp/Duke_mosso/20070130/p2


上の例だとこんな感じで
f:id:ichiokumanyen:20130819013252p:plain


ソース色付けは出来るようになったのは良いんだけど、今まで見たまま編集モードとかで簡単に出来てた画像のリサイズ挿入とかが出来なくなるのが辛い(´;ω;`)ウッ…