ブログにシンタックスハイライト(色付け)でソースコードを貼る方法 

今回、このFC2ブログに、ソースコードを貼ろうと思ったのですが、
ただソースコードを貼るのも見づらいので、色付けしてくれる機能を
探してみました。

ソースコードの色付けを「シンタックスハイライト」と言うのですね。
知りませんでした(笑)。


ライブラリが結構たくさんある。


ホームページやブログにソースコードを貼ることができる
シンタックスハイライト表示ライブラリは、種類がいくつもあるようで、
ハイライトの色の感じが異なったり、行数表示があったり、いろいろなですね。
ただ、どれも主要言語には対応しているようなので、
言語についての心配はあまりなさそう。

あなたのソースコードを彩る、Syntax Highlighterまとめ

↑のサイトをはじめ、ググッてみると、まとめサイトもいくつかあります。


はてなダイアリーとかだと、ライブラリを入れなくても、
はてな記法でソースコードのシンタックスハイライト機能があるみたいですね。
(FC2ブログも用意してくれないかなぁ。)


私が今回探した条件


今回、私が選ぶための条件として、以下の点に注目しました。

★ブログからコピペで、エディタに貼ったときに、改行等がきちんとコピーできること

  割と多くのシンタックスハイライトライブラリは、
  数行のソースコードをコピペすると、
  エディタ上で改行無しで1行になってしまうようです。
  
  これだと、ブログを見た人がソースコードを手元にコピペするときに困りますよね。
  (私のソースをコピペする人はいないだろうけどwww)

  そのままコピペできるライブラリは、私が探した中では以下の2つ。
  ◆コードを色付けるシンタックスハイライトjavascript「SHJS」
  ◆ソースを華麗に整えるjavascript「SyntaxHighlighter」


★FC2ブログの記事投稿時の「改行の扱い」について

  FC2ブログの記事投稿では、「改行の扱い」というオプションがあります。
  FC2ブログの投稿画面で、記事を書くときに改行を反映するかしないかの設定です。
  
  「SyntaxHighlighter」では、投稿時の「改行の扱い」を「HTMLタグのみ」にしないと、
  ソースコードを貼ったときに、各行の先頭に<BR>が表示されてしまいます。
  「HTMLタグのみ」にすると、FC2ブログの記事投稿時に、文章のの改行を
  自分でしないといけないので、投稿が面倒になります。

  「SyntaxHighlighter」は、行数表示があったり、見た目もかっこよかったりするのですが、
  この点が引っかかるので、やむなく断念。

FC2Blogでは、改行タグが入ってしまう。




FC2ブログと改行について


「SHJS」を使うにしても、「SyntaxHighlighter」を使うにしても、
シンタックスハイライト機能を使って、普通にFC2ブログでコードを書くと、
「1行」扱いされてしまいます。

なので、いろいろ試した結果、
ソースコードの各行末に改行コード「&#13」([CR]のHTML10進表記)を入れました。
([CRLF]でも良かったんですけど、FireFoxで見たときに2行分の改行がされてしまいます。)
(これだと、Macで見たときにどうなっちゃうんでしょう。Maxマシンが手元に無いので、未確認。)


このあたりは、FC2ブログの自動改行の扱いとかと絡んできていたりで、ややこしいので、
良い解決策があれば、教えていただきたいところです。



最終的に選んだのは、「SHJS」


ということで、最終的には、「SHJS」というライブラリをこのFC2ブログに入れました。


「SHJS」と「SyntaxHighlighter」の使い方は↑でリンクしたサイトの説明を見ればよいと。

↓はPythonソースコードをSHJSで貼った例。(水色の枠線は自分で別に設定したもの)

# -*- coding: utf-8 -*-

class Hoge:
def print_hoge(self):
# hogeを出力する
print u"hoge"

if __name__ == '__main__' :
a = Hoge()
a.print_hoge()


とりあえず、ソースコードをそれっぽく貼れるようになった。うん。


となりの801ちゃん(1)
ブログ内検索
プロフィール

あとねっくす

Author:あとねっくす
[メールアドレス]
atnexblogあっとまーくgmail.com

さいきんのおすすめ

ムゲンプチプチ ぷち萌え ツンデレ編
ムゲンプチプチ ぷち萌え ツンデレ編【Amazon】 【楽天】


日常 2 (2) (角川コミックス・エース 181-2)
日常 2 (2) (角川コミックス・エース 181-2)【Amazon】 【楽天】
月刊少年エースで連載されているマンガです。エヴァTシャツ付録のときに買った少年エースで「日常」を読んで、盛大に吹いてしまいました。その後、気になって、コミック1,2巻とも読みましたが、これはヤバイです。面白いので、みなさんもぜひどうぞ。


Darling(初回限定盤)
Darling(初回限定盤)【Amazon】 【楽天】

勇者のくせになまいきだ。
勇者のくせになまいきだ。【Amazon】 【楽天】 不覚にもハマってます。お手軽にできるゲームなので、ゲームボーイのテトリスと同じ感覚(って言って分かる人いますかね?)で気軽にプレイできるのですが、その気軽さが命取りで、「もう1回、あともう1回」という感じで気づいたら、数時間プレイしているという・・・。正直、面白いです。気が付いたら、PSPのバッテリーが切れました・・・。家でプレイしているのに、アダプタ付けてなかった。

腐女子の品格
腐女子の品格【Amazon】 【楽天】

みんなのPython Webアプリ編 [みんなのシリーズ]
みんなのPython Webアプリ編 [みんなのシリーズ]【Amazon】 【楽天】
前作、みんなのPythonはPythonでプログラムするときは、常に手元にあります。気づけば、いろいろ書いてあって、たまに読んでも気づきが多い本です。そのWebアプリ編ということで期待度が高いです。wktk。(ただいま少しずつ読書中。)

みんなのPython
みんなのPython【Amazon】 【楽天】
私はこれでPythonをはじめました。

ドラマCD「エル・カザド」第2巻
ドラマCD「エル・カザド」第2巻【Amazon】 【楽天】