スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



[ --/--/-- --:-- ] スポンサー広告 | トラックバック(-) | コメント(-)

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

今回、この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()


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




コメントの投稿














管理者にだけ表示を許可する
プロフィール

あとねっくす

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



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。