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

2007年06月30日

ブログに貼り付けたソースコードを分かりやすく見せたい！

というのはコードを書くブロガーなら誰でも思うはず。

最近はコードを書いてもそのまま貼り付けるだけになってしまっていましたが、やはりソースコードは色づけされて分かりやすい方がいい。

何故かまとまった情報が無いようなので、まとめてみました。

ちなみに、ライブラリを選ぶ最中にまとめたので、どのツールも未使用なのであしからず。

JavaScript系

JavaScriptを使って自動で色分けしてくれるようなツール。

元々のソースコードに手を加えず、導入が可能。

google-code-prettify

google-code-prettify - Google Code

Google製コードハイライター

対応言語
C, Java, Python, Bash, SQL, HTML, XML, CSS, JavaScript, Ruby, PHP, Perl
関連
あるＳＥのつぶやき: google-code-prettify - Google製コードハイライト表示JavaScriptライブラリ

syntaxhighlighter

syntaxhighlighter - Google Code

こちらはYahooでも使われているライブラリ

元々は「dp.SyntaxHighlighter」という名前で開発されていたようです。

<ul>でマークアップされているが多少気になりますが、行番号も表示出来て便利。

関連記事
dp.SyntaxHighlighter-コード表示に役立つJavaScript - WEBデザイン　BLOG
対応言語
C,C++,C#
CSS
Delphi
Java
JavaScript
PHP
Python
Ruby
SQL
VB
XML/HTML

Highlight.js

highlight.js

とても簡単にソースコードをハイライト出来るJavaScriptライブラリ。

色分けにはHTMLのclassを利用してカスタマイズできる。

作者のサンプルページ
Highlight
対応言語
Python
Ruby
Perl
PHP
HTML
CSS
Django
Javascript
VBScript
Delphi
Java
C++
RenderMan (RSL and RIB)
SQL
SmallTalk
Axapta
1C

Chili

Chili Manual

jQueryベースのシンタックスハイライター

スクリプト本体と色分けを行うCSSファイルのセット。ライブラリとしては結構大きめ。

対応言語
C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP, XHTML
関連記事
Chili - コードハイライトJavascript | Takazudo Clipping*

CodePress

CodePress - Real Time Syntax Highlighting Editor written in JavaScript

色分け出来るJavaScriptエディター。本来のエディターとしての使い方以外に、リードオンリーでコードを貼り付ける事も出来る。

対応言語
PHP, JavaScript, Java, Perl, SQL, HTML, CSS

CodeHighlighter

CodeHighlighter - danwebb.net Code Dump - Trac

使用しているサンプル
danwebb.net - Low Pro: Unobtrusive Scripting For Prototype
対応言語
JavaScript, Ruby, CSS, HTML

変換ツール系

ソースコードをサーバー側で変換、変換後のソースをブログに貼り付けるタイプ

ソースコードがHTMLでマークアップされてしまうので、見にくくなりますが、導入が手軽。

GeSHi

GeSHi - Generic Syntax Highlighter :: Home

シンタックスハイライトを行う、PHPライブラリ。開発元のサイトから使用例としてソースコードを変換出来ます。

対応言語
対応言語は70種類近くの言語から選べる。とても強力。あまりに多いので割合割愛
デモ
GeSHi - Generic Syntax Highlighter :: Demo
変換後のソースを簡単に貼り付ける事が出来ないのがとても残念。とはいえオプションも指定出来て便利。

利用サイト

geshi_webapi - koshigoe prototype - Trac
KoshigoeBLOG: なんとなくGeSHiでWebAPI書いてみた
CodeSyntaxHighLight(test)
ハタさんのブログ : 勝手にGeshiWebAPI
Quick Highlighter: A simple to use code syntax highlighter
恐らく前述したGeSHiを利用したサイト。
色の指定はスタイルシートで直接指定されている為、ユーザー好みに変換するのは大変そう。

Code Syntax Highlighter

Code Syntax Highlighter(Copy&Paste HTML)

コードの色指定にCSSのclassを使える。

対応言語
JavaScript, Java, PHP, Ruby, Python
関連記事
Enjoy*Study - Code Syntax Highlighter(Copy&Paste HTML)

ActionScript Highlighter v2

Arul's Blog: ActionScript Highlighter v2

ActionScript用のソースコード変換ツール。

ブログツールプラグイン系

WordPress

iG:Syntax Hiliter

Canned !! ? my Atropine ≫ Code for Fun!!

WordPress用プラグイン

WordPressでコード書いている人の多くが使っているような気がする。MTユーザーとしては羨ましい。

関連記事
iG:Syntax Hiliter 日本語版 ≪ MMRT daily life

WP-Syntax

WP-Syntax ≪ Extend ? Plugins

WordPress用プラグイン。前述したGeSHiを利用している
WPユーザーではないので使った事はありませんが、とても良さそうな感じです。

その他WordPress関係

WordPressのプラグイン一覧 ? コード表示
コード表示系プラグインをまとめて紹介されています。

Movable Type

探し方が悪いのか、残念ながら見つからず。

Tumblr

Syntax Highlighting in Tumblr

Dr Nic ≫ Syntax Highlighting in Tumblr

Tumblr用のコードハイライターのようです。詳細は分かっていなかったりします。

Tumblrは使ってないので何とも言えませんが、Tumblr好きはぜひ

前述したCodeHighlighter - danwebb.net Code Dump - Tracベースのようです。

作者のサンプル：Dr Nic's Journey

ウェブサービス系

Nopaste

Nopaste

ソースコード共有サービス

ソースコードを貼り付けて送信すると、コードをハイライトした後、パーマルリンクでアクセス出来るようになる。

ソースコードは24時間で消える。

Mozilla Pastebin

Mozilla Pastebin - collaborative debugging tool

こちらもNopaste同じく、コード共有サービス。

保存期間は24時間、一ヶ月、無期限から選べる。

対応言語を見る限り、GeSHiを使っているみたい。

その他コードライブラリー

SilverCity @ SourceForge
Pythonモジュールのソースコードハイライター
GNU Source-highlight - GNU Project - Free Software Foundation (FSF)
GNU謹製のハイライトツール。コマンドラインから使う。

で、どれが良いのか？

それは「カップラーメン」と「カップ焼きそば」と「カップうどん」を選ぶようなもの。
つまり分かりません。

自分の用途的には

貼り付けたソースコードはプレーンな状態が良い
マークアップした状態でエントリを保存するのは嫌なので、必然的にブログツールプラグインか、JavaScript系になりそう
行番号は表示したい
できれば<ul>でマークアップされていないもの。<ul>は違和感があるので。
色分けはCSSのクラスで指定したい

という感じ。
順番に使ってみるしかないか。

参考
37to's bookmarks tagged with "highlight" on del.icio.us
Popular pages tagged with "syntax" on del.icio.us
Quellcode-Verschonerer und -Formatierer | Dr. Web Weblog
ハイライタ - かもめ日記

posted by 37to at : 19:14 | コメント (3) | トラックバック (8)

コメント

shinriyo: 2008/06/16 13:46:19

検索で探しました。いろいろ紹介ありがとうございます。
誤字を発見しました。「GeSHi」の「対応言語」のところで「割合(わりあい)」となっていますが、「割愛(かつあい)」です。

shinriyo: 2008/06/16 13:47:57

すみませんスクリプトエラーで無駄に投稿されてしまいました・・。

37to@webmaster: 2008/06/17 01:38:33

> shinriyoさん
ご指摘ありがとうございます！

学がなく恥ずかしいのですが、素で間違えていました。
取り急ぎ修正致しました。ありがとうございました。


投稿する

投稿者情報を保存しますか?


トラックバック

トラックバックURI


一覧

ブログでソースコードを見やすくする
ブログにプログラムのソースコードを貼り付けるとき、見やすくする方法を探しました。 あなたのソースコードを彩る、Syntax Highlighterま...
Tracked by: 最上瞬光 at 2007年08月03日 09:51
iG:Syntax HiliterでActionScript 3.0をハイライト
iG:Syntax Hiliter同梱のGeSHiライブラリはActionScript 2.0対応だったので、ActionScript...
Tracked by: Flabo at 2008年02月04日 22:32
プラグイン WP-Syntax
プログラムやコードに詳しくはないので、あまり使うことはないのですが、見栄えと読んでいただいた皆様にわかりやすい方がいいだろうと思い、Syntax High...
Tracked by: WPdeざっきろぐ at 2008年02月10日 11:55
FC2でソースコードの予約語をカラー表示
www.37to.netを参考にしつつ、ソースコードをFC2のブログに貼り付けて 予約語をカラー表示する方法を模索してみました。 ■CodePre...
Tracked by: ＫＪの業務日誌 at 2008年03月09日 21:49
Syntax Highlighter
以下のBlogにSyntax Highligherについてまとめてありました！Syntax HighligherとはソースコードのキーワードなどをWeb...
Tracked by: Toshiyuki Kawanishi Blog at 2008年04月15日 22:48
SyntaxHighlighter を利用してWebページ上のソースコードを飾る
ども、ご無沙汰してます。スィンです。 10時ぐらいに寝ようと布団に入ったのですが、咳が出だして寝付けず。 せっかくなので、以前から導??...
Tracked by: スィンプロ (sinproject) at 2008年07月03日 02:44
(ブログ)Exciteブログにソースコードを貼り付ける
<pre>タグ いろいろ調べてみると<pre><code>でくくるのが一般的見たいですが、Exciteブログは<...
Tracked by: 3流プログラマのメモ書き at 2008年07月09日 13:32
Webページにソースコードを色付けして掲載するには
Syntax Highlightに関して非常によくまとめられていて参考にさせていただきました。
Tracked by: 『私的』ソフトウェア開発室 at 2008年08月19日 23:06